/*
 * Breakpoints (in em, so they follow the reader's text size; at normal size 1em = 16px):
 * 37.5em = 600px large phone · 48em = 768px tablet · 64em = 1024px computer · 80em = 1280px wide.
 *
 * School Dashboard design tokens: every colour, size, space, radius, shadow and timing used by the
 * app. Nothing else in the app uses its own values; components refer to these names only.
 *
 * Same family as the original dashboard (navy + royal blue on a cool grey canvas). The few shades
 * that failed WCAG AA were darkened slightly (agreed decision 8); the status wording and hues are
 * unchanged. Text sizes are in rem so the phone's larger-text setting works.
 * A dark version follows the device setting; [data-theme] on <html> can force either.
 */
:root {
  color-scheme: light;

  /* Brand – navy (side menu, toast, app colour) */
  --navy-900: #14223c;
  --navy-800: #203453;
  --navy-700: #263957;
  --navy-line: #34425a;
  --on-navy: #ffffff;
  --on-navy-2: #b8c6df;
  --on-navy-3: #a8b5cf;
  /* A toast's icon: green for done, red for a problem. The toast stays navy in the dark appearance too, so these do not change. */
  --on-navy-ok: #8fe0c0;
  --on-navy-error: #ffaba3;

  /* Brand – blue */
  --blue-600: #3455e7;
  --blue-700: #2c48c9;
  --blue-500: #5571ff;
  --blue-text: #405cd0;
  --blue-100: #edf1ff;
  --blue-150: #dfe6ff;
  --blue-50: #f7f9ff;
  --blue-border: #c3cffa;
  --blue-border-strong: #9dacfa;
  --on-blue: #ffffff;
  --on-blue-2: #dce4ff;

  /* Neutrals */
  --ink: #17233c;
  --ink-2: #526580;
  --muted: #5f6b81;
  --faint: #9aa4b5;
  --canvas: #f4f6fb;
  --surface: #ffffff;
  --surface-2: #f8f9fc;
  --surface-hover: #fafbff;
  --track: #edf0f6;
  --line: #e5eaf2;
  --line-subtle: #eef1f6;
  --border-control: #8792a6;
  --border-soft: #d3dbe8;
  --chip-bg: #eff2f6;

  /* Focus */
  --focus: #3455e7;
  --focus-on-dark: #87a0ff;
  --focus-width: 3px;
  --focus-offset: 2px;

  /* Fee statuses: badge text / badge background / bar fill (wording unchanged) */
  --st-paid-fg: #16725b;   --st-paid-bg: #e9f6ef;   --st-paid-fill: #22866d;
  --st-upto-fg: #405cd0;   --st-upto-bg: #edf1ff;   --st-upto-fill: #506bda;
  --st-late-fg: #b5433c;   --st-late-bg: #fff0ed;   --st-late-fill: #d35b51;
  --st-future-fg: #5b687e; --st-future-bg: #eff2f6; --st-future-fill: #8794a8;
  --st-need-fg: #97620c;   --st-need-bg: #fff5db;   --st-need-fill: #b7791f;
  --st-written-fill: #8a96a3;
  --st-credit-fill: #7354b8;   /* In credit (the badge uses --purple-fg / --purple-bg) */
  --st-nofees-fill: #c9d0d8;   /* No fees set (7 October 2026): a light grey, apart from Written off and Not yet due */
  --st-nofees-ink: #17233c;    /* its count on the bar: dark in both themes, as the grey stays light */

  /* Meaning */
  --success-fg: #16725b; --success-bg: #f3fbf7; --success-border: #bfe3d3;
  --warning-fg: #7a5608; --warning-bg: #fff8e6; --warning-border: #f3dfa8;
  --danger-fg: #b5433c;  --danger-fg-strong: #9b3a33; --danger-bg: #fff0ed; --danger-border: #f5d0c9;
  --danger-solid: #b5433c; --danger-solid-hover: #9b3a33;
  --info-fg: #475b9b;    --info-bg: #edf1ff;    --info-border: #dce4fc;
  --purple-fg: #7354b8;  --purple-bg: #f1edff;

  /* Department palette (fills); text on tints uses the darker --dept-text-* */
  --dept-1: #4263eb; --dept-2: #7048e8; --dept-3: #1098ad; --dept-4: #e8590c;
  --dept-5: #2b8a3e; --dept-6: #c2255c; --dept-7: #5c940d; --dept-8: #0b7285;
  --dept-text-1: #3550b6; --dept-text-2: #553db4; --dept-text-3: #12758b; --dept-text-4: #a9491a;
  --dept-text-5: #256b3d; --dept-text-6: #8f2452; --dept-text-7: #47721b; --dept-text-8: #0f5a6f;

  /* Overlays and shadows (navy-tinted) */
  --backdrop: rgb(16 32 56 / .47);
  --shadow-1: 0 1px 2px rgb(20 34 60 / .06);
  --shadow-2: 0 6px 20px rgb(35 49 94 / .08);
  --shadow-3: 0 12px 36px rgb(20 34 60 / .09);
  --shadow-toast: 0 8px 24px rgb(20 34 60 / .22);
  --shadow-dialog: 0 30px 100px rgb(18 33 60 / .33);
  --shadow-nav: 0 -2px 12px rgb(20 34 60 / .08);
  --shadow-edge: 0 -6px 14px -4px rgb(20 34 60 / .18);   /* "there is more above this" (a sheet's buttons) */
  --skeleton-a: #e9edf5; --skeleton-b: #f4f6fb;

  /* Type (the device's own font: San Francisco, Roboto, Segoe UI) */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --text-2xs: .75rem;     /* 12px – the smallest size used */
  --text-xs: .8125rem;    /* 13px – hints */
  --text-sm: .875rem;     /* 14px – tables, buttons, labels */
  --text-md: 1rem;        /* 16px – body and every input */
  --text-lg: 1.125rem;    /* 18px – card titles */
  --text-xl: 1.375rem;    /* 22px – dialog titles */
  --text-2xl: clamp(1.5rem, 1.2rem + 1.2vw, 1.875rem);   /* page titles, 24→30px */
  --text-stat: clamp(1.5rem, 1.1rem + 1.6vw, 2.125rem);  /* big figures, 24→34px */
  --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700;
  --leading-tight: 1.2; --leading-snug: 1.35; --leading-normal: 1.5; --leading-relaxed: 1.6;
  --tracking-tight: -.02em; --tracking-caps: .1em;

  /* Space (4px steps) */
  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.25rem;
  --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem;

  /* Radii */
  --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 999px;

  /* Sizes */
  --tap: 44px;             /* the smallest a tap target may be; text-based sizes grow with the text */
  --control-h: 44px;
  --icon: 1.25rem;
  --icon-sm: 1rem;
  --icon-xs: .8125rem;     /* the icon inside a status pill (redesign stage 2) */
  --row-late-bg: color-mix(in srgb, var(--danger-bg) 55%, var(--surface));   /* an overdue row, faintly (redesign stage 2) */
  --avatar: 2.25rem;
  --sidebar-w: 15.5rem;
  --rail-w: 5.75rem;
  --topbar-h: 3.5rem;
  --bottom-nav-h: 4.25rem;
  --content-max: 1440px;
  --form-max: 44rem;
  --gutter: 16px;

  /* Redesign (Direction A, 5 October 2026): each part of the app owns a colour, used for its menu tile, the coloured
     band at the top of its pages, its main button and its highlighted figure. From the design's tokens-additions.css. */
  --sec-home: #3455e7;      /* Home, Overview, Departments, My account, Guides */
  --sec-students: #7048e8;  /* Students, families, enrolment */
  --sec-fees: #1f8a5b;      /* Fees, payments, fee tools ("money in") */
  --sec-exp: #e8590c;       /* Expenses, wages, spending ("money out") */
  --sec-staff: #c2255c;     /* Staff, volunteers, hierarchy */
  --sec-reports: #1098ad;   /* Reports, scheduled reports */
  --sec-settings: #5f6b81;  /* Settings hub and its pages, platform pages, messages */
  /* Where white text sits on the colour (a main button, a highlighted figure, a count): Fees, Expenses and Reports are a
     shade darker so the text passes AA (4.5:1); the bright colour stays for icons, bars and menu tiles (3:1). */
  --sec-home-solid: #3455e7; --sec-students-solid: #7048e8; --sec-fees-solid: #1e8457; --sec-exp-solid: #c84d0a;
  --sec-staff-solid: #c2255c; --sec-reports-solid: #0d8091; --sec-settings-solid: #5f6b81;
  /* Icons drawn in the colour on a light background (the same colour; lighter in dark mode, for 3:1). */
  --sec-home-icon: var(--sec-home); --sec-students-icon: var(--sec-students); --sec-fees-icon: var(--sec-fees); --sec-exp-icon: var(--sec-exp);
  --sec-staff-icon: var(--sec-staff); --sec-reports-icon: var(--sec-reports); --sec-settings-icon: var(--sec-settings);
  /* Tint: the band's background, an inactive menu tile, tinted figures */
  --sec-home-tint: color-mix(in oklch, var(--sec-home) 11%, var(--surface));
  --sec-students-tint: color-mix(in oklch, var(--sec-students) 11%, var(--surface));
  --sec-fees-tint: color-mix(in oklch, var(--sec-fees) 11%, var(--surface));
  --sec-exp-tint: color-mix(in oklch, var(--sec-exp) 11%, var(--surface));
  --sec-staff-tint: color-mix(in oklch, var(--sec-staff) 11%, var(--surface));
  --sec-reports-tint: color-mix(in oklch, var(--sec-reports) 11%, var(--surface));
  --sec-settings-tint: color-mix(in oklch, var(--sec-settings) 11%, var(--surface));
  /* Text on the tint: page titles in the band, the active menu label, tinted figures */
  --sec-home-text: color-mix(in oklch, var(--sec-home) 78%, black);
  --sec-students-text: color-mix(in oklch, var(--sec-students) 78%, black);
  --sec-fees-text: color-mix(in oklch, var(--sec-fees) 78%, black);
  --sec-exp-text: color-mix(in oklch, var(--sec-exp) 72%, black);
  --sec-staff-text: color-mix(in oklch, var(--sec-staff) 78%, black);
  --sec-reports-text: color-mix(in oklch, var(--sec-reports) 72%, black);
  --sec-settings-text: color-mix(in oklch, var(--sec-settings) 78%, black);
  /* The band's bottom edge */
  --sec-home-line: color-mix(in oklch, var(--sec-home) 22%, var(--surface));
  --sec-students-line: color-mix(in oklch, var(--sec-students) 22%, var(--surface));
  --sec-fees-line: color-mix(in oklch, var(--sec-fees) 22%, var(--surface));
  --sec-exp-line: color-mix(in oklch, var(--sec-exp) 22%, var(--surface));
  --sec-staff-line: color-mix(in oklch, var(--sec-staff) 22%, var(--surface));
  --sec-reports-line: color-mix(in oklch, var(--sec-reports) 22%, var(--surface));
  --sec-settings-line: color-mix(in oklch, var(--sec-settings) 22%, var(--surface));

  /* Bold status pills: solid fill, white text and an icon. Wording unchanged; the tinted pill keeps --st-*-fg / -bg.
     Fully paid is a shade darker than the mock-up so white text passes AA. In credit: violet (agreed 5 October 2026). */
  --st-paid-solid: #1e8457; --st-upto-solid: #3455e7; --st-late-solid: #d0382b; --st-future-solid: #64728a;
  --st-need-solid: #a0640a; --st-credit-solid: #6741d9;
  --on-solid: #ffffff;

  /* Layers (dialogs use the browser's top layer) */
  --z-sticky: 10; --z-header: 20; --z-nav: 30; --z-toast: 50;

  /* Motion */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --dur-fast: 120ms;
  --dur: 200ms;
}

