/* ==========================================================================
   Kit tokens — the ONLY file you edit to match a project's brand.
   Every component in kit.css is built from these variables, so re-skinning
   the whole kit means editing the values below (usually 5 to 10 lines).
   Load order: tokens.css, then kit.css.

   The material model follows Apple's current guidance (HIG "Materials",
   updated 2025-09-09, + "Adopting Liquid Glass"):
     - glass belongs to the FLOATING layer (navigation, toolbars, menus,
       sheets), never to the content layer;
     - content sits on plain opaque surfaces;
     - a control in the content layer (switch, slider) may take on glass
       *while it is being manipulated*, then drop back.
   See kit/SOURCES.md for what is sourced and what is our own judgement.
   ========================================================================== */

:root {
  color-scheme: light dark;

  /* --- Brand -------------------------------------------------------------
     Change --k-accent and the whole kit follows (filled buttons, tinted
     glass, focus rings, selected states). Derived shades use color-mix(),
     so there is nothing else to recompute by hand.
     NOTE: these hex values are the iOS system colours as we know them, not
     values extracted from a published Apple source. Retint per project. */
  --k-accent: #007aff;
  --k-accent-ink: #ffffff;              /* text drawn on top of the accent */
  --k-success: #34c759;
  --k-warning: #ff9f0a;
  --k-danger: #ff3b30;

  /* --- Content layer: surfaces & text (light) ----------------------------
     Opaque on purpose. Glass here would fight the floating layer. */
  --k-bg: #f2f2f7;
  --k-surface: #ffffff;
  --k-surface-2: #f7f7fa;
  --k-surface-sunken: #ebebf0;

  --k-text: #10111a;
  /* Measured: the previous values failed WCAG AA on white — .66 gave 4.02:1
     (4.5 required) and .36 gave 1.92:1. The dark theme already passed. */
  --k-text-2: rgba(60, 60, 67, 0.75);   /* secondary label, 5.16:1 */
  --k-text-3: rgba(60, 60, 67, 0.55);   /* DECORATIVE ONLY, 2.92:1: never real text */
  --k-accent-text: #0066cc;             /* 5.57:1 — --k-accent is 4.02:1 and must not carry text */
  --k-line: rgba(60, 60, 67, 0.16);
  --k-line-strong: rgba(60, 60, 67, 0.28);

  /* --- Floating layer: the glass material --------------------------------
     `regular` is the default: it blurs AND lifts the luminosity of what is
     behind so labels stay readable over anything.
     `clear` is for bars floating over photos/video only, and then the
     content underneath needs the dimming layer (--k-glass-dim).
     Set --k-blur: 0px to opt the whole project out of glass. */
  --k-blur: 18px;
  --k-saturate: 180%;
  /* Measured against Apple Music: the regular material lifts luminosity hard,
     so the panel stays near-white and you only *guess* the shapes underneath.
     At 1.08 the raw colours came through and it read as a stained window. */
  --k-glass-brightness: 1.45;

  /* Translucent, but not see-through: what makes it glass is the lift, not a
     low alpha. Below ~0.3 the content behind dominates and labels fight it. */
  --k-glass: rgba(255, 255, 255, 0.46);       /* regular variant */
  --k-glass-clear: rgba(255, 255, 255, 0.10); /* clear variant   */
  --k-glass-dim: rgba(0, 0, 0, 0.35);         /* HIG: 35% dimming behind clear glass on bright content */
  --k-glass-line: rgba(255, 255, 255, 0.65);  /* rim */
  --k-glass-tint: 16%;                        /* accent share in tinted (prominent) glass */

  /* Specular edge: the lit rim of a glass slab. Bright hairline on top where
     light hits, softer bounce underneath, plus a faint inner glow that keeps
     the edge from looking cut out. */
  --k-specular:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 0 12px 0 rgba(255, 255, 255, 0.18);

  /* --- Radius ------------------------------------------------------------
     Apple's current shapes are rounder, and NESTED shapes are concentric:
     inner radius = outer radius - padding. Components that nest (toolbar
     groups, cards with inset media) compute it with calc(). */
  --k-r-xs: 8px;
  --k-r-sm: 12px;
  --k-r-md: 16px;
  --k-r-lg: 22px;
  --k-r-xl: 28px;
  --k-r-2xl: 36px;      /* sheets, floating bars */
  --k-r-pill: 999px;

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

  /* --- Typography --------------------------------------------------------
     System stack by default: zero network cost, native feel. Swap
     --k-font for the brand face; keep the tight tracking on large sizes. */
  --k-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
            system-ui, "Helvetica Neue", Arial, sans-serif;
  --k-font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;

  --k-fs-2xs: 0.6875rem; /* 11 - micro labels in caps, only */
  --k-fs-xs: 0.75rem;    /* 12 - captions, badges */
  --k-fs-sm: 0.8125rem;  /* 13 - hints, table cells */
  --k-fs-md: 0.9375rem;  /* 15 - body, controls (iOS default) */
  --k-fs-lg: 1.0625rem;  /* 17 - emphasised body, card titles */
  --k-fs-xl: 1.25rem;    /* 20 - section titles */
  --k-fs-2xl: 1.5rem;    /* 24 */
  --k-fs-3xl: 1.875rem;  /* 30 - page titles */
  --k-fs-4xl: 2.5rem;    /* 40 - showcase */

  /* --- Weight ladder -----------------------------------------------------
     ONLY values backed by a real font file. Measured on this machine
     (Windows 11 / Segoe UI): the family ships 300/400/600/700 and nothing
     else, so 520, 560, 590, 620 and 640 all rendered the SAME pixels. The
     kit declared all five, which is why the hierarchy looked flat: nav link,
     tab, button, card title and brand were literally identical.
     450 is deliberate: it stays Regular on Windows and becomes a true medium
     on SF, so it degrades instead of jumping a whole step. */
  --k-fw-regular: 400;
  --k-fw-medium: 450;
  --k-fw-semibold: 600;
  --k-fw-bold: 700;

  /* Line-height ramp: no heading declared one, so every title fell back to
     `normal` (1.31 for Segoe UI) by accident rather than by decision. */
  --k-lh-display: 1.05;  /* 30-40px */
  --k-lh-title: 1.15;    /* 20-24px */
  --k-lh-snug: 1.3;      /* 17px */
  --k-lh-ui: 1.35;       /* 13-15px */
  --k-lh: 1.5;           /* running text */
  --k-lh-prose: 1.6;     /* long prose */
  --k-lh-flat: 1;        /* buttons, badges */

  /* Tracking must scale inversely with size: -0.02em is right at 17px and
     far too loose at 40px. */
  --k-track-display: -0.028em;
  --k-track-title: -0.021em;
  --k-track-snug: -0.014em;
  --k-track-body: 0em;
  --k-track-caps: 0.07em;
  --k-track-tight: -0.02em;   /* kept: several components rely on it */

  /* --- Elevation ---------------------------------------------------------
     Two-layer shadows: a tight contact shadow plus a soft ambient one.
     The floating layer gets a wider, softer one so it reads as detached. */
  --k-shadow-1: 0 1px 2px rgba(16, 17, 26, 0.06), 0 1px 1px rgba(16, 17, 26, 0.04);
  --k-shadow-2: 0 4px 16px rgba(16, 17, 26, 0.08), 0 1px 2px rgba(16, 17, 26, 0.06);
  --k-shadow-3: 0 12px 40px rgba(16, 17, 26, 0.16), 0 2px 8px rgba(16, 17, 26, 0.08);
  --k-shadow-float: 0 8px 32px rgba(16, 17, 26, 0.18), 0 2px 6px rgba(16, 17, 26, 0.10);

  /* --- Motion ------------------------------------------------------------ */
  --k-ease: cubic-bezier(0.22, 1, 0.36, 1);           /* out-quint, the default */
  --k-ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --k-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* slight overshoot */
  --k-t-fast: 140ms;
  --k-t: 220ms;
  --k-t-slow: 340ms;

  /* --- Focus ring (accessibility, never remove) --------------------------
     An outline, not a shadow: the old box-shadow measured 1.63:1 (3:1
     required), it REPLACED the elevation shadow on cards and buttons, and it
     vanishes entirely in Windows forced-colors mode. An outline follows the
     border-radius on its own and stacks with box-shadow. */
  --k-focus-ring: 2px solid var(--k-accent);
  --k-focus-offset: 2px;
  --k-focus: 0 0 0 3px color-mix(in srgb, var(--k-accent) 38%, transparent);

  /* --- Controls ----------------------------------------------------------
     Current Apple controls are taller and rounder than they used to be. */
  --k-control-h: 46px;
  --k-control-h-sm: 36px;
  --k-control-h-lg: 56px;
  --k-bar-h: 58px;          /* floating bars */
  --k-bar-pad: 6px;         /* padding inside a bar → drives concentric radii */
}

