/* ═══════════════════════════════════════════════════════════════
   TBQ Space — Design Tokens v2 ("Classical, tightened")
   Source of truth for tiembanquyen.com. Load BEFORE components.css.

   Rules
   • Components read only semantic tokens (--bg, --ink, --accent-text…),
     never the palette (--palette-*) directly.
   • Dark sections do not restyle components — they set
     data-surface="dark" and the semantic tokens remap.
   • Every text/background pair below meets WCAG AA (4.5:1) at body size.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── Palette (raw — do not use in components) ─────────────── */
  /* Theo "Bộ nhận diện thương hiệu": Mực đen #1C1B19 · Vàng đồng #B38B45 ·
     Vàng nhạt #D9BE86 · Giấy ngà #F4F1EA · Xám đá #5E5A52. Các bậc 600/700/50
     là bậc phụ tự suy ra để chữ vàng vẫn đạt AA trên nền sáng. */
  --palette-paper:      #f4f1ea;   /* Giấy ngà */
  --palette-paper-2:    #faf8f3;
  --palette-paper-3:    #eae5da;
  --palette-ink:        #1c1b19;   /* Mực đen */
  --palette-colophon:   #1c1b19;
  --palette-stone:      #5e5a52;   /* Xám đá */
  --palette-gold:       #b38b45;   /* Vàng đồng */
  --palette-gold-light: #d9be86;   /* Vàng nhạt */
  --palette-gold-600:   #9a743a;
  --palette-gold-700:   #76561f;
  --palette-gold-50:    #f8eedb;
  --palette-green:      #5e8c61;
  --palette-green-700:  #467249;
  --palette-green-50:   #eef3ee;
  --palette-red:        #c04a3a;
  --palette-red-700:    #a8402f;
  --palette-red-50:     #f9ecea;

  /* ── Surfaces ─────────────────────────────────────────────── */
  --bg:        var(--palette-paper);
  --surface:   var(--palette-paper-2);
  --wash:      var(--palette-paper-3);

  /* ── Text (contrast vs --bg) ──────────────────────────────── */
  --ink:       var(--palette-ink);                                           /* 15.1:1 */
  --ink-2:     color-mix(in srgb, var(--palette-ink) 72%, transparent);      /*  6.1:1 */
  --ink-3:     color-mix(in srgb, var(--palette-ink) 66%, transparent);      /*  4.9:1 — was 50% (3.1:1, failed) */
  --ink-disabled: color-mix(in srgb, var(--palette-ink) 38%, transparent);   /* non-text only */

  /* ── Lines ────────────────────────────────────────────────── */
  --border:        color-mix(in srgb, var(--palette-ink) 16%, transparent);  /* decorative dividers, cards */
  --border-strong: color-mix(in srgb, var(--palette-ink) 50%, transparent);  /* inputs, controls — 3.1:1 */

  /* ── Accent: gold is a LINE, not a fill ───────────────────── */
  --accent-line:  var(--palette-gold);       /* decorative borders, rules, bars (2.8:1 — không dùng cho icon mang nghĩa) */
  --accent-icon:  var(--palette-gold-600);   /* icon, viền điều khiển — 3.8:1 */
  --accent-text:  var(--palette-gold-700);   /* gold TEXT on light — 6.0:1 */
  --accent-hover: var(--palette-gold-600);
  --accent-fill:  var(--palette-gold);       /* the one solid-gold element per page */
  --on-accent:    var(--palette-colophon);   /* text on gold fill — 5.3:1 (white was 3.4:1) */
  --accent-bg:    var(--palette-gold-50);

  /* ── Status ───────────────────────────────────────────────── */
  --success:     var(--palette-green);       /* icons, borders */
  --success-text:var(--palette-green-700);   /* 5.0:1 */
  --success-bg:  var(--palette-green-50);
  --warning:     var(--palette-gold);
  --warning-text:var(--palette-gold-700);
  --warning-bg:  var(--palette-gold-50);
  --danger:      var(--palette-red);
  --danger-text: var(--palette-red-700);     /* 5.5:1 */
  --danger-bg:   var(--palette-red-50);

  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent-icon);

  /* ── Typography ───────────────────────────────────────────── */
  --font-display: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --font-body:    'Lora', Georgia, 'Times New Roman', serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', ui-monospace, monospace;

  /* 10-step scale (was ~45 distinct sizes, incl. 10.5/11.5/12.5/13.5/14.5/15.5/16.5/17.5) */
  --text-2xs: 11px;   /* legal, micro-badges */
  --text-xs:  12px;   /* kickers, labels (uppercase) */
  --text-sm:  13px;   /* meta, captions */
  --text-md:  14px;   /* controls, secondary body */
  --text-base:16px;   /* body */
  --text-lg:  18px;   /* lead, prices */
  --text-xl:  23px;   /* card titles (display font) */
  --text-2xl: 28px;   /* sub-section titles */
  --text-3xl: clamp(28px, 3.2vw, 36px);  /* section titles */
  --text-4xl: clamp(36px, 5.2vw, 64px);  /* hero */
  --text-mark: clamp(180px, 30vw, 480px);/* decorative watermark (№1) */

  --leading-tight: 1.1;   /* display */
  --leading-snug:  1.3;   /* headings, controls */
  --leading-body:  1.65;  /* running text */

  --tracking-display: -0.01em;
  --tracking-kicker:   0.12em;  /* uppercase labels — one value (was .08/.1/.12/.14) */

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;  /* ceiling for body font; display font stays 400–500 */

  /* ── Space (4px grid) ─────────────────────────────────────── */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px;  --space-6: 24px;  --space-8: 32px;  --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-24: 96px;

  --container: 1120px;
  --gutter: var(--space-6);
  --section-y: clamp(var(--space-16), 9vw, 128px);
  --header-h: 64px;

  /* ── Shape ────────────────────────────────────────────────── */
  --radius-sm:    2px;    /* bars, tiny tags */
  --radius:       4px;    /* EVERYTHING else: buttons, cards, inputs, modals */
  --radius-pill:  999px;  /* badges, chips */
  --radius-round: 50%;    /* avatars, icon buttons */
  --hairline: 1px;

  /* ── Elevation (used sparingly — Classical prefers lines) ── */
  --shadow-sm: 0 1px 2px color-mix(in srgb, #2d2b2b 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent);
  --scrim:     color-mix(in srgb, var(--palette-ink) 45%, transparent);

  /* ── Motion (was 8 durations, 23 transition combos) ───────── */
  --dur-fast: 150ms;   /* color, border, background */
  --dur-base: 250ms;   /* transform, accordions, drawers */
  --dur-slow: 450ms;   /* page/section reveal */
  --ease:     cubic-bezier(.2, .6, .2, 1);

  /* ── Layers (was 11 ad-hoc values 850–1300) ───────────────── */
  --z-sticky:   100;  /* header */
  --z-dropdown: 200;  /* search results */
  --z-fab:      300;  /* floating Zalo button */
  --z-overlay:  900;  /* scrims */
  --z-drawer:  1000;  /* cart */
  --z-modal:   1100;
  --z-toast:   1200;
}

/* ── Dark surface: hero, colophon/footer, "Được quan tâm" panel ── */
[data-surface="dark"] {
  --bg:       var(--palette-colophon);
  --surface:  color-mix(in srgb, var(--palette-paper) 4%, var(--palette-colophon));
  --wash:     color-mix(in srgb, var(--palette-paper) 8%, var(--palette-colophon));

  --ink:      var(--palette-paper);
  --ink-2:    color-mix(in srgb, var(--palette-paper) 72%, transparent);  /* 8.6:1 */
  --ink-3:    color-mix(in srgb, var(--palette-paper) 60%, transparent);  /* 6.4:1 */
  --ink-disabled: color-mix(in srgb, var(--palette-paper) 30%, transparent);

  --border:        color-mix(in srgb, var(--palette-paper) 14%, transparent);
  --border-strong: color-mix(in srgb, var(--palette-paper) 36%, transparent);

  --accent-line:  var(--palette-gold);       /* 5.5:1 on colophon */
  --accent-icon:  var(--palette-gold);
  --accent-text:  var(--palette-gold-light); /* 9.6:1 on colophon */
  --accent-hover: #e8d5ac;

  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent-icon);

  background: var(--bg);
  color: var(--ink);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; }
}