@media (min-width: 48em) { :root { --gutter: 24px; } }
@media (min-width: 80em) { :root { --gutter: 36px; } }
@media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur: 0ms; } }

/* Dark: the same names with dark values (all checked for AA). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --navy-900: #0b1322; --navy-800: #16223a; --navy-700: #1c2a45; --navy-line: #2a3854;
    --canvas: #0f1726; --surface: #172238; --surface-2: #1d2a44; --surface-hover: #1f2d49;
    --track: #26324a; --line: #2c3a55; --line-subtle: #243150; --border-control: #6f7e9a; --border-soft: #34425a;
    --chip-bg: #243049;
    --ink: #e6ebf3; --ink-2: #c3cddc; --muted: #a3afc2; --faint: #6f7b8f;
    --blue-text: #8ea6ff; --blue-100: #1e2b5c; --blue-150: #26356b; --blue-50: #1a2748;
    --blue-border: #34488f; --blue-border-strong: #5a70c7;
    --focus: #87a0ff;
    --st-paid-fg: #6fd3b0; --st-paid-bg: #123a33;
    --st-upto-fg: #9db0ff; --st-upto-bg: #1e2b5c;
    --st-late-fg: #ff9f95; --st-late-bg: #43201f;
    --st-future-fg: #b3bdcc; --st-future-bg: #263248;
    --st-need-fg: #f2c46b; --st-need-bg: #3d2f12;
    --success-fg: #7fd49c; --success-bg: #123a2a; --success-border: #1f5a41;
    --warning-fg: #f2c46b; --warning-bg: #3a2e12; --warning-border: #5e4a1c;
    --danger-fg: #ff9f95; --danger-fg-strong: #ffb4ab; --danger-bg: #3f1f1d; --danger-border: #6b302b;
    --info-fg: #aebdff; --info-bg: #1e2b5c; --info-border: #34488f;
    --purple-fg: #c4b0ff; --purple-bg: #2e2552;
    --dept-text-1: #9db0ff; --dept-text-2: #c1b0ff; --dept-text-3: #7fd3e2; --dept-text-4: #ffb38a;
    --dept-text-5: #8fd9a3; --dept-text-6: #ff9fc2; --dept-text-7: #b9e08a; --dept-text-8: #7fcbe0;
    --backdrop: rgb(3 8 18 / .66);
    --shadow-1: 0 1px 2px rgb(0 0 0 / .3);
    --shadow-2: 0 6px 20px rgb(0 0 0 / .3);
    --shadow-3: 0 12px 36px rgb(0 0 0 / .35);
    --shadow-nav: 0 -2px 12px rgb(0 0 0 / .35);
    --shadow-edge: 0 -6px 14px -4px rgb(0 0 0 / .6);
    --skeleton-a: #1f2b44; --skeleton-b: #26344f;
    --sec-home-text: color-mix(in oklch, var(--sec-home) 45%, white);
    --sec-students-text: color-mix(in oklch, var(--sec-students) 45%, white);
    --sec-fees-text: color-mix(in oklch, var(--sec-fees) 45%, white);
    --sec-exp-text: color-mix(in oklch, var(--sec-exp) 45%, white);
    --sec-staff-text: color-mix(in oklch, var(--sec-staff) 45%, white);
    --sec-reports-text: color-mix(in oklch, var(--sec-reports) 45%, white);
    --sec-settings-text: color-mix(in oklch, var(--sec-settings) 35%, white);
    --sec-home-icon: var(--sec-home-text); --sec-students-icon: var(--sec-students-text); --sec-fees-icon: var(--sec-fees-text);
    --sec-exp-icon: var(--sec-exp-text); --sec-staff-icon: var(--sec-staff-text); --sec-reports-icon: var(--sec-reports-text);
    --sec-settings-icon: var(--sec-settings-text);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --navy-900: #0b1322; --navy-800: #16223a; --navy-700: #1c2a45; --navy-line: #2a3854;
  --canvas: #0f1726; --surface: #172238; --surface-2: #1d2a44; --surface-hover: #1f2d49;
  --track: #26324a; --line: #2c3a55; --line-subtle: #243150; --border-control: #6f7e9a; --border-soft: #34425a;
  --chip-bg: #243049;
  --ink: #e6ebf3; --ink-2: #c3cddc; --muted: #a3afc2; --faint: #6f7b8f;
  --blue-text: #8ea6ff; --blue-100: #1e2b5c; --blue-150: #26356b; --blue-50: #1a2748;
  --blue-border: #34488f; --blue-border-strong: #5a70c7;
  --focus: #87a0ff;
  --st-paid-fg: #6fd3b0; --st-paid-bg: #123a33;
  --st-upto-fg: #9db0ff; --st-upto-bg: #1e2b5c;
  --st-late-fg: #ff9f95; --st-late-bg: #43201f;
  --st-future-fg: #b3bdcc; --st-future-bg: #263248;
  --st-need-fg: #f2c46b; --st-need-bg: #3d2f12;
  --success-fg: #7fd49c; --success-bg: #123a2a; --success-border: #1f5a41;
  --warning-fg: #f2c46b; --warning-bg: #3a2e12; --warning-border: #5e4a1c;
  --danger-fg: #ff9f95; --danger-fg-strong: #ffb4ab; --danger-bg: #3f1f1d; --danger-border: #6b302b;
  --info-fg: #aebdff; --info-bg: #1e2b5c; --info-border: #34488f;
  --purple-fg: #c4b0ff; --purple-bg: #2e2552;
  --dept-text-1: #9db0ff; --dept-text-2: #c1b0ff; --dept-text-3: #7fd3e2; --dept-text-4: #ffb38a;
  --dept-text-5: #8fd9a3; --dept-text-6: #ff9fc2; --dept-text-7: #b9e08a; --dept-text-8: #7fcbe0;
  --backdrop: rgb(3 8 18 / .66);
  --shadow-1: 0 1px 2px rgb(0 0 0 / .3);
  --shadow-2: 0 6px 20px rgb(0 0 0 / .3);
  --shadow-3: 0 12px 36px rgb(0 0 0 / .35);
  --shadow-nav: 0 -2px 12px rgb(0 0 0 / .35);
  --shadow-edge: 0 -6px 14px -4px rgb(0 0 0 / .6);
  --skeleton-a: #1f2b44; --skeleton-b: #26344f;
  --sec-home-text: color-mix(in oklch, var(--sec-home) 45%, white);
  --sec-students-text: color-mix(in oklch, var(--sec-students) 45%, white);
  --sec-fees-text: color-mix(in oklch, var(--sec-fees) 45%, white);
  --sec-exp-text: color-mix(in oklch, var(--sec-exp) 45%, white);
  --sec-staff-text: color-mix(in oklch, var(--sec-staff) 45%, white);
  --sec-reports-text: color-mix(in oklch, var(--sec-reports) 45%, white);
  --sec-settings-text: color-mix(in oklch, var(--sec-settings) 35%, white);
  --sec-home-icon: var(--sec-home-text); --sec-students-icon: var(--sec-students-text); --sec-fees-icon: var(--sec-fees-text);
  --sec-exp-icon: var(--sec-exp-text); --sec-staff-icon: var(--sec-staff-text); --sec-reports-icon: var(--sec-reports-text);
  --sec-settings-icon: var(--sec-settings-text);
}

/* The colour of the part of the app a page or a menu item belongs to (data-section on <body> for the page; each menu
   item and Settings tile sets its own; Home's colour where nothing says, such as the component gallery). Components use
   only these six names. */
