/* Text colours are chosen for at least 4.5:1 against --paper and --paper-2 (WCAG 2.2 AA, audit
   R21), and the -fill colours for at least 4.5:1 under white text. In dark mode no single blue,
   red or green can do both jobs, hence the separate -fill tokens: anything with `color: #fff` sits
   on a -fill, never on --blue/--bad/--good. test/accessibility-contrast.test.js checks every pair. */
:root {
  /* Both appearances: the browser's own controls (a select's list, the date picker, scroll bars)
     follow the system's dark mode too (HIG). */
  color-scheme: light dark;
  --blue: #0062cc;
  --blue-deep: #004f9e;
  --blue-fill: #0062cc;
  --blue-fill-deep: #004f9e;
  /* The blue panels outside the approved screens (the school picker, the system console's sign-in)
     keep the deeper blue under their white text in both themes. */
  --hero-fill: #0062cc;
  --hero-fill-deep: #004f9e;
  --accent: #ffb100;
  --accent-soft: #fff1cc;
  --gold: #ff9f0a;
  --green: #187630;
  --good: #187630;
  --good-fill: #187630;
  --warn: #9c4f00;
  --red: #c70015;
  --bad: #c70015;
  --bad-fill: #c70015;
  --ink: #1d1d1f;
  --ink-soft: #5e5e63;
  /* The page is iOS's grouped background (#f2f2f7); a Mac's window colours are below. */
  --paper: #f2f2f7;
  --paper-2: #ffffff;
  /* As approved, every hairline is the grouped-list separator (--sep, below). */
  --line: var(--sep);
  --line-strong: #d2d2d7;
  --radius: 18px;
  --radius-sm: 10px;
  --r: 18px;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.05);
  --scroll-shadow: rgba(0, 0, 0, 0.2);
  --shadow-lift: 0 4px 14px rgba(0, 0, 0, 0.06), 0 20px 48px rgba(0, 0, 0, 0.12);
  /* Chrome (spec 01 §H1–H2): the tab bar and the floating buttons are opaque surfaces with a hairline
     and a small lift, never a blur. --side is a sidebar under a mouse, --side-touch one on a touch
     screen (an iPad); --sel marks the selected item of a Mac's sidebar and of the tab bar, --sel-tint
     that of an iPad's sidebar. */
  --bar: #ffffff;
  --bar-line: rgba(0, 0, 0, 0.08);
  --lift: 0 2px 10px rgba(0, 0, 0, 0.08);
  --side: #ebebee;
  --side-touch: #fbfbfd;
  --sel: rgba(0, 0, 0, 0.06);
  --sel-tint: rgba(0, 98, 204, 0.13);
  /* Dialogs (spec 01 §H4): --dim darkens the page behind a dialog (a solid tint, never a blur);
     --fill is iOS's grey fill, behind a dialog's grey button and its grouped rows; --grabber is the
     sheet's drag handle; --sep the hairline between grouped rows. */
  --dim: rgba(0, 0, 0, 0.22);
  --fill: rgba(118, 118, 128, 0.12);
  /* The selected segment of a segmented control. */
  --thumb: #ffffff;
  --grabber: rgba(60, 60, 67, 0.3);
  --sep: rgba(60, 60, 67, 0.2);
  /* iOS's system colours, as the approved images use them (spec 01 §H, owner 2026-10-06: "giống y
     chang ảnh duyệt"): --label-2 and --label-3 are the secondary and tertiary label (grey text, a
     placeholder), --card a grouped list's or a field's surface, --sys-red and --sys-green the
     system red and green. They trade some contrast for the approved look; see the contrast test. */
  --label-2: rgba(60, 60, 67, 0.6);
  --label-3: rgba(60, 60, 67, 0.3);
  --card: #ffffff;
  --field: #ffffff;
  --sys-red: #ff3b30;
  --sys-green: #248a3d;
  /* A destructive answer's fill in a dialog's button row, under white text (approved s46, s50, s62b). */
  --danger-fill: #ff3b30;
  /* A success mark's disc, under a white check (approved s13, s62): the system green, deeper with
     Increase Contrast so the check keeps 4.5:1. */
  --ok-fill: #248a3d;
  --tint: color-mix(in srgb, var(--blue) 13%, transparent);
  /* The account's initials on the blue tint (the sidebar), and a person's initials on iOS's grey
     contact disc (the accounts list on a phone). */
  --ava-tint: rgba(0, 122, 255, 0.12);
  --av-top: #a7acb6;
  --av-bottom: #868b94;
  /* The device's own font (SF on Apple devices, Segoe UI on Windows, Roboto on Android); the app loads none. */
  --font: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --blue: #409cff;
    --blue-deep: #409cff;
    /* The approved buttons are the system blue itself (#409cff); Increase Contrast below takes the
       deeper fill that keeps white text at 4.5:1. */
    --blue-fill: #409cff;
    --blue-fill-deep: #2f86e6;
    --hero-fill: #0064d2;
    --hero-fill-deep: #0055b3;
    --accent: #ffd60a;
    --accent-soft: #3a2f0b;
    --gold: #ffd60a;
    --green: #30d158;
    --good: #30d158;
    --good-fill: #187630;
    --warn: #ff9f0a;
    --red: #ff6961;
    --bad: #ff6961;
    --bad-fill: #c70015;
    --ink: #f5f5f7;
    --ink-soft: #aeaeb2;
    --paper: #000000;
    --paper-2: #1c1c1e;
    --line: var(--sep);
    --line-strong: #48484a;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 4px 16px rgba(0, 0, 0, 0.5);
    --scroll-shadow: rgba(0, 0, 0, 0.7);
    --shadow-lift: 0 4px 14px rgba(0, 0, 0, 0.6), 0 20px 48px rgba(0, 0, 0, 0.7);
    --bar: #1c1c1e;
    --bar-line: rgba(255, 255, 255, 0.1);
    --lift: 0 4px 14px rgba(0, 0, 0, 0.5);
    --side: #29292c;
    --side-touch: #151517;
    --sel: rgba(255, 255, 255, 0.1);
    --sel-tint: rgba(64, 156, 255, 0.24);
    --dim: rgba(0, 0, 0, 0.5);
    --fill: rgba(118, 118, 128, 0.24);
    --thumb: #636366;
    --grabber: rgba(235, 235, 245, 0.3);
    --sep: rgba(84, 84, 88, 0.6);
    --label-2: rgba(235, 235, 245, 0.6);
    --label-3: rgba(235, 235, 245, 0.3);
    --card: #1c1c1e;
    --field: rgba(255, 255, 255, 0.06);
    --sys-red: #ff453a;
    --sys-green: #30d158;
    --danger-fill: #ff453a;
    --ok-fill: #30d158;
    --tint: color-mix(in srgb, var(--blue) 24%, transparent);
  }
}

