/* Apple system colors.

   SOURCE: developer.apple.com/design/human-interface-guidelines/color › Specifications,
   read 2026-09-19 from Apple's own Markdown endpoint. These are the UNIFIED values Apple
   shipped on 2025-06-09 ("Updated system color values"), not the classic pre-2025 set.
   Apple publishes the swatches as images; the RGB triples are carried in each image's
   alt text, which is how they are recoverable at all.

   Apple's own caveat, verbatim in spirit: "Avoid hard-coding system color values in your
   app. Documented color values are for your reference during the app design process. The
   actual color values may fluctuate from release to release." On Apple platforms, call the
   API. These tokens exist because HTML has no API to call.

   Four variants per hue, all Apple's: default light, default dark, and an increased-contrast
   pair. Every increased-contrast variant lands between 4.54:1 and 4.59:1 against white —
   Apple tuned that set to clear the 4.5:1 floor exactly. That is why `--system-*-contrast`
   is exposed at all times, not only inside the media query: it is the token to reach for
   whenever white text has to sit on a colour. See readme.md > Color.
*/

:root {
  /* ---- System palette, default light ---- */
  --system-red: #FF383C;
  --system-orange: #FF8D28;
  --system-yellow: #FFCC00;
  --system-green: #34C759;
  --system-mint: #00C8B3;
  --system-teal: #00C3D0;
  --system-cyan: #00C0E8;
  --system-blue: #0088FF;
  --system-indigo: #6155F5;
  --system-purple: #CB30E0;
  --system-pink: #FF2D55;
  --system-brown: #AC7F5E;

  /* ---- Increased-contrast variants, light. All clear 4.5:1 with white text. ---- */
  --system-red-contrast: #E9152D;
  --system-orange-contrast: #C55300;
  --system-yellow-contrast: #A16A00;
  --system-green-contrast: #008932;
  --system-mint-contrast: #008575;
  --system-teal-contrast: #008198;
  --system-cyan-contrast: #007EAE;
  --system-blue-contrast: #1E6EF4;
  --system-indigo-contrast: #564ADE;
  --system-purple-contrast: #B02FC2;
  --system-pink-contrast: #E7124D;
  --system-brown-contrast: #956D51;

  /* ---- System grays, default light ---- */
  --system-gray: #8E8E93;
  --system-gray-2: #AEAEB2;
  --system-gray-3: #C7C7CC;
  --system-gray-4: #D1D1D6;
  --system-gray-5: #E5E5EA;
  --system-gray-6: #F2F2F7;

  /* ---- Label (content) ---- */
  --label-primary: rgba(0, 0, 0, 1);
  --label-secondary: rgba(60, 60, 67, 0.6);
  /* 5.15:1 on white, 4.82:1 on --bg-secondary. Use wherever the text is essential —
     form labels, help text, values, instructions — because --label-secondary is 3.44:1.
     Ours, not Apple's: Apple defines four label steps and this sits between one and two. */
  --label-secondary-strong: rgba(60, 60, 67, 0.75);
  --label-tertiary: rgba(60, 60, 67, 0.3);
  --label-quaternary: rgba(60, 60, 67, 0.18);
  --label-on-accent: #FFFFFF;

  /* ---- Background ---- */
  --bg-primary: #FFFFFF;
  --bg-secondary: #F2F2F7;
  --bg-tertiary: #FFFFFF;

  /* ---- Grouped background (inset list screens) ---- */
  --bg-grouped-primary: #F2F2F7;
  --bg-grouped-secondary: #FFFFFF;
  --bg-grouped-tertiary: #F2F2F7;

  /* ---- Fill (on top of content, for shapes without a stroke) ---- */
  --fill-primary: 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);

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

  /* ---- Semantic roles ---- */
  --tint: var(--system-blue);
  /* Apple's increased-contrast blue, reused as the pressed state: it is the darker blue
     Apple actually publishes, rather than one we invented. */
  --tint-pressed: var(--system-blue-contrast);
  --text-body: var(--label-primary);
  --text-secondary: var(--label-secondary);
  --text-secondary-strong: var(--label-secondary-strong);
  --text-placeholder: var(--label-tertiary);
  --text-disabled: var(--label-tertiary);
  --text-link: var(--tint);
  --surface-page: var(--bg-primary);
  --surface-card: var(--bg-grouped-secondary);
  --surface-sunken: var(--bg-grouped-primary);
  --surface-control: var(--fill-tertiary);
  --border-hairline: var(--separator);
  --signal-success: var(--system-green);
  --signal-warning: var(--system-orange);
  --signal-error: var(--system-red);
  --signal-info: var(--system-blue);
  --signal-destructive: var(--system-red);
  /* White text on a coloured ground: use these, never the base hue. Only indigo clears
     4.5:1 in the default palette; every -contrast value clears it by construction. */
  --on-accent-safe-success: var(--system-green-contrast);
  --on-accent-safe-warning: var(--system-orange-contrast);
  --on-accent-safe-error: var(--system-red-contrast);
  --on-accent-safe-info: var(--system-blue-contrast);
  /* A FILLED control carries a white label, and white on --tint measures 3.52:1 — a fail at
     label sizes. Filled backgrounds use this darker blue instead: 5.80:1 against white, and
     the same value --glass-tint-color uses for prominent glass. Ours, not Apple's, and it
     holds in both appearances because it is a literal rather than a palette hue. */
  --tint-filled: #0062CC;
  --tint-filled-pressed: #004F9E;
}

