/* ===========================================================================
   bikecoa.ch — design tokens
   ---------------------------------------------------------------------------
   One source of truth for colour, type, space, motion and elevation.

   The theme is DARK-FIRST: an athlete reads this at 06:00 before a session and
   at 22:00 after one, and the data marks were stepped for a dark surface. Light
   mode is a *selected* second theme (its own steps, re-validated against the
   light surface), never an automatic inversion.

   Resolution order, so both the OS setting and the in-app toggle work:
     :root                        -> dark (the base)
     @media (prefers-color-scheme: light) :root:not([data-theme="dark"]) -> light
     :root[data-theme="light"]    -> light (explicit, wins over OS dark)
   =========================================================================== */

:root {
  color-scheme: dark;

  /* --- Surfaces ------------------------------------------------------------
     canvas  : the page plane
     s1      : the standard card / chart surface (all marks validated on it)
     s2      : raised surface inside a card (inputs, rows, wells)
     s3      : overlays — sheets, drawers, menus
     sunken  : recessed wells, track backgrounds                              */
  --canvas:        #0A0D12;
  --canvas-deep:   #05070B;
  --s1:            #111721;
  --s2:            #18202C;
  --s3:            #151C27;
  --sunken:        #0C1118;

  --line:          rgba(255, 255, 255, 0.075);
  --line-strong:   rgba(255, 255, 255, 0.14);
  --line-faint:    rgba(255, 255, 255, 0.045);

  /* --- Ink ---------------------------------------------------------------- */
  --ink:           #F2F5F9;
  --ink-2:         #A8B3C4;
  --ink-3:         #6F7C90;
  --ink-inverse:   #0A0D12;

  /* --- Brand -------------------------------------------------------------
     A single electric lime carries every primary action and the active nav
     state. It is deliberately outside the series palette so a brand surface can
     never be mistaken for a data series.                                     */
  --brand:         #C8FA55;
  --brand-dim:     #9FCE33;
  --brand-ink:     #C8FA55;      /* brand as *text* — swapped in light mode   */
  --on-brand:      #0A0D12;
  --brand-wash:    rgba(200, 250, 85, 0.12);
  --brand-glow:    rgba(200, 250, 85, 0.22);

  /* --- Data series (validated: OKLCH band, chroma, CVD ΔE, contrast) -------
     Fixed order, never cycled. Roles are stable across the whole app so that
     "blue = fresh / fitness" and "orange = fatigue / load" never flip.        */
  --s-1: #3987E5;   /* fitness · fresh curve · primary series   */
  --s-2: #D9772B;   /* fatigue · fatigued curve · load          */
  --s-3: #199E70;   /* aqua    · elevation, secondary measure   */
  --s-4: #9085E9;   /* violet  · cadence                        */
  --s-5: #D55181;   /* magenta · heart rate                     */
  --s-6: #C98500;   /* yellow  · spare                          */

  /* Diverging pair for signed quantities (form / TSB, time delta, wind). */
  --div-pos:   #3987E5;
  --div-neg:   #D03B3B;
  --div-mid:   #38414F;

  /* Ordinal intensity ramp — one hue, monotone lightness. Zone 1 → Zone 6. */
  --z1: #8A5A12;
  --z2: #A86D10;
  --z3: #C4820C;
  --z4: #DA9A1F;
  --z5: #EBB03C;
  --z6: #F8C766;

  /* --- Status (reserved: never reused as a series) ------------------------ */
  --ok:        #0CA30C;
  --warn:      #FAB219;
  --serious:   #EC835A;
  --critical:  #D03B3B;
  --ok-wash:       rgba(12, 163, 12, 0.14);
  --warn-wash:     rgba(250, 178, 25, 0.14);
  --serious-wash:  rgba(236, 131, 90, 0.14);
  --critical-wash: rgba(208, 59, 59, 0.14);

  /* --- Chart chrome ------------------------------------------------------- */
  --grid:      rgba(255, 255, 255, 0.07);
  --axis:      rgba(255, 255, 255, 0.16);
  --chart-ink: var(--ink-3);
  --surface-gap: var(--s1);      /* the 2px spacer between touching marks     */

  /* --- Calendar entry hues (server defaults; overridden per athlete) ------- */
  --c-ride:    #f97316;
  --c-run:     #3b82f6;
  --c-walk:    #a78bfa;
  --c-hike:    #22c55e;
  --c-virtual: #06b6d4;
  --c-event:   #8b5cf6;
  --c-blocked: #ef4444;
  --c-goal:    #eab308;
  --c-macro:   #14b8a6;
  --c-other:   #64748b;

  /* --- Type ---------------------------------------------------------------
     One system sans throughout, including hero figures. Numbers get tabular
     figures only where they must align in a column.                          */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --fs-display: clamp(2rem, 1.2rem + 3.4vw, 3.25rem);
  --fs-h1:      clamp(1.5rem, 1.05rem + 2vw, 2.25rem);
  --fs-h2:      clamp(1.15rem, 0.98rem + 0.8vw, 1.4rem);
  --fs-h3:      clamp(1rem, 0.95rem + 0.3vw, 1.09rem);
  --fs-body:    0.945rem;
  --fs-sm:      0.85rem;
  --fs-xs:      0.775rem;
  --fs-micro:   0.7rem;

  --lh-tight: 1.15;
  --lh-snug:  1.35;
  --lh-body:  1.6;

  --tracking-label: 0.08em;
  --tracking-tight: -0.015em;

  /* --- Space --------------------------------------------------------------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --gutter: clamp(1rem, 3vw, 2.5rem);
  --grid-gap: clamp(0.75rem, 1.5vw, 1.25rem);

  /* --- Shape --------------------------------------------------------------- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* --- Elevation -----------------------------------------------------------
     Dark UIs read depth from light, not from shadow alone, so every raised
     surface carries a hairline as well as a shadow.                          */
  --e-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --e-2: 0 4px 16px -4px rgba(0, 0, 0, 0.55);
  --e-3: 0 18px 48px -12px rgba(0, 0, 0, 0.7);
  --e-focus: 0 0 0 2px var(--canvas), 0 0 0 4px var(--brand);

  /* --- Motion -------------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 120ms;
  --t-base: 200ms;
  --t-slow: 340ms;

  /* --- Shell metrics -------------------------------------------------------- */
  --sidebar-w: 264px;
  --rail-w: 68px;
  --header-h: 60px;
  --tabbar-h: 60px;
  --canvas-max: 1440px;

  /* --- Layers -------------------------------------------------------------- */
  --z-header: 30;
  --z-nav: 40;
  --z-overlay: 60;
  --z-toast: 80;
}

