/* ===========================================================================
   Flows — Colors & Type
   Lifted from FlowSwitch/Views.swift (AppColor) and the SwiftUI type stack.
   The app supports automatic light/dark; this file ships dark as the default
   (the brand identity image is dark OLED) and exposes a [data-theme="light"]
   override.
   =========================================================================== */

:root,
[data-theme="dark"] {
  /* ─── Surfaces (dark / OLED-friendly) ───────────────────────────────────── */
  --bg-app:           #000000;   /* full black, OLED idle */
  --surface-1:        #151518;   /* card resting */
  --surface-2:        #1C1C21;   /* nested / muted card */
  --surface-elevated: #25252B;   /* hovered / active card */
  --border-subtle:    rgba(255,255,255,0.06);
  --scrim:            rgba(0,0,0,0.42);

  /* ─── Text ──────────────────────────────────────────────────────────────── */
  --fg-1: #FFFFFF;     /* primary */
  --fg-2: #B6B6C2;     /* secondary */
  --fg-3: #7D7D88;     /* tertiary / hint */

  /* ─── Accents ───────────────────────────────────────────────────────────── */
  --accent:         #2BB2C8;   /* active flow / tint — cyan */
  --accent-soft:    rgba(43,178,200,0.34);
  --accent-glow:    rgba(43,178,200,0.22);
  --link:           #5BD4E8;   /* body link color, WCAG AA on dark surfaces (~8.5:1 on #000) */
  --link-hover:     #8FE4F2;   /* lighter on hover */
  --focus-ring:     #5BD4E8;
  --warning:        #FFB454;   /* break recommended */
  --water:          #2BB2C8;   /* logo water teal (== accent) */
  --coral:          #FF5A66;   /* legacy / contrast highlight */
  --water-deep:     #16606E;   /* hand-painted shadow under the wave */

  /* ─── Flow palette (TimerProject default + the swatches users pick) ────── */
  --flow-teal:    #2A9D8F;     /* default project color */
  --flow-blue:    #3B82F6;
  --flow-indigo:  #6366F1;
  --flow-rose:    #FF5A66;
  --flow-amber:   #FFB454;
  --flow-sage:    #6FA37C;
  --flow-sand:    #C7A26B;
  --flow-slate:   #8E9098;     /* Drift / Unallocated */
  --flow-graphite:#3F4046;     /* Break */
}

[data-theme="light"] {
  --bg-app:           #F2F2F6;
  --surface-1:        #FFFFFF;
  --surface-2:        #F7F7FA;
  --surface-elevated: #FFFFFF;
  --border-subtle:    #DFDFE5;
  --scrim:            rgba(0,0,0,0.16);

  --fg-1: #050506;
  --fg-2: #6F7179;
  --fg-3: #8E9098;

  --accent-soft: rgba(43,178,200,0.18);
  --accent-glow: rgba(43,178,200,0.12);
  --link:        #0A6373;   /* body link color, WCAG AA on light surfaces (~5.6:1 on #F2F2F6) */
  --link-hover:  #084C58;
  --focus-ring:  #0A6373;
}

