/* ─────────────────────────────────────────────────────────────────────────
 * Kaizen — Sekolah System tokens
 *
 * Contract: /home/badi/projects/design-repo/references/sekolah-system.md
 * Visual:   /home/badi/projects/design-repo/references/sekolah-system-spec.html
 *
 * Kaizen and KehadiranKokum are two members of ONE system. Everything in this
 * file is shared between them EXCEPT the accent and chrome families in §2 —
 * those four-ish values are the entire brand delta. A teacher uses both apps
 * in the same afternoon: the frame tells them where they are, the content
 * looks the same everywhere.
 *
 * Every contrast figure below was computed, not estimated.
 * Load order: tokens.css → system.css → app.css
 * ─────────────────────────────────────────────────────────────────────── */

:root {
  color-scheme: light;

  /* ── 1. Neutral ramp — SHARED, never diverge ──────────────────────────
     Warm grey, not blue-grey. Blue-grey neutrals read cold and wash out
     under the yellow-cast fluorescent light in a staff room. */
  --surface:     #ffffff;   /* cards, table bodies, inputs */
  --surface-2:   #eeeeeb;   /* table headers, filter bars, inset panels */
  --paper:       #f5f5f3;   /* app background */
  --border:      #dededa;   /* hairlines, card edges */
  --border-firm: #c9c9c3;   /* input borders, anything interactive */

  --ink:   #1b1c1a;   /* headings, data values      17.11:1 on surface */
  --ink-2: #454741;   /* body text                   9.41:1 */
  --ink-3: #676962;   /* labels, meta, captions      5.56:1 / 4.79:1 on surface-2 */
  /* --ink-3 is the FLOOR. Nothing lighter may carry text. */

  /* ── 2. Accent + chrome — THE ONLY PER-APP DIVERGENCE ─────────────────
     Kaizen = forest. Kokum's file differs here and nowhere else. */
  --accent:        #176b50;   /* 6.45:1 on surface */
  --accent-hover:  #115641;   /* white on it: 8.64:1 */
  --accent-soft:   #e3f0e9;   /* accent on it: 5.50:1 */
  --accent-on:     #ffffff;

  --chrome:            #10251f;   /* sidebar rail */
  --chrome-2:          #1b3b32;   /* rail hover */
  --chrome-ink:        #cbdcd4;   /* 11.27:1 on chrome */
  --chrome-ink-strong: #ffffff;

  /* ── 3. Attendance states — SHARED, load-bearing ──────────────────────
     Identical in both apps. A teacher must never re-learn what a colour
     means when switching apps.

     --st-present is deliberately NOT --accent. Kaizen's accent is green;
     if present == accent then every primary button looks like a status.
     Action colour and status colour stay separate. */
  --st-present: #1c6b4b;  --st-present-soft: #e2f0e8;   /* Hadir         6.45:1 */
  --st-late:    #96610a;  --st-late-soft:    #fbeed4;   /* Lewat         5.24:1 */
  --st-absent:  #a8352c;  --st-absent-soft:  #fbe6e3;   /* Tidak hadir   6.54:1 */
  --st-excused: #4a5cb8;  --st-excused-soft: #e6e9f8;   /* Dikecualikan  5.98:1 */
  --st-none:    #676962;  --st-none-soft:    #ebebe7;   /* Tiada rekod   5.56:1 */

  /* ── 4. Type ──────────────────────────────────────────────────────────
     System font only. A webfont is a network round-trip before a teacher
     can mark attendance on school wifi. */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --text-xs:   12px;      --leading-xs:   1.4;
  --text-sm:   13.5px;    --leading-sm:   1.45;
  --text-base: 15px;      --leading-base: 1.55;
  --text-lg:   17px;      --leading-lg:   1.4;
  --text-xl:   21px;      --leading-xl:   1.25;
  --text-2xl:  clamp(26px, 3vw, 34px);  --leading-2xl: 1.15;
  --text-data: 31px;      --leading-data: 1;

  /* ── 5. Space, shape, elevation, motion ───────────────────────────────  */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px;  --space-6: 24px;  --space-8: 32px;  --space-12: 48px;

  --radius-sm:   8px;    /* inputs, badges, small controls */
  --radius:      12px;   /* cards, tables, panels */
  --radius-lg:   16px;   /* login card, modals */
  --radius-pill: 9999px; /* status badges only */

  /* Three levels, no fourth. Depth comes from surface separation, not
     stacked shadows. No card inside a card. */
  --elev-ring:   0 0 0 1px var(--border);
  --elev-raised: 0 1px 2px rgba(27, 28, 26, .05), 0 4px 12px rgba(27, 28, 26, .06);
  --elev-float:  0 12px 32px rgba(27, 28, 26, .13);

  --motion-fast: 140ms;
  --motion-base: 200ms;
  --ease: cubic-bezier(.2, 0, 0, 1);
  --focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 68%);
}