/* Queen Amara design tokens.
   Themes: night (default, :root), day (data-theme="light"), office (data-theme="office").
   Themes can be set on any element; tokens cascade to its subtree. */

:root {
  /* palette: raw values, never used directly by components */
  --qa-oxblood: #6e0f14;
  --qa-red: #a11d15;
  --qa-red-hi: #c42e22;
  --qa-red-deep: #5e0c08;
  --qa-red-night: #2a0906;
  --qa-red-ink: #170403;
  --qa-gold: #d9b25e;
  --qa-gold-hi: #f2d898;
  --qa-gold-dark: #7a5716;
  --qa-gold-ink: #5c400f;
  --qa-cream: #fbf1e1;
  --qa-parchment: #e6d0a8;
  --qa-umber: #2a1410;
  --qa-umber-ink: #24100a;
  --qa-limestone: #f3ece1;

  /* logo gold, exact stops from the signature logo */
  --gold-logo: linear-gradient(135deg, #7a5716 0%, #c9a24a 18%, #f6e2a0 33%, #b48528 47%, #fff1c2 60%, #a87b26 78%, #e2c26c 100%);
  /* bright slice of the same stops, for faces that carry dark text */
  --gold-face: linear-gradient(160deg, #e2c26c 0%, #f6e2a0 24%, #c9a24a 50%, #fff1c2 72%, #c9a24a 100%);
  --gold-rule: linear-gradient(90deg, transparent, #c9a24a 20%, #f6e2a0 50%, #c9a24a 80%, transparent);
  --gold-ink-on-face: #2a1206;

  /* real textures */
  --tex-marble: url("tex/marble.webp?v=cfefd0f82c");
  --tex-wool: url("tex/wool-red.webp?v=a6b36f1edc");
  --tex-fresco: url("tex/fresco-red.webp?v=3d3f43995b");
  --tex-foil: url("tex/gold-foil.webp?v=b3fa2a76ba");
  --tex-grain: url("tex/foil-grain.webp?v=b0b853e535");
  --tex-flame: url("tex/flame.webp?v=257ab5de51");
  --tex-dust: url("tex/gold-dust.webp?v=ab19a52dc4");
  --tex-marble-size: 384px;
  --tex-wool-size: 288px;
  --tex-fresco-size: 256px;
  --tex-grain-size: 176px;
  --tex-foil-size: 176px;

  /* login tablet: provider buttons sit inside --coin-clear, the gold ring sits outside it */
  --coin: 44px;
  --coin-clear: 8px;
  --coin-ring: 3px;

  /* type */
  --f-roman: "Cinzel", "Trajan Pro", Georgia, serif;
  --f-th: "Taviraj", "Noto Serif Thai", Georgia, serif;
  --f-ui: "IBM Plex Sans Thai", "Noto Sans Thai", system-ui, sans-serif;
  --f-num: "IBM Plex Sans Thai", system-ui, sans-serif;

  --fs-2xs: 12px;
  --fs-xs: 13px;
  --fs-sm: 14px;
  --fs-md: clamp(15px, 0.25vw + 14px, 16px);
  --fs-lg: clamp(17px, 0.3vw + 16px, 18px);
  --fs-xl: clamp(19px, 0.6vw + 17px, 22px);
  --fs-2xl: clamp(22px, 1vw + 19px, 28px);
  --fs-3xl: clamp(26px, 1.8vw + 20px, 36px);
  --fs-display: clamp(30px, 3vw + 20px, 48px);

  --lh-th-body: 1.7;
  --lh-th-ui: 1.5;
  --lh-th-head: 1.4;
  --lh-latin-head: 1.15;
  --track-roman: 0.14em;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  --measure: 34em;

  /* space, 4 px grid */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-pill: 999px;

  --tap: 44px;
  --tap-lg: 52px;
  --border: 1px;

  /* motion */
  --dur-press: 120ms;
  --dur-quick: 200ms;
  --dur-panel: 320ms;
  --dur-fade: 600ms;
  --dur-scene: 1100ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(0.45, 0.05, 0.35, 1);
  --ease-sheet: cubic-bezier(0.32, 0.72, 0, 1);

  /* layers; same numbers as the room page */
  --z-plate: 0;
  --z-tags: 1;
  --z-caption: 2;
  --z-dock: 3;
  --z-topbar: 4;
  --z-timer: 5;
  --z-zoom: 8;
  --z-sheet: 9;
  --z-welcome: 10;
  --z-toast: 12;
  --z-tooltip: 13;

  /* safe areas and gutters */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: max(12px, env(safe-area-inset-bottom, 0px));
  --gut-l: max(16px, env(safe-area-inset-left, 0px));
  --gut-r: max(16px, env(safe-area-inset-right, 0px));

  /* viewport units: dvh for full-screen shells, svh for content that must always fit */
  --vh-full: 100vh;
  --vh-fit: 100vh;

  --content-max: 1120px;
  --sheet-max: 420px;
  --side-max: 420px;
}

@supports (height: 100dvh) {
  :root {
    --vh-full: 100dvh;
    --vh-fit: 100svh;
  }
}

/* night: lamplit, the default for everyone */
:root,
:root[data-theme="dark"],
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b0403;
  --bg-mat: linear-gradient(rgba(11, 4, 3, 0.86), rgba(11, 4, 3, 0.86)), var(--tex-fresco) 0 0 / var(--tex-fresco-size);
  --surface: #1c0705;
  --surface-mat: linear-gradient(rgba(24, 6, 4, 0.9), rgba(24, 6, 4, 0.9)), var(--tex-wool) 0 0 / var(--tex-wool-size);
  --surface-2: #2a0906;
  --surface-sheet: #1d0604;
  --sheet-mat: linear-gradient(180deg, rgba(42, 9, 6, 0.9), rgba(23, 4, 3, 0.94)), var(--tex-wool) 0 0 / var(--tex-wool-size);
  --tablet-tint: rgba(34, 18, 9, 0.9);
  --tablet-tint-2: rgba(16, 7, 3, 0.93);
  --tablet-mat: linear-gradient(180deg, var(--tablet-tint), var(--tablet-tint-2)), var(--tex-foil) 0 0 / var(--tex-foil-size);
  --tablet-edge: #a88442;
  --surface-glass: rgba(24, 5, 3, 0.72);
  --scrim: rgba(14, 3, 2, 0.72);
  --backdrop: rgba(6, 1, 0, 0.62);
  --field: #120302;

  --text: #fbf1e1;
  --text-muted: #e6d0a8;
  --text-faint: #c3a77f;
  --text-gold: #ecc977;
  --text-on-red: #fff6e6;
  --text-on-gold: var(--gold-ink-on-face);

  --accent: #a11d15;
  --accent-mat: linear-gradient(180deg, rgba(150, 26, 18, 0.9), rgba(74, 10, 7, 0.94)), var(--tex-wool) 0 0 / var(--tex-wool-size);
  --accent-hover: #b52419;
  --accent-text: #ff9b87;

  --line: rgba(217, 178, 94, 0.32);
  --line-strong: #a88442;
  --line-solid: #4a2a17;
  --focus: #f2d898;
  --sel: #f2d898;
  --focus-halo: rgba(0, 0, 0, 0.7);

  --ok: #b8d6a0;
  --ok-bg: #16200f;
  --warn: #f0c36a;
  --warn-bg: #2e1d08;
  --danger: #ff9b87;
  --danger-bg: #3a0b07;
  --info: #b9cbe6;
  --info-bg: #111a26;

  --shadow-1: 0 2px 6px rgba(0, 0, 0, 0.55);
  --shadow-2: 0 10px 28px -12px rgba(0, 0, 0, 0.95), inset 0 1px 0 rgba(255, 220, 160, 0.12);
  --shadow-3: 0 24px 60px -16px rgba(0, 0, 0, 0.95);
  --shadow-gold: 0 8px 22px -10px rgba(0, 0, 0, 0.95), inset 0 1px 0 rgba(255, 252, 235, 0.7), inset 0 -1px 0 rgba(90, 60, 10, 0.45);
  --text-shadow-plate: 0 1px 2px rgba(0, 0, 0, 0.8);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="office"]) {
    color-scheme: dark;
  }
}

