/* ==========================================================================
   Design tokens: Liquid Glass (light + dark)
   Every colour, radius, blur and shadow used by components lives here.
   Text tokens are tuned for >= 4.5:1 contrast on the glass surfaces.
   ========================================================================== */

:root {
  color-scheme: light dark;

  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-rounded: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  --fs-display: 4rem;      /* 64px timers */
  --fs-largetitle: 2.125rem; /* 34px */
  --fs-title1: 1.75rem;    /* 28px */
  --fs-title2: 1.375rem;   /* 22px */
  --fs-title3: 1.25rem;    /* 20px */
  --fs-headline: 1.0625rem;/* 17px semibold */
  --fs-body: 1.0625rem;    /* 17px */
  --fs-callout: 1rem;      /* 16px */
  --fs-subhead: 0.9375rem; /* 15px */
  --fs-footnote: 0.8125rem;/* 13px */
  --fs-caption: 0.75rem;   /* 12px */

  /* Spacing (4px grid) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;
  --gutter: 16px;

  /* Radii (continuous-corner feel) */
  --r-xs: 8px; --r-sm: 12px; --r-md: 16px; --r-lg: 22px; --r-xl: 28px; --r-pill: 999px;

  /* Sizes */
  --tap: 44px;
  --header-h: 60px;
  --tabbar-h: 64px;
  --tabbar-clearance: calc(var(--tabbar-h) + 40px + env(safe-area-inset-bottom, 0px));
  --page-max: 640px;
  --page-max-wide: 1120px;

  /* Motion */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .64, 1);
  --dur-fast: 140ms; --dur: 240ms; --dur-slow: 380ms;

  /* Glass */
  --blur: 24px;
  --blur-strong: 40px;
  --saturate: 180%;

  /* ---- Light palette ---- */
  --bg: #eef1f8;
  --bg-grad-1: rgba(142, 190, 48, .30);   /* brand green haze */
  --bg-grad-2: rgba(150, 190, 255, .36);  /* sky */
  --bg-grad-3: rgba(190, 225, 120, .30);  /* soft lime */
  --bg-grad-4: rgba(110, 210, 200, .26);  /* mint */

  --text: #0b0d12;          /* 17:1 */
  --text-2: #454b59;        /* 7.7:1 secondary */
  --text-3: #565d6c;        /* 5.8:1 tertiary, captions */
  --text-inverse: #ffffff;

  --glass-bg: rgba(255, 255, 255, .62);
  --glass-bg-thick: rgba(255, 255, 255, .82);
  --glass-bg-thin: rgba(255, 255, 255, .40);
  --glass-bg-solid: #f9fafd;              /* reduced transparency */
  --glass-border: rgba(255, 255, 255, .75);
  --glass-stroke: rgba(15, 23, 42, .08);  /* faint outer hairline */
  --glass-highlight: rgba(255, 255, 255, .95);
  --glass-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 8px 28px rgba(30, 41, 80, .10);
  --glass-shadow-lg: 0 2px 6px rgba(15, 23, 42, .06), 0 20px 60px rgba(30, 41, 80, .18);

  --fill-1: rgba(118, 125, 145, .12);   /* control fill (segmented track, input) */
  --fill-2: rgba(118, 125, 145, .20);   /* pressed */
  --fill-3: rgba(118, 125, 145, .28);
  --separator: rgba(60, 66, 84, .14);
  --focus: #466a0c;   /* brand-ink: 3:1+ on every light surface */
  --scrim: rgba(12, 16, 28, .32);

  /* Accents: --{c} solid fill (white text >= 4.6:1), --{c}-ink text on glass (>= 4.5:1), --{c}-soft tint */
  --blue: #0a66e0;   --blue-ink: #0757c2;   --blue-soft: rgba(10, 102, 224, .13);
  --purple: #8340d0; --purple-ink: #7433c2; --purple-soft: rgba(131, 64, 208, .13);
  --orange: #c25400; --orange-ink: #9c4300; --orange-soft: rgba(230, 110, 0, .15);
  --pink: #c8285f;   --pink-ink: #b5224f;   --pink-soft: rgba(200, 40, 95, .12);
  --red: #d02b2b;    --red-ink: #b82222;    --red-soft: rgba(208, 43, 43, .12);
  --green: #16803c;  --green-ink: #11703a;  --green-soft: rgba(22, 128, 60, .13);
  --grey: #5f6673;   --grey-ink: #535965;   --grey-soft: rgba(95, 102, 115, .13);
  --teal: #0f766e;   --teal-ink: #0d6b63;   --teal-soft: rgba(15, 118, 110, .13);

  /* Brand (coach's colour #8ebe30). Too light for text on light glass (1.9:1), so:
     --brand is a FILL with --brand-on (dark) text on top (6.9:1);
     --brand-ink is the derived shade for text/icons on light glass (5.6:1). */
  --brand: #8ebe30;
  --brand-on: #1a2a00;
  --brand-ink: #466a0c;
  --brand-soft: rgba(142, 190, 48, .20);

  /* App tint = brand: primary buttons, active tab, progress, highlights, focus */
  --tint: var(--brand);
  --tint-on: var(--brand-on);
  --tint-ink: var(--brand-ink);
  --tint-soft: var(--brand-soft);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0a0c14;
    --bg-grad-1: rgba(120, 175, 30, .26);
    --bg-grad-2: rgba(50, 90, 200, .30);
    --bg-grad-3: rgba(90, 150, 40, .18);
    --bg-grad-4: rgba(30, 160, 150, .18);

    --text: #f3f5fa;
    --text-2: #b4bacb;
    --text-3: #a3aabb;
    --text-inverse: #0b0d12;

    --glass-bg: rgba(30, 33, 48, .62);
    --glass-bg-thick: rgba(29, 32, 48, .86);
    --glass-bg-thin: rgba(40, 44, 62, .42);
    --glass-bg-solid: #1d2030;
    --glass-border: rgba(255, 255, 255, .12);
    --glass-stroke: rgba(0, 0, 0, .35);
    --glass-highlight: rgba(255, 255, 255, .16);
    --glass-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 32px rgba(0, 0, 0, .35);
    --glass-shadow-lg: 0 2px 8px rgba(0, 0, 0, .35), 0 24px 70px rgba(0, 0, 0, .55);

    --fill-1: rgba(150, 158, 185, .16);
    --fill-2: rgba(150, 158, 185, .26);
    --fill-3: rgba(150, 158, 185, .34);
    --separator: rgba(255, 255, 255, .10);
    --focus: #a6d64e;
    --scrim: rgba(0, 0, 0, .55);

    --blue-ink: #6aa8ff;   --blue-soft: rgba(80, 150, 255, .20);
    --purple-ink: #c39bff; --purple-soft: rgba(170, 120, 255, .20);
    --orange-ink: #ffaa5c; --orange-soft: rgba(255, 150, 60, .18);
    --pink-ink: #ff86ab;   --pink-soft: rgba(255, 100, 150, .18);
    --red-ink: #ff8080;    --red-soft: rgba(255, 90, 90, .18);
    --green-ink: #4ad18a;  --green-soft: rgba(60, 200, 120, .18);
    --grey-ink: #b3b9c4;   --grey-soft: rgba(170, 178, 195, .16);
    --teal-ink: #3dd6c6;   --teal-soft: rgba(40, 200, 185, .18);
    --brand-ink: #a6d64e;  --brand-soft: rgba(142, 190, 48, .18);
  }
}