:root, [data-section="home"] { --sec: var(--sec-home); --sec-solid: var(--sec-home-solid); --sec-icon: var(--sec-home-icon); --sec-tint: var(--sec-home-tint); --sec-text: var(--sec-home-text); --sec-line: var(--sec-home-line); }
[data-section="students"] { --sec: var(--sec-students); --sec-solid: var(--sec-students-solid); --sec-icon: var(--sec-students-icon); --sec-tint: var(--sec-students-tint); --sec-text: var(--sec-students-text); --sec-line: var(--sec-students-line); }
[data-section="fees"] { --sec: var(--sec-fees); --sec-solid: var(--sec-fees-solid); --sec-icon: var(--sec-fees-icon); --sec-tint: var(--sec-fees-tint); --sec-text: var(--sec-fees-text); --sec-line: var(--sec-fees-line); }
[data-section="exp"] { --sec: var(--sec-exp); --sec-solid: var(--sec-exp-solid); --sec-icon: var(--sec-exp-icon); --sec-tint: var(--sec-exp-tint); --sec-text: var(--sec-exp-text); --sec-line: var(--sec-exp-line); }
[data-section="staff"] { --sec: var(--sec-staff); --sec-solid: var(--sec-staff-solid); --sec-icon: var(--sec-staff-icon); --sec-tint: var(--sec-staff-tint); --sec-text: var(--sec-staff-text); --sec-line: var(--sec-staff-line); }
[data-section="reports"] { --sec: var(--sec-reports); --sec-solid: var(--sec-reports-solid); --sec-icon: var(--sec-reports-icon); --sec-tint: var(--sec-reports-tint); --sec-text: var(--sec-reports-text); --sec-line: var(--sec-reports-line); }
[data-section="settings"] { --sec: var(--sec-settings); --sec-solid: var(--sec-settings-solid); --sec-icon: var(--sec-settings-icon); --sec-tint: var(--sec-settings-tint); --sec-text: var(--sec-settings-text); --sec-line: var(--sec-settings-line); }
/* The main button's colour (redesign stage 2): the page's colour, except in Settings, where buttons stay Home's blue,
   as drawn (7a People & access). */
:root, [data-section] { --sec-action: var(--sec-solid); --sec-action-tint: var(--sec-tint); }
[data-section="settings"] { --sec-action: var(--sec-home-solid); --sec-action-tint: var(--sec-home-tint); }