/* ============================================================================
   AttendTrack — design tokens
   ============================================================================
   ONE place for colour, type and shape. Every page links this before its own
   <style>, and styles itself only through these variables.

   It used to be nine copies of the same :root block, one per page, which meant
   a palette change was nine edits and a signup screen that quietly kept the old
   one. If you are changing how the app looks, this is the file.

   THE PALETTE
   Purple is the brand and nothing else uses it. That constraint is the reason
   `--leave-*` is blue here and was violet before: with a purple product, a
   violet status pill reads as "selected" or "a button", not as "on leave".

   CONTRAST
   Text on purple is white — `--on-brand`. The previous brand was amber, where
   the readable choice was near-black, so anything that hardcodes a dark colour
   on a brand background is now a bug rather than a preference.
   ============================================================================ */

:root {
  /* ── Brand ──────────────────────────────────────────────────────────────
     600 is for hover, focus rings and anything that must hold its own against
     500. 200 is the secondary button — the "Skip" next to a "Continue". */
  --brand-700:#46318C;
  --brand-600:#573FA3;
  --brand-500:#694FBE;
  --brand-400:#8B6FD4;
  --brand-200:#C9B8EC;
  --brand-100:#E9E2F8;
  --brand-50:#F4F0FC;
  --on-brand:#FFFFFF;

  /* ── Surfaces ───────────────────────────────────────────────────────────
     The page ground is faintly lilac rather than neutral grey. Against a pure
     white card it reads as deliberate; against pure white it reads as nothing
     at all, which is how cards stop looking like cards. */
  --bg:#F6F5FA;
  --surface:#FFFFFF;
  --surface-alt:#FAF9FD;
  /* A deliberately darker ground, for the phone frames in the design mockup. */
  --surface-ink:#2A2140;
  --border:#E6E8EE;
  --border-strong:#D6D3E3;

  --text:#2C3333;
  --text-muted:#6B6A78;
  --text-faint:#939185;

  /* ── Attendance status ──────────────────────────────────────────────────
     These are read at a glance down a column, so they must stay separable
     from each other AND from the brand. Never spend one on decoration. */
  --present-fg:#0C7A51; --present-bg:#D9F5E9;
  --leave-fg:#266CB5;   --leave-bg:#E1EFFD;
  --late-fg:#966200;    --late-bg:#FFF1DA;
  --pending-fg:#6B6A78; --pending-bg:#EFEEF4;
  --absent-fg:#A91D3A;  --absent-bg:#FBE3E8;

  /* Small-page aliases. The sign-in screens speak in ok/err/warn rather than
     attendance words; same colours, so the two vocabularies cannot drift. */
  --ok-fg:var(--present-fg);   --ok-bg:var(--present-bg);
  --err-fg:var(--absent-fg);   --err-bg:var(--absent-bg);
  --warn-fg:var(--late-fg);    --warn-bg:var(--late-bg);

  /* A disabled primary is GREY, not faded purple. Lowering the opacity of a
     coloured button makes it look like a colour choice, and the reader has to
     work out that it is off. Draining the colour says it outright. */
  --disabled-bg:#C9C7D2;
  --disabled-fg:#FFFFFF;

  --r-sm:8px; --r-md:12px; --r-lg:18px; --r-xl:24px; --r-pill:999px;

  --shadow-sm:0 1px 2px rgba(44,51,51,.05);
  --shadow:0 4px 16px rgba(44,51,51,.07);
  --shadow-md:0 4px 16px rgba(44,51,51,.09);
  --shadow-lg:0 12px 32px rgba(44,51,51,.13);
  --shadow-brand:0 10px 24px rgba(105,79,190,.28);

  --font:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;

  color-scheme:light;
}