/* ---- Dark appearance ---- */
:root.dark {
  --system-red: #FF4245;
  --system-orange: #FF9230;
  --system-yellow: #FFD600;
  --system-green: #30D158;
  --system-mint: #00DAC3;
  --system-teal: #00D2E0;
  --system-cyan: #3CD3FE;
  --system-blue: #0091FF;
  --system-indigo: #6D7CFF;
  --system-purple: #DB34F2;
  --system-pink: #FF375F;
  --system-brown: #B78A66;

  --system-red-contrast: #FF6165;
  --system-orange-contrast: #FFA056;
  --system-yellow-contrast: #FEDF43;
  --system-green-contrast: #4AD968;
  --system-mint-contrast: #54DFCB;
  --system-teal-contrast: #3BDDEC;
  --system-cyan-contrast: #6DD9FF;
  --system-blue-contrast: #5CB8FF;
  --system-indigo-contrast: #A7AAFF;
  --system-purple-contrast: #EA8DFF;
  --system-pink-contrast: #FF8AC4;
  --system-brown-contrast: #DBA679;

  --system-gray: #8E8E93;
  --system-gray-2: #636366;
  --system-gray-3: #48484A;
  --system-gray-4: #3A3A3C;
  --system-gray-5: #2C2C2E;
  --system-gray-6: #1C1C1E;

  --label-primary: rgba(255, 255, 255, 1);
  --label-secondary: rgba(235, 235, 245, 0.6);
  --label-secondary-strong: rgba(235, 235, 245, 0.75); /* 8.54:1 on --bg-grouped-secondary */
  --label-tertiary: rgba(235, 235, 245, 0.3);
  --label-quaternary: rgba(235, 235, 245, 0.16);

  /* ---- BASE background set ----
     dark-mode.md > iOS, iPadOS: dark mode has TWO background sets, base and elevated,
     and this system only carried base. Base is the dimmer pair; a base surface reads as
     receding. It is what a full-screen, backmost view uses. */
  --bg-primary: #000000;
  --bg-secondary: #1C1C1E;
  --bg-tertiary: #2C2C2E;

  --bg-grouped-primary: #000000;
  --bg-grouped-secondary: #1C1C1E;
  --bg-grouped-tertiary: #2C2C2E;

  /* ---- ELEVATED background set ----
     Brighter, so a foreground interface appears to ADVANCE over the one behind it.
     Apple switches to these automatically whenever a dark interface is layered above
     another: popovers, modal sheets, and — outside the app — between apps in
     multitasking and between windows in a multi-window context. It is the whole reason
     depth is legible in dark mode, where a shadow on black does nothing.

     This set is only meaningful in dark mode; light mode has one background set and
     separates layers with shadow instead. Apply by putting `.elevated` on the presented
     container (sheet, popover, secondary window) — never on the backmost view. */
  --bg-elevated-primary: #1C1C1E;
  --bg-elevated-secondary: #2C2C2E;
  --bg-elevated-tertiary: #3A3A3C;
  --bg-elevated-grouped-primary: #000000;
  --bg-elevated-grouped-secondary: #1C1C1E;
  --bg-elevated-grouped-tertiary: #2C2C2E;

  --fill-primary: 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(116, 116, 128, 0.18);

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

  /* In dark, the increased-contrast variants are LIGHTER, so they no longer serve as a
     pressed state. Pressed darkens instead. */
  --tint-pressed: #0072D6;
}

/* ---- Increase Contrast.
   Apple publishes a dedicated increased-contrast value for every hue and gray
   (color.md > Specifications) — these are those values, not an approximation. The label,
   fill and separator steps below are ours: Apple documents that they shift, but not by
   how much. ---- */
