/* KSRTC Training System — theme tokens.
 *
 * UX_SPEC.md §0.2 (theme segregation): EVERY design decision in the web face
 * lives between the two delimiters below and nowhere else. Files in web/css/
 * and web/theme/base.css use var(--token) only — a grep for a hex colour or a
 * px literal outside this file must return nothing. (px inside an @media
 * condition is unavoidable: a media query cannot read a custom property.)
 *
 * Swapping the block below reskins the entire application.
 *
 * COLOUR IS NOT EDITED HERE. Every colour in this file sits between a pair of
 * BEGIN/END GENERATED COLOURS markers and is generated from design/palette.json
 * by `go run ./tools/palettegen`, which also emits the Android palette. That is
 * the only way "KSRTC crimson" can mean one thing in a depot browser and the
 * same thing on a depot phone; when the two were maintained separately they
 * shared 16 named colour roles and agreed on none of them. To change a colour,
 * or to add one, edit design/palette.json and re-run the generator.
 *
 * Everything OUTSIDE those markers — the type scale, the space scale, radii,
 * border weights, layout widths, elevation, motion — is hand-written and is
 * deliberately NOT shared with the phone. Dense ledger tables at 1920px and
 * 48dp touch targets at 390px need two scales. They need one red.
 *
 * Direction: "Institutional Ledger" (design/DESIGN_DECISION.md §1). Warm laid
 * paper, serif display voice, KSRTC crimson accent, hairline rules, dense
 * tables with a mono folio column.
 */

