/* css/tokens.css — Grand Mumtoz Director · ZARHAL · the only file with colour values
   Verbatim from DESIGN.md §1.1 (+ @font-face of §1.3). Component CSS uses tokens only. */
:root {
  color-scheme: dark;

  /* ---- surfaces (Night lobby) ---- */
  --bg-0: #0E0C0A;              /* app canvas */
  --bg-1: #17130F;              /* page, bars, sidebar, sheets */
  --bg-2: #1F1A15;              /* cards, rows, inputs */
  --bg-3: #282219;              /* hover row, raised chip, emoji well */
  --bg-4: #31291F;              /* pressed / selected surface */
  --overlay: rgba(8, 6, 4, .72);
  --lamp: radial-gradient(1200px 600px at 20% -10%, rgba(201,164,92,.10), transparent 60%);

  /* ---- lines ---- */
  --line: rgba(255, 232, 196, .10);
  --line-strong: rgba(255, 232, 196, .18);
  --line-gold: rgba(201, 164, 92, .45);   /* the brass hairline: hero + stat cards only */

  /* ---- text ---- */
  --text-1: #F5EBDD;            /* 15.7:1 on bg-1 */
  --text-2: #B9AB93;            /* 8.2:1 */
  --text-3: #948672;            /* 5.2:1 on bg-1, 4.9:1 on bg-2 — captions ≥ 12px only */
  --text-inverse: #1A1409;

  /* ---- gold (accent) ---- */
  --accent: #C9A45C;            /* small text, icons, links, active nav, chip borders — 7.9:1 */
  --accent-strong: #E4C68A;     /* ONLY .hero-num, .num-2xl and 24px icons */
  --accent-fill: #C9A45C;       /* primary button fill (one per screen) */
  --accent-fill-hover: #D6B26A;
  --accent-fill-active: #B08F4E;
  --accent-ink: #1A1409;        /* text on accent-fill — 7.8:1 */
  --accent-soft: rgba(201, 164, 92, .14);   /* selected chip fill, active nav pill */
  --accent-line: rgba(201, 164, 92, .45);   /* focus/selection ring, brass flash */

  /* ---- semantic ---- */
  --success: #6FBF9E;  --success-soft: rgba(111, 191, 158, .14);
  --warning: #E0A33F;  --warning-soft: rgba(224, 163, 63, .14);
  --danger:  #E4645E;  --danger-soft:  rgba(228, 100, 94, .14);
  --info:    #6E9BE0;  --info-soft:    rgba(110, 155, 224, .14);

  /* ---- room states ---- */
  --st-free: #6FBF9E;                       /* legend swatch + free count only; free tiles carry no hue */
  --st-busy-bg: #362D23;  --st-busy-ink: #F5EBDD;  --st-busy-line: rgba(255, 232, 196, .22);
  --st-dirty: #D9784A;    --st-dirty-soft: rgba(217, 120, 74, .14);  --st-dirty-hatch: rgba(217, 120, 74, .18);
  --st-cleaning: #6E9BE0; --st-cleaning-soft: rgba(110, 155, 224, .14);
  --st-issue: #E4645E;

  /* ---- departments (rules, rings, dots, series — never large fills) ---- */
  --dept-reception: #6E9BE0;   /* lapis */
  --dept-maid: #B592E0;        /* lilac */
  --dept-laundry: #5EC2CF;     /* aqua */
  --dept-cook: #E39A4E;        /* saffron */
  --dept-director: #C9A45C;    /* gold */

  /* ---- charts ---- */
  --ch-rooms: var(--accent);   --ch-bar: var(--dept-reception);  --ch-extra: #B9AB93;
  --ch-out: var(--st-dirty);   --ch-grid: var(--line);           --ch-axis: var(--text-3);
  --ch-area-alpha: .12;

  /* ---- depth ---- */
  --shadow-1: 0 1px 0 rgba(255, 232, 196, .06) inset;                                   /* every panel */
  --shadow-2: 0 10px 30px -12px rgba(0, 0, 0, .65), 0 1px 0 rgba(255, 232, 196, .08) inset; /* raised card */
  --shadow-3: 0 24px 60px -20px rgba(0, 0, 0, .80), 0 1px 0 rgba(255, 232, 196, .12) inset; /* sheet, modal */
  --focus-ring: 0 0 0 2px var(--bg-1), 0 0 0 4px var(--accent);

  /* ---- spacing / radius ---- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 48px; --s-10: 64px;
  --r-xs: 6px;   /* chips, badges */
  --r-sm: 10px;  /* inputs, buttons, tiles */
  --r-md: 14px;  /* cards, table containers */
  --r-lg: 20px;  /* stat cards, modals, desktop panes */
  --r-xl: 28px;  /* phone sheet top corners, hero card */
  --r-full: 999px;

  /* ---- type ---- */
  --font-display: "Cormorant Garamond", "Cormorant Fallback", Georgia, "Times New Roman", serif;
  --font-ui: "Manrope", "Manrope Fallback", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;

  /* ---- motion ---- */
  --t-micro: 100ms;  /* press, toggle, chip select */
  --t-short: 160ms;  /* hover, badge, crossfade */
  --t-med:   240ms;  /* screen enter, tab switch, popover, modal */
  --t-long:  320ms;  /* sheet open, sidebar indicator */
  --t-grand: 560ms;  /* chart draw-in, counters (480), first-paint reveal */
  --e-velvet: cubic-bezier(.22, .61, .21, 1);   /* default ease-out, no overshoot */
  --e-enter:  cubic-bezier(0, .55, .2, 1);      /* things arriving */
  --e-exit:   cubic-bezier(.4, 0, 1, 1);        /* things leaving */
  --e-inout:  cubic-bezier(.65, 0, .35, 1);     /* segmented thumb, nav indicator */
  --e-spring: cubic-bezier(.34, 1.3, .64, 1);   /* tile "stamp" for own actions only */

  /* ---- layout ---- */
  --top-h: 56px;  --nav-h: 64px;  --gutter: 16px;
  --sidebar-w: 240px;  --sidebar-w-min: 72px;  --inspector-w: 400px;  --content-max: 1280px;
  --safe-t: env(safe-area-inset-top, 0px);  --safe-b: env(safe-area-inset-bottom, 0px);
  --tile: 76px;   /* phone room tile side */

  /* ---- core-1 additions (VIDEO-INSIGHTS §1, §4): lamp shade when lit, bead glow ---- */
  --lamp-warm: #F3D9A4;
  --bead-glow: rgba(201, 164, 92, .35);
}