/* Dark theme: automatic, plus a manual override via [data-theme] on <html>. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --k-bg: #0b0b0f;
    --k-surface: #1c1c1e;
    --k-surface-2: #2c2c2e;
    --k-surface-sunken: #141417;

    --k-glass: rgba(40, 40, 44, 0.42);
    --k-glass-clear: rgba(20, 20, 24, 0.18);
    --k-glass-line: rgba(255, 255, 255, 0.20);
    --k-glass-brightness: 1.35;   /* dark glass needs lifting, not dimming */
    --k-specular:
      inset 0 1px 0 0 rgba(255, 255, 255, 0.28),
      inset 0 -1px 1px 0 rgba(255, 255, 255, 0.10),
      inset 0 0 12px 0 rgba(255, 255, 255, 0.06);

    --k-accent: #0a84ff;
    --k-text: #ffffff;
    --k-text-2: rgba(235, 235, 245, 0.62);
    --k-text-3: rgba(235, 235, 245, 0.34);
    --k-line: rgba(235, 235, 245, 0.16);
    --k-line-strong: rgba(235, 235, 245, 0.3);

    --k-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --k-shadow-2: 0 4px 16px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.3);
    --k-shadow-3: 0 12px 40px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.35);
    --k-shadow-float: 0 8px 32px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.35);
  }
}

