/* ─────────────────────────────────────────────────────────────────────────
 * KehadiranKokum — Sekolah System tokens
 *
 * Contract: /home/badi/projects/design-repo/references/sekolah-system.md
 *
 * Kaizen and KehadiranKokum are two members of ONE system. Everything here is
 * shared between them EXCEPT the accent and chrome families in §2 — those 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. This replaces
     Kokum's former slate ramp (deliberate, approved 2026-09-02). */
  --surface:     #ffffff;
  --surface-2:   #eeeeeb;   /* table headers, filter bars, inset panels */
  --paper:       #f5f5f3;   /* app background */
  --border:      #dededa;
  --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 ─────────────────
     Kokum = teal on navy. Kaizen's file differs here and nowhere else. */
  --accent:        #0f766e;   /* 5.47:1 on surface. P0 fix retained. */
  --accent-hover:  #0c5f58;   /* white on it: 7.52:1 */
  --accent-soft:   #dcf1ee;   /* accent on it: 4.65:1 */
  --accent-on:     #ffffff;

  --chrome:            #14334f;   /* topbar + menu active — navy */
  --chrome-2:          #1e456a;
  --chrome-ink:        #c3d4e2;   /* 8.56:1 on chrome */
  --chrome-ink-strong: #ffffff;

  /* ── 3. Attendance states — SHARED, load-bearing ──────────────────────
     Identical in both apps byte-for-byte. --st-present is deliberately NOT
     --accent: action colour and status colour stay separate family-wide. */
  --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 ────────────────────────────────────────────────────────── */
  --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;
  --radius:      12px;
  --radius-lg:   16px;
  --radius-pill: 9999px;

  --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%);

  /* ── 6. Compatibility aliases (P4 only — retired in P5) ───────────────
     Kokum's app.css still consumes 29 legacy names across ~120 var() calls.
     Renaming rules and values in one pass would make a layout regression
     indistinguishable from a rename typo, so P4 keeps both names alive and
     P5 deletes this block when app.css's rules move into app-specific shape.
     Do not add new uses of anything below this line. */
  --navy:        var(--chrome);
  --navy-dark:   var(--chrome);
  --navy-mid:    var(--chrome-2);
  --slate-900:   var(--ink);
  --slate-700:   var(--ink-2);
  --slate-600:   var(--ink-3);
  --slate-500:   var(--ink-3);
  --slate-400:   var(--ink-3);
  --slate-300:   var(--border-firm);
  --slate-200:   var(--surface-2);
  --slate-100:   var(--surface-2);
  --slate-50:    var(--paper);
  --accent-dark: var(--accent-hover);
  --danger:      var(--st-absent);
  --danger-soft: var(--st-absent-soft);
  --danger-border: #f3c2bb;
  --warn:        var(--st-late);
  --warn-soft:   var(--st-late-soft);
  --warn-border: #ecdcb0;
  --ok:          var(--st-present);
  --ok-soft:     var(--st-present-soft);
  --ok-border:   #bbf3d4;
  --state-blue:   #4a5cb8;   /* == --st-excused: in-progress key-in state */
  --state-green:  #1c6b4b;   /* == --st-present */
  --state-yellow: #96610a;   /* == --st-late */
  --state-grey:   #676962;   /* == --st-none */
  --bg:          var(--paper);
  --radius-md:   10px;
  --shadow-xs:   var(--elev-ring);
  --shadow-sm:   var(--elev-raised);
  --shadow-md:   var(--elev-raised);
  --shadow-lg:   var(--elev-float);
  --topbar-h:    3.5rem;
}