html[data-theme="light"] {
  color-scheme: light;
  --bg-0: #F1EBE0;  --bg-1: #FAF6EF;  --bg-2: #FFFFFF;  --bg-3: #F3EDE2;  --bg-4: #EAE2D4;
  --overlay: rgba(35, 25, 12, .45);
  --lamp: radial-gradient(1200px 600px at 20% -10%, rgba(168,132,60,.08), transparent 60%);
  --line: rgba(58, 40, 18, .11);  --line-strong: rgba(58, 40, 18, .20);  --line-gold: rgba(168, 132, 60, .55);
  --text-1: #1F1810;  --text-2: #5C5041;  --text-3: #77695A;  --text-inverse: #F5EBDD;
  --accent: #7C6128;            /* 5.4:1 on bg-1, 5.8:1 on white */
  --accent-strong: #A8843C;     /* 3.2:1 — large text only, by rule */
  --accent-fill: #A8843C;  --accent-fill-hover: #96752F;  --accent-fill-active: #7C6128;
  --accent-ink: #1A1409;  --accent-soft: rgba(168, 132, 60, .12);  --accent-line: rgba(168, 132, 60, .55);
  --success: #237A5B;  --success-soft: rgba(35, 122, 91, .12);
  --warning: #9A5A0A;  --warning-soft: rgba(178, 106, 14, .12);
  --danger:  #B8332E;  --danger-soft:  rgba(184, 51, 46, .12);
  --info:    #2C5FB0;  --info-soft:    rgba(44, 95, 176, .10);
  --st-free: #237A5B;
  --st-busy-bg: #2A241C;  --st-busy-ink: #F5EBDD;  --st-busy-line: rgba(255, 255, 255, .10);
  --st-dirty: #A84E27;  --st-dirty-soft: rgba(176, 82, 42, .12);  --st-dirty-hatch: rgba(176, 82, 42, .16);
  --st-cleaning: #2C5FB0;  --st-cleaning-soft: rgba(44, 95, 176, .10);
  --st-issue: #B8332E;
  --dept-reception: #2C5FB0;  --dept-maid: #6A46A8;  --dept-laundry: #1A6F7C;  --dept-cook: #A0560F;  --dept-director: #7C6128;
  --ch-extra: #8E8170;
  --shadow-1: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 1px 2px rgba(58, 40, 18, .06);
  --shadow-2: 0 8px 24px -10px rgba(58, 40, 18, .18), 0 1px 0 rgba(255, 255, 255, .9) inset;
  --shadow-3: 0 24px 60px -20px rgba(58, 40, 18, .30);
  --focus-ring: 0 0 0 2px var(--bg-1), 0 0 0 4px var(--accent);
  --lamp-warm: #FFEFD0;
  --bead-glow: rgba(168, 132, 60, .30);
}

/* reduced motion: OS setting or Settings toggle (html[data-motion="reduced"]) */
@media (prefers-reduced-motion: reduce) {
  :root { --t-micro: 1ms; --t-short: 120ms; --t-med: 1ms; --t-long: 120ms; --t-grand: 1ms; }
}
html[data-motion="reduced"] { --t-micro: 1ms; --t-short: 120ms; --t-med: 1ms; --t-long: 120ms; --t-grand: 1ms; }

/* ---- fonts (§1.3): self-hosted woff2 subsets in ../fonts/, system fallbacks, swap ---- */
@font-face { font-family: "Manrope"; font-weight: 400; font-display: swap; src: url("../fonts/manrope-400.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20A0-20CF, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Manrope"; font-weight: 500; font-display: swap; src: url("../fonts/manrope-500.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20A0-20CF, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Manrope"; font-weight: 700; font-display: swap; src: url("../fonts/manrope-700.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20A0-20CF, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Cormorant Garamond"; font-weight: 600; font-display: swap; src: url("../fonts/cormorant-600.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20A0-20CF, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
/* metric-compatible fallbacks so swap does not reflow */
@font-face { font-family: "Manrope Fallback"; src: local("Roboto"), local("Segoe UI"), local("Helvetica Neue"); size-adjust: 97%; ascent-override: 96%; descent-override: 26%; }
@font-face { font-family: "Cormorant Fallback"; src: local("Georgia"), local("Times New Roman"); size-adjust: 92%; }