:root[data-theme="dark"] {
  --k-bg: #0b0b0f;
  --k-surface: #1c1c1e;
  --k-surface-2: #2c2c2e;
  --k-surface-sunken: #141417;

  --k-glass: rgba(40, 40, 44, 0.42);
  --k-glass-clear: rgba(20, 20, 24, 0.18);
  --k-glass-line: rgba(255, 255, 255, 0.20);
  --k-glass-brightness: 1.35;
  --k-specular:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.28),
    inset 0 -1px 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 0 12px 0 rgba(255, 255, 255, 0.06);

  --k-accent: #0a84ff;
  --k-text: #ffffff;
  --k-text-2: rgba(235, 235, 245, 0.62);
  --k-text-3: rgba(235, 235, 245, 0.34);
  --k-line: rgba(235, 235, 245, 0.16);
  --k-line-strong: rgba(235, 235, 245, 0.3);

  --k-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --k-shadow-2: 0 4px 16px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.3);
  --k-shadow-3: 0 12px 40px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.35);
  --k-shadow-float: 0 8px 32px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.35);
}

/* Accessibility: when the OS asks for less transparency, glass turns solid.
   Chrome/Edge only today (Safari and Firefox don't ship the query yet), so
   it is an enhancement, not the safety net — legibility must hold without it. */
@media (prefers-reduced-transparency: reduce) {
  :root {
    --k-blur: 0px;
    --k-glass: var(--k-surface);
    --k-glass-clear: var(--k-surface);
    --k-specular: none;
  }
}