/* day: lights on in the room; limestone and marble */
[data-theme="light"] {
  color-scheme: light;
  --bg: #f3ece1;
  --bg-mat: linear-gradient(rgba(243, 236, 225, 0.86), rgba(243, 236, 225, 0.86)), var(--tex-marble) 0 0 / var(--tex-marble-size);
  --surface: #fbf7f0;
  --surface-mat: linear-gradient(rgba(252, 249, 243, 0.86), rgba(252, 249, 243, 0.86)), var(--tex-marble) 0 0 / var(--tex-marble-size);
  --surface-2: #efe6d8;
  --surface-sheet: #faf5ec;
  --sheet-mat: linear-gradient(rgba(251, 247, 240, 0.9), rgba(251, 247, 240, 0.9)), var(--tex-marble) 0 0 / var(--tex-marble-size);
  --tablet-tint: rgba(250, 246, 238, 0.6);
  --tablet-tint-2: rgba(250, 246, 238, 0.72);
  --tablet-mat: linear-gradient(180deg, var(--tablet-tint), var(--tablet-tint-2)), var(--tex-marble) 0 0 / var(--tex-marble-size);
  --tablet-edge: #8f6c2c;
  --surface-glass: rgba(251, 246, 238, 0.86);
  --scrim: rgba(251, 246, 238, 0.88);
  --backdrop: rgba(42, 20, 16, 0.42);
  --field: #ffffff;

  --text: #24100a;
  --text-muted: #57402f;
  --text-faint: #6e5644;
  --text-gold: #6e4c12;
  --text-on-red: #fff6e6;
  --text-on-gold: var(--gold-ink-on-face);

  --accent: #a11d15;
  --accent-mat: linear-gradient(180deg, rgba(170, 32, 22, 0.9), rgba(122, 18, 12, 0.94)), var(--tex-wool) 0 0 / var(--tex-wool-size);
  --accent-hover: #8c1811;
  --accent-text: #a11d15;

  --line: rgba(122, 87, 22, 0.32);
  --line-strong: #8f6c2c;
  --line-solid: #ddd0bb;
  --focus: #7a1a10;
  --sel: #a11d15;
  --focus-halo: rgba(255, 250, 240, 0.9);

  --ok: #2c6326;
  --ok-bg: #e5f0df;
  --warn: #7a4f00;
  --warn-bg: #f8ecd2;
  --danger: #a11d15;
  --danger-bg: #f8e2dd;
  --info: #234a72;
  --info-bg: #e5edf6;

  --shadow-1: 0 1px 3px rgba(60, 30, 10, 0.18);
  --shadow-2: 0 10px 26px -14px rgba(60, 30, 10, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  --shadow-3: 0 24px 60px -18px rgba(60, 30, 10, 0.5);
  --shadow-gold: 0 6px 16px -8px rgba(90, 50, 10, 0.55), inset 0 1px 0 rgba(255, 252, 235, 0.8), inset 0 -1px 0 rgba(90, 60, 10, 0.4);
  --text-shadow-plate: 0 1px 2px rgba(255, 250, 240, 0.6);
}

/* office: back office, brand kept to the frame, content tuned for reading */
[data-theme="office"] {
  color-scheme: light;
  --bg: #f6f3ee;
  --bg-mat: #f6f3ee;
  --surface: #ffffff;
  --surface-mat: #ffffff;
  --surface-2: #faf7f2;
  --surface-sheet: #ffffff;
  --sheet-mat: #ffffff;
  --tablet-tint: rgba(255, 255, 255, 0.9);
  --tablet-tint-2: rgba(255, 255, 255, 0.9);
  --tablet-mat: linear-gradient(var(--tablet-tint), var(--tablet-tint-2)), var(--tex-marble) 0 0 / var(--tex-marble-size);
  --tablet-edge: #8a7a68;
  --surface-glass: #ffffff;
  --scrim: rgba(255, 255, 255, 0.94);
  --backdrop: rgba(31, 23, 18, 0.45);
  --field: #ffffff;

  --text: #1f1712;
  --text-muted: #54473c;
  --text-faint: #685a4e;
  --text-gold: #6e4c12;
  --text-on-red: #ffffff;
  --text-on-gold: var(--gold-ink-on-face);

  --accent: #a11d15;
  --accent-mat: #a11d15;
  --accent-hover: #8c1811;
  --accent-text: #a11d15;

  --line: #e4dbcf;
  --line-strong: #8a7a68;
  --line-solid: #e4dbcf;
  --focus: #a11d15;
  --sel: #a11d15;
  --focus-halo: #ffffff;

  --ok: #22551f;
  --ok-bg: #e6f1e3;
  --warn: #6e4a00;
  --warn-bg: #fbefd6;
  --danger: #8f1a12;
  --danger-bg: #f8e1de;
  --info: #24466e;
  --info-bg: #e8eef6;

  --shadow-1: 0 1px 2px rgba(31, 23, 18, 0.08);
  --shadow-2: 0 4px 14px -6px rgba(31, 23, 18, 0.18);
  --shadow-3: 0 18px 48px -16px rgba(31, 23, 18, 0.35);
  --shadow-gold: 0 1px 2px rgba(31, 23, 18, 0.2), inset 0 1px 0 rgba(255, 252, 235, 0.8);
  --text-shadow-plate: none;

  --fs-md: 15px;
  --lh-th-body: 1.6;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-press: 0ms;
    --dur-quick: 0ms;
    --dur-panel: 0ms;
    --dur-fade: 120ms;
    --dur-scene: 200ms;
  }
}

/* Size classes, same as phase4/SPEC.md 7.1 (CSS variables cannot be used in @media):
   XS  width < 360
   S   width 360-599
   SL  height <= 500 and landscape
   M   width 600-1023
   L   width 1024-1439
   XL  width 1440-2199
   XXL width >= 2200 */