/* Increase Contrast (HIG: respect the system's accessibility settings): secondary text at 7:1 or
   more, separators and control borders that stand out (borders at least 3:1, WCAG 1.4.11). The dark
   block comes second so it wins in dark mode. */
@media (prefers-contrast: more) {
  :root {
    --ink: #000000;
    --ink-soft: #3a3a3c;
    --line: #aeaeb2;
    --line-strong: #6e6e73;
    --bar-line: var(--line);
    /* The approved iOS colours (above) give way to ones at 4.5:1. */
    --label-2: #3a3a3c;
    --label-3: #6e6e73;
    --sys-red: #c70015;
    --sys-green: #187630;
    --danger-fill: #c70015;
    --ok-fill: #187630;
    --sel-tint: rgba(0, 98, 204, 0.1);
    --ava-tint: rgba(0, 122, 255, 0.1);
    --av-top: #6e6e73;
    --av-bottom: #545458;
  }
}

@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  :root {
    --ink: #ffffff;
    --ink-soft: #d1d1d6;
    --line: #545458; /* also a badge's background: secondary text keeps 4.5:1 on it */
    --line-strong: #8e8e93;
    --bar-line: var(--line);
    --label-2: #d1d1d6;
    --label-3: #98989d;
    --sys-red: #ff6961;
    --sys-green: #30d158;
    --danger-fill: #c70015;
    --ok-fill: #187630;
    --sel: rgba(255, 255, 255, 0.08);
    --sel-tint: rgba(64, 156, 255, 0.18);
    --av-top: #6e6e73;
    --av-bottom: #545458;
    --blue-fill: #0064d2;
    --blue-fill-deep: #0055b3;
  }
}

/* macOS laptop: denser layout, smaller radius (matches prototype) */
@media (min-width: 981px) {
  :root {
    --radius: 12px;
    --radius-sm: 8px;
    --r: 12px;
  }
}

/* A Mac (a mouse and a wide window) takes macOS's window colours (spec 01 §H, approved v7): a lighter
   page in light mode, and in dark mode grey surfaces instead of the phone's black. Touch screens keep
   the iOS colours above. test/accessibility-contrast.test.js measures these too. */
@media (min-width: 981px) and (pointer: fine) {
  :root {
    --paper: #f5f5f7;
  }
}

@media (min-width: 981px) and (pointer: fine) and (prefers-color-scheme: dark) {
  :root {
    --paper: #1e1e20;
    --paper-2: #2b2b2e;
    --bar: #2b2b2e;
    --card: #2b2b2e;
  }
}