/* ==========================================================================
   Apple-native design tokens
   --------------------------------------------------------------------------
   Defined from Apple's Human Interface Guidelines system values (iOS /
   macOS), not extracted from a competitor's site. Semantic names throughout —
   `--label-secondary`, not `--grey-2`.

   Font: no webfont. `-apple-system` resolves to SF Pro on Apple devices, which
   is the point: on iPhone and Mac this renders in the real system typeface. The
   fallbacks cover other platforms with the nearest available grotesque.
   ========================================================================== */

:root {
  /* ---------- type ---------------------------------------------------- */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue",
          Inter, system-ui, sans-serif;

  /* Apple's ladder is not a fixed ratio — it is hand-tuned per role, and the
     tracking flips sign across it: negative on display sizes, positive on
     captions. That sign flip is the part most imitations miss. */
  --t-large-title: 34px;  --tr-large-title: -0.4px;  --lh-large-title: 41px;
  --t-title1:      28px;  --tr-title1:      -0.3px;  --lh-title1:      34px;
  --t-title2:      22px;  --tr-title2:      -0.2px;  --lh-title2:      28px;
  --t-headline:    17px;  --tr-headline:    -0.1px;  --lh-headline:    22px;
  --t-body:        17px;  --tr-body:         0px;    --lh-body:        22px;
  --t-subhead:     15px;  --tr-subhead:      0px;    --lh-subhead:     20px;
  --t-footnote:    13px;  --tr-footnote:     0.1px;  --lh-footnote:    18px;
  --t-caption:     12px;  --tr-caption:      0.2px;  --lh-caption:     16px;

  --w-regular: 400;
  --w-medium:  500;
  --w-semibold: 600;
  --w-bold:    700;

  /* ---------- surfaces ------------------------------------------------ */
  --bg-grouped:        #F2F2F7;  /* systemGroupedBackground */
  --bg-elevated:       #FFFFFF;  /* card / row fill */
  --bg-secondary:      #F9F9FB;
  --fill-quaternary:   rgba(116,116,128,0.08);
  --fill-tertiary:     rgba(118,118,128,0.12);

  /* ---------- labels -------------------------------------------------- */
  /* Apple layers label greys as one hue at descending opacity, which keeps
     them coherent over any background instead of drifting in tint. */
  --label:             #000000;
  --label-secondary:   rgba(60,60,67,0.60);
  --label-tertiary:    rgba(60,60,67,0.30);
  --label-quaternary:  rgba(60,60,67,0.18);

  /* ---------- separators ---------------------------------------------- */
  --separator:         rgba(60,60,67,0.29);
  --separator-opaque:  #C6C6C8;

  /* ---------- accents ------------------------------------------------- */
  --blue:   #007AFF;
  --indigo: #5856D6;
  --green:  #34C759;
  --orange: #FF9500;
  --red:    #FF3B30;
  --teal:   #30B0C7;

  /* Tinted button fills: the accent at low alpha, as iOS uses for
     non-destructive secondary actions. */
  --green-tint:  rgba(52,199,89,0.14);
  --orange-tint: rgba(255,149,0,0.16);
  --red-tint:    rgba(255,59,48,0.13);

  /* ---------- shape --------------------------------------------------- */
  /* Apple uses continuous ("squircle") curvature, not a circular arc. CSS has
     no portable equivalent yet (`corner-shape: superellipse` is too new to
     rely on), so these approximate it — slightly larger than the true value,
     which reads closer to the real thing at these sizes. */
  --r-row:     10px;
  --r-card:    12px;
  --r-panel:   18px;
  --r-glass:   26px;
  --r-capsule: 999px;

  /* ---------- spacing ------------------------------------------------- */
  /* Gutter is 16px — the iOS content inset. Everything is a multiple of it. */
  --gutter: 16px;
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-6: 24px;
  --s-8: 32px;
  --s-12: 48px;

  --tap: 44px;   /* HIG minimum touch target */

  /* ---------- materials ----------------------------------------------- */
  /* Vibrancy needs saturate() alongside blur — blur alone renders as flat
     grey fog rather than glass, because it loses the colour beneath. */
  --glass-fill:      rgba(255,255,255,0.62);
  --glass-blur:      saturate(180%) blur(30px);
  --glass-edge:      rgba(255,255,255,0.65);
  --glass-shadow:    0 1px 1px rgba(0,0,0,0.04), 0 8px 28px rgba(0,0,0,0.10);
  --bar-fill:        rgba(249,249,251,0.80);
  --bar-blur:        saturate(180%) blur(20px);

  /* ---------- elevation ----------------------------------------------- */
  --shadow-card:  0 1px 2px rgba(0,0,0,0.04);
  --shadow-float: 0 4px 16px rgba(0,0,0,0.10), 0 1px 2px rgba(0,0,0,0.05);

  /* ---------- motion -------------------------------------------------- */
  /* Budget: 200–400ms, and Apple's spring feel comes from an overshooting
     cubic-bezier rather than a linear ease. Transform and opacity only —
     animating layout properties is what makes an imitation feel cheap. */
  --dur-fast: 0.18s;
  --dur-base: 0.28s;
  --dur-slow: 0.40s;
  --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-spring:   cubic-bezier(0.34, 1.4, 0.64, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-grouped:       #000000;
    --bg-elevated:      #1C1C1E;
    --bg-secondary:     #2C2C2E;
    --label:            #FFFFFF;
    --label-secondary:  rgba(235,235,245,0.60);
    --label-tertiary:   rgba(235,235,245,0.30);
    --label-quaternary: rgba(235,235,245,0.18);
    --separator:        rgba(84,84,88,0.65);
    --separator-opaque: #38383A;
    --blue:             #0A84FF;
    --indigo:           #5E5CE6;
    --green:            #30D158;
    --orange:           #FF9F0A;
    --red:              #FF453A;
    --glass-fill:       rgba(30,30,32,0.62);
    --glass-edge:       rgba(255,255,255,0.14);
    --bar-fill:         rgba(28,28,30,0.80);
  }
}

/* Zero every motion token in one place. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0s;
    --dur-base: 0s;
    --dur-slow: 0s;
  }
}