/* ═══════════════════════════════════════════════════════════════════════
   SITHIYAM OS — DESIGN TOKENS v6.1
   Canonical source: nd-palette-61.html + nd-prototype-*.html
   Dark theme = DEFAULT (applied via :root) · Light theme = SECONDARY
   All admin screens consume these tokens.

   Block order is load-bearing:
     1. :root + [data-theme="dark"] — dark palette (default)
     2. [data-theme="light"] — overrides when html[data-theme="light"]
   Equal-specificity selectors mean source order decides the winner.
═══════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────────────
   LIGHT THEME (secondary — applied via [data-theme="light"])
   NOTE: This block is duplicated near the end of the file AFTER the
   legacy compatibility map so it wins source-order against the
   legacy-map's light values. Keep both in sync.
─────────────────────────────────────────────────────────────────────── */
[data-theme="light"] {
  /* Surfaces (6-tier) */
  --bg-0: #F2EDE4;  /* page base — warm paper */
  --bg-1: #FFFFFF;  /* elevated surface (cards, nav) */
  --bg-2: #EAE4DA;  /* recessed surface */
  --bg-3: #E0D9CE;  /* deeper recess */
  --bg-4: #D5CCC0;  /* strongest recess */
  --bg-5: #FFFFFF;  /* pure white (overlays, modals) */

  /* Accent (Burnished Amber) */
  --accent:      #A87412;
  --accent-up:   #C08820;
  --accent-dn:   #8B6914;  /* Phase-Repair-14.2: was #D4A030 (2.31:1 FAIL) → 4.97:1 AA */
  --accent-ghost: rgba(168,116,18,.08);
  --accent-ring:  rgba(168,116,18,.22);
  --accent-metal: linear-gradient(160deg, #C49820 0%, #9A6C08 60%, #B88010 100%);
  --accent-seam:  rgba(168,116,18,.16);

  /* Text (5-tier) */
  --t1: #140E08;  /* primary ink */
  --t2: #3A2E20;  /* secondary */
  --t3: #6A5A48;  /* muted */
  --t4: #766656;  /* faint — Phase-Repair-16.2: bumped further to pass AA body on bg-1 (5.40) + bg-2 (4.73); bg-3 at 4.36 AA-lg */
  --t5: #C4B4A4;  /* placeholder — exempt from contrast rules */

  /* Borders (4-tier) */
  --b0: rgba(20,14,8,.04);
  --b1: rgba(20,14,8,.09);
  --b2: rgba(20,14,8,.16);
  --b3: rgba(20,14,8,.28);

  /* Shadows (3-tier) */
  --sh1: 0 1px 3px rgba(20,14,8,.07), 0 1px 2px rgba(20,14,8,.05);
  --sh2: 0 4px 20px rgba(20,14,8,.10), 0 2px 8px rgba(20,14,8,.07);
  --sh3: 0 16px 48px rgba(20,14,8,.14), 0 4px 16px rgba(20,14,8,.09);
  --sh-inner: inset 0 1px 0 rgba(255,255,255,.60);

  /* Status (quote lifecycle) */
  --s-draft:     #4A7A98;
  --s-sent:      #9A6E10;
  --s-followup:  #6E50A0;
  --s-confirm:   #287A52;  /* Phase-1a.3: aligned to palette canon (was #28784E) */
  --s-cancel:    #A83838;
  --s-expired:   #6A5848;
  --s-draft-bg:   rgba(74,122,152,.09);
  --s-sent-bg:    rgba(154,110,16,.09);   /* Phase-1a.2: added missing */
  --s-followup-bg: rgba(110,80,160,.09);  /* Phase-1a.2: added missing */
  --s-confirm-bg: rgba(40,122,82,.09);    /* Phase-1a.3: aligned to palette canon */
  --s-cancel-bg:  rgba(168,56,56,.09);    /* Phase-1a.2: added missing */
  --s-expired-bg: rgba(106,88,72,.09);
  --accent-glow:  rgba(168,116,18,.04);   /* Phase-1a.2: added missing */

  /* Glass (canonical names from nd-palette-61 + legacy aliases) */
  --glass:        rgba(242,237,228,.82);
  --glass-b:      rgba(20,14,8,.10);
  --glass-bg:     var(--glass);
  --glass-border: var(--glass-b);
  --scrim:        rgba(0,0,0,.30);  /* Phase-1a.3: aligned to palette canon (was .32) */

  /* Grain overlay opacity (applied on body::after) */
  --noise-opacity: 0;

  /* Semantic colors (with bg tints) */
  --green:   #28784E; --green-bg:  rgba(40,120,78,.09);
  --red:     #A83838; --red-bg:    rgba(168,56,56,.09);
  --blue:    #4A7A98; --blue-bg:   rgba(74,122,152,.09);
  --violet:  #6E50A0; --violet-bg: rgba(110,80,160,.09);
  --teal:    #2A7A74; --teal-bg:   rgba(42,122,116,.09);
  --orange:  #B87430; --orange-bg: rgba(184,116,48,.09);

  /* Validation rings (Phase-Repair-7) */
  --red-ring:   rgba(168,56,56,.22);
  --green-ring: rgba(40,120,78,.22);
}

/* ───────────────────────────────────────────────────────────────────────
   DARK THEME (canonical default — matches nd-prototype-*.html)
   html[data-theme="dark"] is set by default in index.html, so this
   always matches on first paint. No :root fallback (would clash with
   [data-theme="light"] by source order).
─────────────────────────────────────────────────────────────────────── */
[data-theme="dark"] {
  /* Surfaces */
  --bg-0: #080706;
  --bg-1: #121009;
  --bg-2: #1C1914;
  --bg-3: #26221C;
  --bg-4: #302B24;
  --bg-5: #3A342C;

  /* Accent */
  --accent:      #C9981C;
  --accent-up:   #E0B038;
  --accent-dn:   #8A6A10;
  --accent-ghost: rgba(201,152,28,.09);
  --accent-ring:  rgba(201,152,28,.24);
  --accent-metal: linear-gradient(160deg, #DDB840 0%, #B8820C 60%, #C99020 100%);
  --accent-seam:  rgba(201,152,28,.18);

  /* Text */
  --t1: #F6EEE2;
  --t2: #C8B89C;
  --t3: #8C7C6A;
  --t4: #9C8F7F;  /* Phase-Repair-16.2: bumped again to pass AA body everywhere (bg-1:6.02, bg-2:5.55, bg-3:5.01) */
  --t5: #382C22;  /* placeholder — exempt from contrast rules */

  /* Borders */
  --b0: rgba(246,238,226,.03);
  --b1: rgba(246,238,226,.07);
  --b2: rgba(246,238,226,.13);
  --b3: rgba(246,238,226,.22);

  /* Shadows */
  --sh1: 0 1px 3px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.30);
  --sh2: 0 4px 24px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.35);
  --sh3: 0 20px 60px rgba(0,0,0,.70), 0 6px 20px rgba(0,0,0,.40);
  --sh-inner: inset 0 1px 0 rgba(255,255,255,.08);

  /* Status */
  --s-draft:    #6B9AB8;
  --s-sent:     #C9981C;
  --s-followup: #9478C8;
  --s-confirm:  #38B478;
  --s-cancel:   #C05858;
  --s-expired:  #786458;
  --s-draft-bg:   rgba(107,154,184,.10);
  --s-sent-bg:    rgba(201,152,28,.10);   /* Phase-1a.2: added missing */
  --s-followup-bg: rgba(148,120,200,.10); /* Phase-1a.2: added missing */
  --s-confirm-bg: rgba(56,180,120,.10);
  --s-cancel-bg:  rgba(192,88,88,.10);    /* Phase-1a.2: added missing */
  --s-expired-bg: rgba(120,100,88,.10);
  --accent-glow:  rgba(201,152,28,.05);   /* Phase-1a.2: added missing */

  /* Glass (canonical names from nd-palette-61 + legacy aliases) */
  --glass:        rgba(12,10,8,.78);
  --glass-b:      rgba(246,238,226,.08);
  --glass-bg:     var(--glass);
  --glass-border: var(--glass-b);
  --scrim:        rgba(0,0,0,.72);

  /* Grain overlay opacity (applied on body::after) */
  --noise-opacity: 0.025;

  /* Semantic */
  --green:  #38B478; --green-bg:  rgba(56,180,120,.10);
  --red:    #C85A5A; --red-bg:    rgba(200,90,90,.10);
  --blue:   #6B9AB8; --blue-bg:   rgba(107,154,184,.10);
  --violet: #9478C8; --violet-bg: rgba(148,120,200,.10);
  --teal:   #4EA8A0; --teal-bg:   rgba(78,168,160,.10);
  --orange: #D4944C; --orange-bg: rgba(212,148,76,.10);

  /* Validation rings (Phase-Repair-7) */
  --red-ring:   rgba(200,90,90,.26);
  --green-ring: rgba(56,180,120,.26);
}