/* ===== THEME TOKENS — swap this block to reskin ===== */
:root{
  /* — Typographic voices. System stacks only: no webfont, no network. ——— */
  --font-display:"Iowan Old Style","Charter","Palatino Linotype",Palatino,"Book Antiqua","URW Palladio L",Georgia,serif;
  --font-ui:Candara,Optima,"Segoe UI","Gill Sans MT","Gill Sans","Trebuchet MS","DejaVu Sans",system-ui,sans-serif;
  --font-num:"Iowan Old Style","Charter","Palatino Linotype",Palatino,Georgia,serif;
  --font-mono:ui-monospace,Menlo,Consolas,"DejaVu Sans Mono","Liberation Mono",monospace;

  /* — Type scale ——————————————————————————————————— */
  --fs-00:10px; --fs-0:11px; --fs-1:12px; --fs-2:13.5px; --fs-3:15px;
  --fs-4:17px;  --fs-5:20px; --fs-6:24px; --fs-7:29px;   --fs-8:37px; --fs-9:50px;
  --lh-tight:1.14; --lh-snug:1.32; --lh-body:1.55; --lh-flat:1;
  --track-caps:.13em; --track-wide:.055em; --track-tight:-.012em; --track-flat:0;
  --track-star:.06em;
  --fw-reg:400; --fw-med:600; --fw-bold:700;

  /* >>> BEGIN GENERATED COLOURS (light) — from design/palette.json via `go run ./tools/palettegen`. DO NOT EDIT below this line. */

  /* Paper & ink — The ledger ground and the marks on it. Warm laid paper, never a cold grey. */
  --paper:#f4efe4;               /* Paper */
  --paper-2:#fdfaf3;             /* Paper raised */
  --paper-3:#eee7d8;             /* Paper sunken */
  --paper-hi:#f7f1e2;            /* Paper hover */
  --paper-inset:#e9e1cf;         /* Paper inset */
  --ink:#1c1913;                 /* Ink */
  --ink-2:#4b4437;               /* Ink secondary */
  --ink-3:#877d69;               /* Ink muted */
  --ink-invert:#fdfaf3;          /* Ink inverted */

  /* Rules — The ledger's skeleton. Hairlines do the work borders would do elsewhere. */
  --rule:#ddd4c0;                /* Rule */
  --rule-strong:#c0b399;         /* Rule strong */
  --rule-ink:#1c1913;            /* Rule ink */

  /* Brand — KSRTC crimson and Kerala livery gold. The corporation's identity: not a taste. */
  --accent:#8c1c2b;              /* KSRTC crimson */
  --accent-hi:#a52736;           /* KSRTC crimson hover */
  --accent-ink:#ffffff;          /* On crimson */
  --accent-tint:#f6e7e5;         /* Crimson tint */
  --accent-rule:#d9b7b4;         /* Crimson rule */
  --gold:#b8860b;                /* Kerala livery gold */

  /* Semantic — Meaning, not decoration. Each of these says something; none is available as an accent. */
  --color-star:#a9760c;          /* Star */
  --color-star-empty:#d6cbb4;    /* Star empty */
  --color-info:#1e5670;          /* Info */
  --color-info-tint:#e6eff3;     /* Info tint */
  --color-info-rule:#a9c6d3;     /* Info rule */
  --color-admin:#a8630a;         /* Admin reveal amber */
  --color-admin-ink:#5f3703;     /* On admin reveal */
  --color-admin-tint:#fbeeda;    /* Admin reveal tint */
  --color-admin-rule:#dda94e;    /* Admin reveal rule */
  --color-danger:#9d2019;        /* Danger */
  --color-danger-tint:#f8e6e3;   /* Danger tint */
  --color-ok:#2c6340;            /* OK */
  --color-ok-tint:#e5efe6;       /* OK tint */
  --color-private:#3f4d7a;       /* Private */
  --color-private-tint:#eaecf5;  /* Private tint */

  /* Status chips — The four training lifecycle states (UX_SPEC.md §7 #12). Each is a bg/ink/rule triple. */
  --chip-sched-bg:#e9eef2;       /* Chip scheduled — ground */
  --chip-sched-ink:#28495d;      /* Chip scheduled — text */
  --chip-sched-rule:#b6c9d4;     /* Chip scheduled — rule */
  --chip-ongo-bg:#f7ecd6;        /* Chip ongoing — ground */
  --chip-ongo-ink:#7a4d05;       /* Chip ongoing — text */
  --chip-ongo-rule:#dfbc79;      /* Chip ongoing — rule */
  --chip-done-bg:#e6efe7;        /* Chip completed — ground */
  --chip-done-ink:#265238;       /* Chip completed — text */
  --chip-done-rule:#aecab7;      /* Chip completed — rule */
  --chip-off-bg:#ece7dc;         /* Chip inactive — ground */
  --chip-off-ink:#7a715f;        /* Chip inactive — text */
  --chip-off-rule:#cfc5ae;       /* Chip inactive — rule */

  /* Role badges — The four account roles (UX_SPEC.md §7 #10). Each is an ink/background pair. */
  --role-admin:#8c1c2b;          /* Role — admin */
  --role-admin-bg:#f6e7e5;       /* Role — admin ground */
  --role-inst:#1e5670;           /* Role — institution */
  --role-inst-bg:#e6eff3;        /* Role — institution ground */
  --role-instr:#5a4a12;          /* Role — instructor */
  --role-instr-bg:#f5eed7;       /* Role — instructor ground */
  --role-trainee:#3f4d7a;        /* Role — trainee */
  --role-trainee-bg:#eaecf5;     /* Role — trainee ground */

  /* Focus — The keyboard focus ring. Separate because it must stay legible against every surface. */
  --focus:#8c1c2b;               /* Focus ring */
  /* <<< END GENERATED COLOURS (light) */

  /* — Space scale ——————————————————————————————————— */
  --sp-0:0; --sp-1:2px; --sp-2:4px; --sp-3:8px; --sp-4:12px; --sp-5:16px;
  --sp-6:24px; --sp-7:32px; --sp-8:48px; --sp-9:72px;

  /* — Radius (near-square: this is stationery, not a bubble) — */
  --r-0:0px; --r-1:1px; --r-2:2px; --r-3:4px; --r-pill:999px;

  /* — Border weights ————————————————————————————————— */
  --bw-hair:1px; --bw-1:1px; --bw-2:2px; --bw-3:3px; --bw-4:4px;

  /* — Elevation (used sparingly: only things that float) —— */
  --sh-0:none;
  --sh-1:0 1px 0 rgba(28,25,19,.06);
  --sh-2:0 2px 10px rgba(28,25,19,.10);
  --sh-3:0 18px 56px rgba(28,25,19,.26);

  /* — Layout ————————————————————————————————————————— *
   * D0 (design/DESIGN_DECISION.md §2): the SHELL IS FULL-BLEED. There is no
   * page-wide cap here — the top bar, the layout grid and the sidebar run to
   * the viewport edges, and tables use every pixel of the remaining width.
   * Only a reading measure is capped, by --w-measure on prose and forms.
   * --w-page survives solely as the ultra-wide guard applied above 2200px.  */
  --w-page:2160px;          /* ULTRA-WIDE GUARD ONLY. Never a shell cap.     */
  --w-measure:72ch;         /* prose + form columns                          */
  --w-lede:74ch;
  --w-cmt:78ch;             /* comment body                                  */
  --w-sidebar:236px; --w-drawer:600px; --w-modal:552px;
  --w-crest:34px; --w-avatar:32px; --w-folio:34px; --w-picker:100%;
  --w-stat-min:9.5rem; --w-grid2-min:11rem; --w-toast:26rem;
  --h-progress:6px; --h-dist:9px; --h-video:280px; --h-textarea:88px;
  --h-letterhead:4px; --h-pane:280px;
  /* The CSV import's problem report and issued-credentials list. Both can be
     200 entries long, so both scroll inside the dialog rather than making it
     taller than the screen. */
  --h-report:300px;
  --sz-icon:15px; --sz-icon-lg:19px;
  --sz-star-s:11px; --sz-star-m:14px; --sz-star-l:19px; --sz-star-xl:30px;
  --sz-input:34px;
  --min-ct:3ch;

  /* — Flex bases (what a column asks for before it flexes) ——— */
  --fx-head:24ch; --fx-card:20ch; --fx-search:18rem; --fx-fact:8rem;
  --fx-dist:14rem; --fx-reveal:20ch; --fx-time:7.5rem; --fx-file:12rem;
  --fx-prose:24rem;

  /* — Opacity ———————————————————————————————————————— */
  --op-scrim:.44; --op-soft:.85; --op-strip:.9; --op-icon:.75; --op-disabled:.45;

  /* — Motion & focus ————————————————————————————————— */
  --dur:130ms; --dur-toast:8s; --ease:cubic-bezier(.2,.7,.3,1);
  /* --focus (the ring COLOUR) is generated above, from design/palette.json.
   * Its geometry stays here: a ring's width is a web decision, its colour is
   * a brand decision.                                                        */
  --focus-w:2px; --focus-off:2px;
  --skip-hidden:-64px; --skip-shown:8px;

  /* — Stacking order ————————————————————————————————— */
  --z-skip:100; --z-toast:90; --z-overlay:80; --z-topbar:40; --z-sticky:2;
}