/* ── Dark ────────────────────────────────────────────────────────────────────
   Not an inversion. The purple is lifted because #694FBE on a dark ground is a
   smudge, and the neutrals carry a violet cast so the dark app is recognisably
   the same product rather than a generic slate one.

   THREE STATES, NOT TWO
   A viewer who has chosen nothing carries no attribute, and only the media
   query separates them — so the tokens are declared three times on purpose:

     :root                                 the complete light palette
     @media dark + :not([data-theme=light]) the OS preference, which an explicit
                                            light choice must still beat
     :root[data-theme="dark"]              an explicit dark choice, which must
                                            beat a light OS

   Only the design mockup sets the attribute today. The app pages follow the OS,
   and cost nothing for the rule being here.
   ------------------------------------------------------------------------- */
@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) {
    color-scheme:dark;

    --brand-700:#C9B8EC;
    --brand-600:#AE93EC;
    --brand-500:#9B7FE8;
    --brand-400:#8B6FD4;
    --brand-200:#4B3A7A;
    --brand-100:#2E2450;
    --brand-50:#231C3E;
    --on-brand:#1B1233;

    --bg:#131022;
    --surface:#1D1833;
    --surface-alt:#241E3D;
    --surface-ink:#0C0918;
    --border:#2E2748;
    --border-strong:#3F3661;

    --text:#EDEAF7;
    --text-muted:#A49FB8;
    --text-faint:#7B7590;

    --disabled-bg:#332C4E;
    --disabled-fg:#6F6889;

    --present-fg:#34D399; --present-bg:#0B2E22;
    --leave-fg:#60A5FA;   --leave-bg:#0C2545;
    --late-fg:#FFB225;    --late-bg:#3A2606;
    --pending-fg:#8E89A2; --pending-bg:#262138;
    --absent-fg:#F87171;  --absent-bg:#3D0F1A;

    --shadow-sm:0 1px 2px rgba(0,0,0,.35);
    --shadow:0 4px 16px rgba(0,0,0,.4);
    --shadow-md:0 4px 16px rgba(0,0,0,.42);
    --shadow-lg:0 12px 32px rgba(0,0,0,.5);
    --shadow-brand:0 10px 24px rgba(0,0,0,.45);
  }
}

:root[data-theme="dark"] {
  color-scheme:dark;

  --brand-700:#C9B8EC;
  --brand-600:#AE93EC;
  --brand-500:#9B7FE8;
  --brand-400:#8B6FD4;
  --brand-200:#4B3A7A;
  --brand-100:#2E2450;
  --brand-50:#231C3E;
  --on-brand:#1B1233;

  --bg:#131022;
  --surface:#1D1833;
  --surface-alt:#241E3D;
  --surface-ink:#0C0918;
  --border:#2E2748;
  --border-strong:#3F3661;

  --text:#EDEAF7;
  --text-muted:#A49FB8;
  --text-faint:#7B7590;

  --disabled-bg:#332C4E;
  --disabled-fg:#6F6889;

  --present-fg:#34D399; --present-bg:#0B2E22;
  --leave-fg:#60A5FA;   --leave-bg:#0C2545;
  --late-fg:#FFB225;    --late-bg:#3A2606;
  --pending-fg:#8E89A2; --pending-bg:#262138;
  --absent-fg:#F87171;  --absent-bg:#3D0F1A;

  --shadow-sm:0 1px 2px rgba(0,0,0,.35);
  --shadow:0 4px 16px rgba(0,0,0,.4);
  --shadow-md:0 4px 16px rgba(0,0,0,.42);
  --shadow-lg:0 12px 32px rgba(0,0,0,.5);
  --shadow-brand:0 10px 24px rgba(0,0,0,.45);
}

/* ── Native controls ─────────────────────────────────────────────────────────
   Checkboxes, radios and range sliders are drawn by the browser, and left
   alone they keep the platform's blue — which is the one colour on the page
   that belongs to nobody. Two properties adopt them into the palette without
   rebuilding them as divs, which is where accessible keyboard behaviour goes
   to die.

   Deliberately no `.btn` or `.card` here. Every page sizes those differently,
   and a global rule would fight nine local ones over specificity. This file
   supplies the vocabulary; the pages still write the sentences. */
input[type="checkbox"],
input[type="radio"],
input[type="range"],
progress {
  accent-color: var(--brand-500);
}

::selection {
  background: var(--brand-200);
  color: var(--text);
}