/* ───────────────────────────────────────────────────────────────────────
   INVARIANTS (theme-agnostic)
   Fonts · Radii · Motion
─────────────────────────────────────────────────────────────────────── */
:root {
  /* Font stacks */
  --fd: 'Cormorant Garamond', Georgia, serif;              /* display */
  --fu: 'Syne', system-ui, -apple-system, sans-serif;      /* ui / labels — Phase-1a.1: canonical palette binding */
  --fb: 'DM Sans', system-ui, -apple-system, sans-serif;   /* body */

  /* Radii */
  --r0: 6px;
  --r1: 10px;
  --r2: 14px;
  --r3: 20px;
  --r4: 28px;
  --rp: 999px;  /* pill */

  /* Motion */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --eio: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 220ms;
  --dur-slow: 380ms;
  --stagger: 40ms;

  /* Font size scale (migrated from v5-design-tokens.css — Phase 9) */
  --fs-xs:   10px;
  --fs-sm:   12px;
  --fs-base: 14px;
  --fs-md:   16px;
  --fs-lg:   20px;
  --fs-xl:   28px;

  /* Spacing scale (migrated from v5-design-tokens.css — Phase 9) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  /* Mobile chrome + safe areas (migrated from v5-design-tokens.css — Phase 9) */
  --mob-nav-h:    72px;
  --mob-bar-h:    56px;
  --safe-top:     env(safe-area-inset-top, 0px);
  --safe-bottom:  env(safe-area-inset-bottom, 0px);

  /* Native controls (scrollbars, date pickers) follow theme */
  color-scheme: dark light;
}

