/* Apple iOS system design tokens for the web. See CLAUDE.md.

   Labels and fills are translucent, as Apple ships them, so they composite correctly
   over whatever sits behind them. Backgrounds come in a plain set and a *grouped* set;
   grouped is for settings-style screens (grey page, white cards).

   Defaults use Apple's ACCESSIBLE (Increased Contrast) values, because the standard
   light-mode palette fails WCAG AA. The vivid standard values are kept as --*-vivid
   for fills, large text, and decoration. Ratios in comments are measured, composited. */

:root {
  color-scheme: light dark;

  /* Tint — accessible by default -------------------------------------- */
  --tint: #0040dd;              /* 7.56:1 on white, and white-on-tint 7.56:1 */
  --tint-vivid: #007aff;        /* systemBlue — 4.02:1, large text / fills only */
  --on-tint: #ffffff;
  /* Yellow is light in both appearances, so what sits on it is black in both —
     white on systemYellow is about 1.4:1 and unusable. Declared once here
     rather than being overridden per appearance. */
  --on-yellow: #000000;
  /* Red does flip. Light red is dark enough to carry white (5.38:1); dark
     red is a bright coral, where white is 3.41:1 and black is 6.16:1. */
  --on-red: #ffffff;

  /* Semantic colours — accessible tier */
  --red: #d70015;               /* 5.38:1 */

  /* A colour used as a label on a wash of ITSELF is a third case, alongside the
     accessible and vivid tiers. The wash lifts the surface toward the label, so
     the pair is always tighter than the same colour on a plain background.

     Tint survives it (5.27:1 light, 5.10:1 dark). Red doesn't: light red starts
     at 5.38:1 on white and a 15% red wash takes it to 3.70:1, and no wash
     strength recovers it — even 5% only reaches 4.47:1. So the label darkens
     instead. Derived from --red rather than being a second red to keep in step
     with it. Dark red needs none of this; it's a bright coral on near-black. */
  --red-on-wash: color-mix(in srgb, var(--red) 78%, #000);
  --orange: #c93400;            /* 5.28:1 */
  --green: #248a3d;             /* 4.40:1 — large text (24px+) or non-text only */
  --teal: #0071a4;              /* 5.39:1 */
  --indigo: #3634a3;            /* 9.65:1 */
  --purple: #8944ab;            /* 6.04:1 */
  --pink: #d30f45;              /* 5.35:1 */

  /* Vivid tier — fills, large text, decoration */
  --red-vivid: #ff3b30;
  --orange-vivid: #ff9500;
  --green-vivid: #34c759;
  --teal-vivid: #30b0c7;
  --indigo-vivid: #5856d6;
  --purple-vivid: #af52de;
  --pink-vivid: #ff2d55;
  --yellow-vivid: #ffcc00;

  /* Greys */
  --gray: #8e8e93;
  --gray2: #aeaeb2;
  --gray3: #c7c7cc;
  --gray4: #d1d1d6;
  --gray5: #e5e5ea;
  --gray6: #f2f2f7;

  /* Labels — alpha raised to 0.75 for secondary to clear AA (Apple ships 0.60) */
  --label: rgba(0, 0, 0, 1);
  --label-secondary: rgba(60, 60, 67, 0.75); /* 5.16:1 white, 4.85:1 grouped */
  --label-tertiary: rgba(60, 60, 67, 0.3); /* decorative only — 1.73:1 */
  --label-quaternary: rgba(60, 60, 67, 0.18);

  /* Backgrounds */
  --bg: #ffffff;
  --bg-secondary: #f2f2f7;
  --bg-tertiary: #ffffff;

  --bg-grouped: #f2f2f7;
  --bg-grouped-secondary: #ffffff;
  --bg-grouped-tertiary: #f2f2f7;

  /* Fills — control backgrounds */
  --fill: rgba(120, 120, 128, 0.2);
  --fill-secondary: rgba(120, 120, 128, 0.16);
  --fill-tertiary: rgba(118, 118, 128, 0.12);
  --fill-quaternary: rgba(116, 116, 128, 0.08);

  /* Separators */
  --separator: rgba(60, 60, 67, 0.29);
  --separator-opaque: #c6c6c8;

  /* Selected segment in a segmented control. Needs its own token because it must sit
     LIGHTER than the track in both appearances — the grouped backgrounds invert. */
  --segment-selected: #ffffff;

  /* The switch knob is white in both appearances — one of the few Apple controls
     that does not invert. Tokenised so nothing downstream hardcodes a hex. */
  --switch-knob: #ffffff;

  /* Type — iOS text styles at the default Large Dynamic Type setting */
  --font:
    -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue",
    Helvetica, Arial, sans-serif;

  --text-large-title: 2.125rem; /* 34 / 41 */
  --text-title1: 1.75rem; /* 28 / 34 */
  --text-title2: 1.375rem; /* 22 / 28 */
  --text-title3: 1.25rem; /* 20 / 25 */
  --text-headline: 1.0625rem; /* 17 / 22 semibold */
  --text-body: 1.0625rem; /* 17 / 22 */
  --text-callout: 1rem; /* 16 / 21 */
  --text-subhead: 0.9375rem; /* 15 / 20 */
  --text-footnote: 0.8125rem; /* 13 / 18 */
  --text-caption1: 0.75rem; /* 12 / 16 */
  --text-caption2: 0.6875rem; /* 11 / 13 */

  /* Metrics */
  --margin: 1rem; /* 16pt screen margin */
  --tap: 2.75rem; /* 44pt minimum target */
  --row: 2.75rem; /* 44pt list row */

  --radius-control: 0.625rem; /* 10 */
  --radius-card: 0.625rem; /* 10 */
  --radius-alert: 0.875rem; /* 14 */
  --radius-capsule: 999px;

  --ease-out: cubic-bezier(0.32, 0.72, 0, 1);
  --duration: 0.3s;
}

/* Dark ---------------------------------------------------------------------
   Two selectors carry the same palette: an explicit `data-theme="dark"` on the
   root, and the system preference where nothing has overridden it. CSS can't
   share one declaration block across a media query and a plain selector, so
   these two blocks are duplicates and MUST be kept in sync.

   The app itself sets data-theme="dark" — it's a dark product. The media query
   is what keeps ui.html and the design sheet honest in both appearances. */

:root[data-theme="dark"] {
  /* Narrowed from "light dark" so form controls the browser paints itself —
     the date pickers on the leave sheet especially — come out dark too. */
  color-scheme: dark;

  --tint: #0a84ff; /* 5.76:1 on black */
  --tint-vivid: #0a84ff;
  /* Tint flips the same way red does. The dark tint is a bright blue: white on
     it is only 3.65:1, black is 5.76:1. The light palette can carry white
     because its tint is much darker (#0040dd, 7.56:1) — dark cannot. */
  --on-tint: #000000;

  --red: #ff453a; /* 6.16:1 */
  --on-red: #000000; /* white on this red is 3.41:1 */
  /* On a near-black page the red wash stays dark, so red carries itself:
     5.46:1 at rest, 4.96:1 on hover. No darkening needed. */
  --red-on-wash: var(--red);
  --orange: #ff9f0a;
  --green: #30d158; /* 10.39:1 */
  --teal: #40c8e0;
  --indigo: #5e5ce6;
  --purple: #bf5af2;
  --pink: #ff375f;

  --red-vivid: #ff453a;
  --orange-vivid: #ff9f0a;
  --green-vivid: #30d158;
  --teal-vivid: #40c8e0;
  --indigo-vivid: #5e5ce6;
  --purple-vivid: #bf5af2;
  --pink-vivid: #ff375f;
  --yellow-vivid: #ffd60a;

  --gray2: #636366;
  --gray3: #48484a;
  --gray4: #3a3a3c;
  --gray5: #2c2c2e;
  --gray6: #1c1c1e;

  --label: rgba(255, 255, 255, 1);
  --label-secondary: rgba(235, 235, 245, 0.6); /* 6.36:1 — Apple's own alpha is fine here */
  --label-tertiary: rgba(235, 235, 245, 0.3);
  --label-quaternary: rgba(235, 235, 245, 0.16);

  --bg: #000000;
  --bg-secondary: #1c1c1e;
  --bg-tertiary: #2c2c2e;

  --bg-grouped: #000000;
  --bg-grouped-secondary: #1c1c1e;
  --bg-grouped-tertiary: #2c2c2e;

  --fill: rgba(120, 120, 128, 0.36);
  --fill-secondary: rgba(120, 120, 128, 0.32);
  --fill-tertiary: rgba(118, 118, 128, 0.24);
  --fill-quaternary: rgba(118, 118, 128, 0.18);

  --separator: rgba(84, 84, 88, 0.65);
  --separator-opaque: #38383a;

  --segment-selected: #636366;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* Dark mode meets AA with Apple's standard values — no accessible swap needed */
    --tint: #0a84ff; /* 5.76:1 on black */
    --tint-vivid: #0a84ff;
    /* See the note in the data-theme="dark" block above — white on this tint
       is 3.65:1, black is 5.76:1. Keep these two blocks in sync. */
    --on-tint: #000000;

    --red: #ff453a; /* 6.16:1 */
    --on-red: #000000; /* white on this red is 3.41:1 */
    --red-on-wash: var(--red); /* see the data-theme="dark" block above */
    --orange: #ff9f0a;
    --green: #30d158; /* 10.39:1 */
    --teal: #40c8e0;
    --indigo: #5e5ce6;
    --purple: #bf5af2;
    --pink: #ff375f;

    --red-vivid: #ff453a;
    --orange-vivid: #ff9f0a;
    --green-vivid: #30d158;
    --teal-vivid: #40c8e0;
    --indigo-vivid: #5e5ce6;
    --purple-vivid: #bf5af2;
    --pink-vivid: #ff375f;
    --yellow-vivid: #ffd60a;

    --gray2: #636366;
    --gray3: #48484a;
    --gray4: #3a3a3c;
    --gray5: #2c2c2e;
    --gray6: #1c1c1e;

    --label: rgba(255, 255, 255, 1);
    --label-secondary: rgba(235, 235, 245, 0.6); /* 6.36:1 — Apple's own alpha is fine here */
    --label-tertiary: rgba(235, 235, 245, 0.3);
    --label-quaternary: rgba(235, 235, 245, 0.16);

    --bg: #000000;
    --bg-secondary: #1c1c1e;
    --bg-tertiary: #2c2c2e;

    --bg-grouped: #000000;
    --bg-grouped-secondary: #1c1c1e;
    --bg-grouped-tertiary: #2c2c2e;

    --fill: rgba(120, 120, 128, 0.36);
    --fill-secondary: rgba(120, 120, 128, 0.32);
    --fill-tertiary: rgba(118, 118, 128, 0.24);
    --fill-quaternary: rgba(118, 118, 128, 0.18);

    --separator: rgba(84, 84, 88, 0.65);
    --separator-opaque: #38383a;

    --segment-selected: #636366;
  }
}