/* ---------------------------------------------------------------------------
   Light theme — re-stepped for a white chart surface, not an inversion.
   --------------------------------------------------------------------------- */
:root[data-theme="light"],
:root[data-theme="auto"] {
  /* placeholder so the selector list below stays symmetric; real values follow */
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;

    --canvas:      #EEF1F5;
    --canvas-deep: #E3E8EF;
    --s1:          #FFFFFF;
    --s2:          #F5F7FA;
    --s3:          #FFFFFF;
    --sunken:      #EDF0F5;

    --line:        rgba(10, 13, 18, 0.10);
    --line-strong: rgba(10, 13, 18, 0.18);
    --line-faint:  rgba(10, 13, 18, 0.055);

    --ink:         #0B1016;
    --ink-2:       #4A5666;
    --ink-3:       #75808F;
    --ink-inverse: #FFFFFF;

    --brand:       #C8FA55;
    --brand-dim:   #A9DC33;
    --brand-ink:   #4C7A0B;
    --on-brand:    #0A0D12;
    --brand-wash:  rgba(122, 178, 16, 0.16);
    --brand-glow:  rgba(122, 178, 16, 0.24);

    --s-1: #2A78D6;
    --s-2: #EB6834;
    --s-3: #1BAF7A;
    --s-4: #4A3AA7;
    --s-5: #E87BA4;
    --s-6: #EDA100;

    --div-pos: #2A78D6;
    --div-neg: #D03B3B;
    --div-mid: #D4DAE3;

    --z1: #E9A93F;
    --z2: #D4911E;
    --z3: #B97A0A;
    --z4: #9C6405;
    --z5: #7E4F04;
    --z6: #5F3B03;

    --ok-wash:       rgba(12, 163, 12, 0.12);
    --warn-wash:     rgba(250, 178, 25, 0.18);
    --serious-wash:  rgba(236, 131, 90, 0.16);
    --critical-wash: rgba(208, 59, 59, 0.12);

    --grid: rgba(10, 13, 18, 0.08);
    --axis: rgba(10, 13, 18, 0.2);

    --e-1: 0 1px 2px rgba(16, 24, 40, 0.06);
    --e-2: 0 6px 18px -6px rgba(16, 24, 40, 0.16);
    --e-3: 0 22px 52px -16px rgba(16, 24, 40, 0.28);
  }
}

:root[data-theme="light"] {
  color-scheme: light;

  --canvas:      #EEF1F5;
  --canvas-deep: #E3E8EF;
  --s1:          #FFFFFF;
  --s2:          #F5F7FA;
  --s3:          #FFFFFF;
  --sunken:      #EDF0F5;

  --line:        rgba(10, 13, 18, 0.10);
  --line-strong: rgba(10, 13, 18, 0.18);
  --line-faint:  rgba(10, 13, 18, 0.055);

  --ink:         #0B1016;
  --ink-2:       #4A5666;
  --ink-3:       #75808F;
  --ink-inverse: #FFFFFF;

  --brand:       #C8FA55;
  --brand-dim:   #A9DC33;
  --brand-ink:   #4C7A0B;
  --on-brand:    #0A0D12;
  --brand-wash:  rgba(122, 178, 16, 0.16);
  --brand-glow:  rgba(122, 178, 16, 0.24);

  --s-1: #2A78D6;
  --s-2: #EB6834;
  --s-3: #1BAF7A;
  --s-4: #4A3AA7;
  --s-5: #E87BA4;
  --s-6: #EDA100;

  --div-pos: #2A78D6;
  --div-neg: #D03B3B;
  --div-mid: #D4DAE3;

  --z1: #E9A93F;
  --z2: #D4911E;
  --z3: #B97A0A;
  --z4: #9C6405;
  --z5: #7E4F04;
  --z6: #5F3B03;

  --ok-wash:       rgba(12, 163, 12, 0.12);
  --warn-wash:     rgba(250, 178, 25, 0.18);
  --serious-wash:  rgba(236, 131, 90, 0.16);
  --critical-wash: rgba(208, 59, 59, 0.12);

  --grid: rgba(10, 13, 18, 0.08);
  --axis: rgba(10, 13, 18, 0.2);

  --e-1: 0 1px 2px rgba(16, 24, 40, 0.06);
  --e-2: 0 6px 18px -6px rgba(16, 24, 40, 0.16);
  --e-3: 0 22px 52px -16px rgba(16, 24, 40, 0.28);
}