/* ───────────────────────────────────────────────────────────────────────
   LEGACY COMPATIBILITY MAP — Full v5 bridge
   Overrides every token older CSS (styles.css, v5-*.css) references,
   routing them to v6.1 values. No existing rule needs editing.
   Both theme blocks use explicit [data-theme="…"] selectors — html
   always has one of the two values set.
─────────────────────────────────────────────────────────────────────── */
[data-theme="light"] {
  /* ─ Accent family (v5 gold aliases) ─ */
  --gold:        var(--accent);
  --gold-dark:   var(--accent-dn);
  --gold-light:  #E0B864;
  --gold-soft:   #F5E8C8;
  --gg:          var(--accent-ghost);
  --gr:          var(--accent-ring);

  /* Ember Gold 9-tone scale → anchored on v6.1 amber */
  --g1: #5C3D08;
  --g2: #7A5210;
  --g3: #8B6914;
  --g4: #A87412;   /* = --accent */
  --g5: #A87412;   /* was #C49A3C — shifted to v6.1 accent */
  --g6: #C08820;
  --g7: #D4A030;
  --g9: #FBF4E0;

  /* ─ Backgrounds (v5 surface aliases → v6.1) ─ */
  --bg:       var(--bg-0);   /* page */
  --bgf:      var(--bg-1);   /* card/foreground */
  --bgr:      var(--bg-2);   /* recessed — was #F9F6F0, now #EAE4DA (more contrast) */
  --bgo:      var(--bg-3);   /* overlay/alt */
  --bg-soft:  var(--bg-2);
  --card:     var(--bg-1);

  /* ─ Text (v5 uses --t1..t5 too; we override with v6.1 values) ─ */
  --text:    var(--t1);
  --dark:    var(--t1);
  --muted:   var(--t3);
  --muted-2: var(--t4);
  --ink:     var(--t1);
  --border:       var(--b1);
  --line:         var(--b1);
  --line-strong:  var(--b2);

  /* ─ Shadows ─ */
  --shadow-sm: var(--sh1);
  --shadow-md: var(--sh2);
  --green-soft: var(--green-bg);
  --blue-soft:  var(--blue-bg);
  --red-soft:   var(--red-bg);
  --violet-soft:var(--violet-bg);
  --amber:      var(--accent);
  --amber-soft: var(--accent-ghost);

  /* ─ Fonts (v5 aliases) ─ */
  --radius-sm: var(--r1);
  --r-sm:      var(--r1);
  --radius-md: var(--r2);
  --r-md:      var(--r2);
  --radius-lg: var(--r3);
  --r-lg:      var(--r3);
  --r5:        var(--r4);
}