/* Accent scoping: any element with data-accent (or data-block) sets --accent (fill), --accent-on (text on that fill),
   --accent-ink (text/icons on glass) and --accent-soft (tint) for itself and its children. Components read these. */
[data-accent="blue"],   [data-block="sets"]      { --accent: var(--blue);   --accent-on: #fff; --accent-ink: var(--blue-ink);   --accent-soft: var(--blue-soft); }
[data-accent="purple"], [data-block="circuit"]   { --accent: var(--purple); --accent-on: #fff; --accent-ink: var(--purple-ink); --accent-soft: var(--purple-soft); }
[data-accent="orange"], [data-block="emom"]      { --accent: var(--orange); --accent-on: #fff; --accent-ink: var(--orange-ink); --accent-soft: var(--orange-soft); }
[data-accent="pink"],   [data-block="amrap"]     { --accent: var(--pink);   --accent-on: #fff; --accent-ink: var(--pink-ink);   --accent-soft: var(--pink-soft); }
[data-accent="red"],    [data-block="forTime"]   { --accent: var(--red);    --accent-on: #fff; --accent-ink: var(--red-ink);    --accent-soft: var(--red-soft); }
[data-accent="teal"],   [data-block="intervals"] { --accent: var(--teal);   --accent-on: #fff; --accent-ink: var(--teal-ink);   --accent-soft: var(--teal-soft); }
[data-accent="green"]                            { --accent: var(--green);  --accent-on: #fff; --accent-ink: var(--green-ink);  --accent-soft: var(--green-soft); }
[data-accent="grey"],   [data-block="text"]      { --accent: var(--grey);   --accent-on: #fff; --accent-ink: var(--grey-ink);   --accent-soft: var(--grey-soft); }
[data-accent="brand"]                            { --accent: var(--brand);  --accent-on: var(--brand-on); --accent-ink: var(--brand-ink); --accent-soft: var(--brand-soft); }

/* Default accent (no data-accent) = brand */
:root { --accent: var(--tint); --accent-on: var(--tint-on); --accent-ink: var(--tint-ink); --accent-soft: var(--tint-soft); }