@media (prefers-contrast: more) {
  :root {
    --system-red: var(--system-red-contrast);
    --system-orange: var(--system-orange-contrast);
    --system-yellow: var(--system-yellow-contrast);
    --system-green: var(--system-green-contrast);
    --system-mint: var(--system-mint-contrast);
    --system-teal: var(--system-teal-contrast);
    --system-cyan: var(--system-cyan-contrast);
    --system-blue: var(--system-blue-contrast);
    --system-indigo: var(--system-indigo-contrast);
    --system-purple: var(--system-purple-contrast);
    --system-pink: var(--system-pink-contrast);
    --system-brown: var(--system-brown-contrast);

    --system-gray: #6C6C70;
    --system-gray-2: #8E8E93;
    --system-gray-3: #AEAEB2;
    --system-gray-4: #BCBCC0;
    --system-gray-5: #D8D8DC;
    --system-gray-6: #EBEBF0;

    --label-secondary: rgba(60, 60, 67, 0.82);
    --label-secondary-strong: rgba(60, 60, 67, 0.92);
    --label-tertiary: rgba(60, 60, 67, 0.55);
    --label-quaternary: rgba(60, 60, 67, 0.34);
    --separator: rgba(60, 60, 67, 0.55);
    --separator-opaque: #8E8E93;
    --fill-primary: rgba(120, 120, 128, 0.32);
    --fill-secondary: rgba(120, 120, 128, 0.26);
    --fill-tertiary: rgba(118, 118, 128, 0.2);
    --fill-quaternary: rgba(116, 116, 128, 0.14);
  }
  :root.dark {
    --system-gray: #AEAEB2;
    --system-gray-2: #7C7C80;
    --system-gray-3: #545456;
    --system-gray-4: #444446;
    --system-gray-5: #363638;
    --system-gray-6: #242426;

    --label-secondary: rgba(235, 235, 245, 0.82);
    --label-secondary-strong: rgba(235, 235, 245, 0.94);
    --label-tertiary: rgba(235, 235, 245, 0.55);
    --label-quaternary: rgba(235, 235, 245, 0.3);
    --separator: rgba(120, 120, 128, 0.85);
    --separator-opaque: #545458;
  }
}

/* ---- LIQUID GLASS COLOUR (color.md > Liquid Glass color) — VERIFIED Sept 2026 ----
   Glass has NO inherent colour. It takes colour from the content directly behind it.
   Applying colour gives it the appearance of coloured or stained glass.

   How the system behaves, and what to match:
     - SMALL elements (toolbars, tab bars) adapt between a light and dark appearance
       from the underlying content, and their symbols and text default to a
       MONOCHROMATIC scheme — darker over light content, lighter over dark.
     - LARGE elements (sidebars) render MORE OPAQUE, to hold legibility over complex
       backgrounds and carry richer content on the surface.

   Rules, in Apple's own terms:
     - Apply colour SPARINGLY, to the material and to symbols or text on it. Reserve it
       for status indicators and primary actions.
     - To emphasise a primary action, colour the BACKGROUND, not the symbol or text —
       this is what the system does for prominent buttons like Done.
     - "Refrain from adding colour to the background of multiple controls." One per
       view, effectively.
     - Over a colourful or visually rich background, prefer the MONOCHROMATIC
       appearance for toolbars and tab bars, or pick an accent with real separation.
       Brand colour as the app accent works best when content is largely monochrome.
     - Avoid overlap of similar colours between the content layer and the controls —
       and judge it at the RESTING state (top of a scroll), not mid-scroll.

   ⚠️ ALWAYS SUPPLY BOTH LIGHT AND DARK VALUES for a custom colour, even in an app that
   ships in a single appearance mode — Liquid Glass adaptivity needs both. Plus an
   increased-contrast variant per mode with significantly more differentiation.

   visionOS uses the DEFAULT DARK values of the system palette. */

/* ---- Activity ring colours (activity-rings.md) — VERIFIED, September 2026 ----
   Apple publishes these as exact RGB values, and they are fixed: the page forbids
   changing them, applying filters, or altering opacity. Use them ONLY for the labels
   Move / Exercise / Stand and for current-and-goal values tied to a ring — never as
   general accent colours.

   Constraints that come with them: rings always sit on a BLACK background, with the
   black still visible around the outermost ring (add a thin black stroke if needed);
   no gradient, shadow or other effect; enclose by adjusting the container's corner
   radius rather than applying a circular mask; outer margin at least the distance
   between rings. Activity rings may not be used decoratively, in branding, in an app
   icon, or in notifications — and never for any data other than Move, Exercise and
   Stand, for exactly one person. */
:root {
  --activity-ring-move: rgb(250, 17, 79);
  --activity-ring-exercise: rgb(166, 255, 0);
  --activity-ring-stand: rgb(0, 255, 246);
  --activity-ring-background: #000000;
}

/* Put `.elevated` on any dark-mode surface presented ABOVE another — sheets, popovers,
   secondary windows. It swaps the base background set for the elevated one so the
   layering reads. In light mode it is deliberately a no-op: light mode separates layers
   with shadow, and brightening a white sheet would do nothing. */
:root.dark .elevated,
:root.dark.elevated {
  --bg-primary: var(--bg-elevated-primary);
  --bg-secondary: var(--bg-elevated-secondary);
  --bg-tertiary: var(--bg-elevated-tertiary);
  --bg-grouped-primary: var(--bg-elevated-grouped-primary);
  --bg-grouped-secondary: var(--bg-elevated-grouped-secondary);
  --bg-grouped-tertiary: var(--bg-elevated-grouped-tertiary);
}