[data-theme="dark"] {
  /* v5 aliases in dark mode resolve to dark v6.1 tokens */
  --gold:       var(--accent);
  --gold-dark:  var(--accent-dn);
  --gold-soft:  var(--accent-ghost);   /* dark-aware (was unset → stayed light #F5E8C8) */
  --gg:         var(--accent-ghost);
  --gr:         var(--accent-ring);
  --g1:#5C3D08; --g2:#7A5210; --g3:#8A6A10;
  --g4:#C9981C; --g5:#C9981C; --g6:#E0B038;
  --g7:#E8CF8A; --g9:#FBF4E0;

  --bg:    var(--bg-0);
  --bgf:   var(--bg-1);
  --bgr:   var(--bg-2);
  --bgo:   var(--bg-3);
  --bg-soft:var(--bg-2);
  --card:  var(--bg-1);

  --text:var(--t1); --dark:var(--t1);
  --muted:var(--t3); --muted-2:var(--t4);
  --ink:var(--t1); --border:var(--b1); --line:var(--b1); --line-strong:var(--b2);

  --shadow-sm:var(--sh1); --shadow-md:var(--sh2); --green-soft:var(--green-bg); --blue-soft:var(--blue-bg);
  --red-soft:var(--red-bg); --violet-soft:var(--violet-bg);
  --amber:var(--accent); --amber-soft:var(--accent-ghost);
}

/* ───────────────────────────────────────────────────────────────────────
   PALETTE PROOF LAYER — a handful of component-level overrides so the
   v6.1 shift is immediately visible before full per-screen migration.
   Uses low-specificity, easily overridden by later per-screen work.
─────────────────────────────────────────────────────────────────────── */
body {
  background: var(--bg-0) !important;
  color: var(--t1) !important;
  font-family: var(--fb) !important;
}

/* Warmer page gradient like nd-prototype-* — dark is default */
[data-theme="dark"] body {
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(201,152,28,.07), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(201,152,28,.05), transparent 60%),
    #080706 !important;
}
[data-theme="light"] body {
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(168,116,18,.05), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(168,116,18,.04), transparent 60%),
    #F2EDE4 !important;
}

/* ───────────────────────────────────────────────────────────────────────
   GRAIN OVERLAY — canonical signature of the dark walnut studio aesthetic
   (nd-palette-61 & nd-prototype-* all ship with 2.5% film grain in dark,
   0 in light). Inline SVG turbulence = no PNG asset to ship.
─────────────────────────────────────────────────────────────────────── */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: var(--noise-opacity, 0);
  mix-blend-mode: overlay;
  z-index: 1;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.5  0 0 0 0 0.5  0 0 0 0 0.5  0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 240px 240px;
}

/* Display typography → Cormorant across common headings */
h1, h2, .card h2, .screen h2, .qb2-section-title, .doc-title, .sec-title {
  font-family: var(--fd);
  font-weight: 400;
  letter-spacing: -0.01em;
}

/* Uppercase micro-labels → Syne with ember accent */
.label, .pill-label, .sec-label, .doc-meta, .canvas-label {
  font-family: var(--fu);
  font-weight: 800;
  letter-spacing: 0.18em;
}


/* ───────────────────────────────────────────────────────────────────────
   BASE — applied via body (styles.css overrides may follow)
─────────────────────────────────────────────────────────────────────── */
html {
  font-size: 15px;
  -webkit-text-size-adjust: 100%;
}
body {
  font-family: var(--fb);
  background: var(--bg-0);
  color: var(--t1);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  transition: background var(--dur-slow) var(--ease),
              color var(--dur-base) var(--ease);
}