/* — Alternate token set: "Night Ledger" — the same document after hours — */
:root[data-theme="night"]{
  /* >>> BEGIN GENERATED COLOURS (night) — from design/palette.json via `go run ./tools/palettegen`. DO NOT EDIT below this line. */

  /* Paper & ink — The ledger ground and the marks on it. Warm laid paper, never a cold grey. */
  --paper:#121110;               /* Paper */
  --paper-2:#1b1917;             /* Paper raised */
  --paper-3:#0d0c0b;             /* Paper sunken */
  --paper-hi:#232019;            /* Paper hover */
  --paper-inset:#0f0e0d;         /* Paper inset */
  --ink:#f0e9db;                 /* Ink */
  --ink-2:#c2b9a6;               /* Ink secondary */
  --ink-3:#8d8471;               /* Ink muted */
  --ink-invert:#121110;          /* Ink inverted */

  /* Rules — The ledger's skeleton. Hairlines do the work borders would do elsewhere. */
  --rule:#332f28;                /* Rule */
  --rule-strong:#4e483c;         /* Rule strong */
  --rule-ink:#6b6355;            /* Rule ink */

  /* Brand — KSRTC crimson and Kerala livery gold. The corporation's identity: not a taste. */
  --accent:#e0776f;              /* KSRTC crimson */
  --accent-hi:#ef8b83;           /* KSRTC crimson hover */
  --accent-ink:#1a0d0c;          /* On crimson */
  --accent-tint:#2b1a18;         /* Crimson tint */
  --accent-rule:#6a3a35;         /* Crimson rule */
  --gold:#d9a441;                /* Kerala livery gold */

  /* Semantic — Meaning, not decoration. Each of these says something; none is available as an accent. */
  --color-star:#e0a93c;          /* Star */
  --color-star-empty:#4a4335;    /* Star empty */
  --color-info:#8fc0d6;          /* Info */
  --color-info-tint:#132025;     /* Info tint */
  --color-info-rule:#33525f;     /* Info rule */
  --color-admin:#eeb44a;         /* Admin reveal amber */
  --color-admin-ink:#f7dda3;     /* On admin reveal */
  --color-admin-tint:#2e2412;    /* Admin reveal tint */
  --color-admin-rule:#7d5c1c;    /* Admin reveal rule */
  --color-danger:#ef8079;        /* Danger */
  --color-danger-tint:#2c1614;   /* Danger tint */
  --color-ok:#7fbf94;            /* OK */
  --color-ok-tint:#152520;       /* OK tint */
  --color-private:#9aa6d6;       /* Private */
  --color-private-tint:#191b28;  /* Private tint */

  /* Status chips — The four training lifecycle states (UX_SPEC.md §7 #12). Each is a bg/ink/rule triple. */
  --chip-sched-bg:#152026;       /* Chip scheduled — ground */
  --chip-sched-ink:#9dc4d6;      /* Chip scheduled — text */
  --chip-sched-rule:#31505e;     /* Chip scheduled — rule */
  --chip-ongo-bg:#2a2213;        /* Chip ongoing — ground */
  --chip-ongo-ink:#e6bd6e;       /* Chip ongoing — text */
  --chip-ongo-rule:#6d5520;      /* Chip ongoing — rule */
  --chip-done-bg:#16241b;        /* Chip completed — ground */
  --chip-done-ink:#8cc39c;       /* Chip completed — text */
  --chip-done-rule:#2f5039;      /* Chip completed — rule */
  --chip-off-bg:#201e1a;         /* Chip inactive — ground */
  --chip-off-ink:#8d8471;        /* Chip inactive — text */
  --chip-off-rule:#3d382f;       /* Chip inactive — rule */

  /* Role badges — The four account roles (UX_SPEC.md §7 #10). Each is an ink/background pair. */
  --role-admin:#e0776f;          /* Role — admin */
  --role-admin-bg:#2b1a18;       /* Role — admin ground */
  --role-inst:#8fc0d6;           /* Role — institution */
  --role-inst-bg:#132025;        /* Role — institution ground */
  --role-instr:#e0c072;          /* Role — instructor */
  --role-instr-bg:#2a2415;       /* Role — instructor ground */
  --role-trainee:#9aa6d6;        /* Role — trainee */
  --role-trainee-bg:#191b28;     /* Role — trainee ground */

  /* Focus — The keyboard focus ring. Separate because it must stay legible against every surface. */
  --focus:#e0a93c;               /* Focus ring */
  /* <<< END GENERATED COLOURS (night) */

  --sh-1:0 1px 0 rgba(0,0,0,.5);
  --sh-2:0 2px 10px rgba(0,0,0,.55);
  --sh-3:0 18px 56px rgba(0,0,0,.72);
}
/* ===== END TOKENS ===== */