:root {
  /* ─── Radii — SwiftUI uses RoundedRectangle(cornerRadius: 8) almost
        everywhere; capsules for active chips; circles for dials. ─── */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;     /* cards, sheets, fields — the default */
  --radius-lg: 14px;    /* large sheets */
  --radius-pill: 999px; /* capsules: sticky active clock, status chips */

  /* ─── Borders ─── */
  --border-hair:   0.5px;  /* TodayPanel */
  --border-thin:   1px;    /* resting card */
  --border-medium: 1.5px;  /* sticky active clock outline */
  --border-thick:  3px;    /* active TimerDialButton */

  /* ─── Shadows — soft, with a coloured accent shadow for active state ─── */
  --shadow-card:        0 1px 4px rgba(0,0,0,0.32);
  --shadow-card-hover:  0 3px 10px rgba(0,0,0,0.32);
  --shadow-active:      0 5px 18px rgba(43,178,200,0.28), 0 3px 10px rgba(0,0,0,0.32);
  --shadow-dial-resting:0 4px 5px rgba(255,255,255,0.08);  /* dark mode inner glow */
  --shadow-dial-active: 0 4px 14px rgba(255,255,255,0.18);

  /* ─── Spacing (pulled from SwiftUI padding(12/14/16/18)) ─── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  14px;
  --space-5:  16px;
  --space-6:  18px;
  --space-8:  24px;
  --space-10: 32px;

  /* ─── Motion ─── */
  --ease-smooth:    cubic-bezier(0.22, 0.61, 0.36, 1);   /* SwiftUI .smooth */
  --ease-snappy:    cubic-bezier(0.18, 0.89, 0.32, 1.1); /* SwiftUI .snappy */
  --dur-fast:       0.28s;
  --dur-medium:     0.35s;
  --dur-ring:       0.65s;
  --dur-breath-work: 4.8s;    /* active project breathing */
  --dur-breath-drift: 7.2s;   /* drift breathes slower */

  /* ─── Type — SwiftUI body/caption/title pulled from .font modifiers ───── */
  --font-sans:    "Nunito", -apple-system, BlinkMacSystemFont, "SF Pro Text",
                  "Helvetica Neue", system-ui, sans-serif;
  --font-rounded: "Nunito", "SF Pro Rounded", -apple-system, system-ui,
                  "Helvetica Neue", sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* ─── Type ramp — mapped 1:1 from SwiftUI Dynamic Type defaults at @1x.
   Use these by name; do not invent new sizes. ─── */
.type-large-title { font: 700 34px/40px var(--font-rounded); letter-spacing: -0.4px; }
.type-title-1     { font: 700 28px/34px var(--font-rounded); letter-spacing: -0.3px; }
.type-title-2     { font: 700 22px/28px var(--font-rounded); letter-spacing: -0.2px; }  /* TodayPanel “Today” */
.type-title-3     { font: 600 20px/26px var(--font-rounded); letter-spacing: -0.2px; }
.type-headline    { font: 800 17px/22px var(--font-rounded); letter-spacing: -0.1px; }  /* sticky active clock duration */
.type-body        { font: 400 17px/22px var(--font-sans); }
.type-callout     { font: 500 16px/21px var(--font-sans); }
.type-subheadline { font: 600 15px/20px var(--font-sans); }                              /* dial label */
.type-footnote    { font: 600 13px/18px var(--font-sans); }
.type-caption     { font: 600 12px/16px var(--font-sans); letter-spacing: 0.1px; }       /* category labels */
.type-caption-2   { font: 700 11px/14px var(--font-sans); letter-spacing: 0.2px; }       /* status strip */
.type-digit-clock { font: 800 34px/38px var(--font-rounded); font-variant-numeric: tabular-nums; }
.type-mono        { font: 500 14px/20px var(--font-mono); }

/* ─── Semantic shortcuts ─── */
h1 { @extend .type-large-title; }   /* purely declarative; real selectors below */
h1, .h1 { font: 700 34px/40px var(--font-rounded); letter-spacing: -0.4px; color: var(--fg-1); }
h2, .h2 { font: 700 22px/28px var(--font-rounded); letter-spacing: -0.2px; color: var(--fg-1); }
h3, .h3 { font: 600 17px/22px var(--font-rounded); color: var(--fg-1); }
p,  .p  { font: 400 15px/22px var(--font-sans);    color: var(--fg-2); }
small, .small { font: 600 12px/16px var(--font-sans); color: var(--fg-3); letter-spacing: 0.1px; }
code, .code   { font: 500 13px/18px var(--font-mono); color: var(--fg-2); }

/* ─── Base ─── */
html, body {
  background: var(--bg-app);
  color: var(--fg-1);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ─── Product Hunt launch banner (site-wide, 2026-06-16) ─── */
.ph-banner { display: flex; align-items: center; justify-content: center; gap: 12px 20px;
             flex-wrap: wrap; padding: 12px 20px; text-align: center; position: relative; z-index: 60;
             background: linear-gradient(90deg, var(--accent-glow), var(--accent-soft));
             border-bottom: 1px solid var(--accent); }
.ph-banner-text { font: 800 15px/1.2 var(--font-rounded); color: var(--fg-1); letter-spacing: .2px; }
.ph-banner-badge { display: inline-flex; line-height: 0; transition: transform .15s ease, opacity .15s ease; }
.ph-banner-badge:hover { transform: translateY(-1px); opacity: .92; }
.ph-banner-badge img { display: block; height: 44px; width: auto; }
@media (max-width: 520px) { .ph-banner { gap: 10px; padding: 10px 14px; } .ph-banner-text { font-size: 13.5px; } }