/* ==========================================================================
   DESIGN TOKENS — Nguồn sự thật duy nhất
   Tất cả giá trị thiết kế được khai báo ở đây.
   Không hard-code giá trị ở bất kỳ file nào khác.
   ========================================================================== */

:root {
  /* ─── COLORS: Brand (from Imperial Lithos palette) ─── */
  --brand-primary:       #B8860B;   /* Primary — Dark Goldenrod */
  --brand-primary-light: #D4A017;
  --brand-primary-dark:  #946B09;
  --brand-secondary:     #C9A96E;   /* Secondary — Warm Tan/Gold */
  --brand-secondary-light: #D4BA87;
  --brand-secondary-dark: #B08E4A;
  --brand-tertiary:      #5392D9;   /* Tertiary — Blue */
  --brand-tertiary-light: #72A8E4;
  --brand-tertiary-dark:  #3B7BC4;
  --brand-accent:        #B8860B;   /* Accent = Primary for consistency */

  /* ─── COLORS: Text ─── */
  --text-primary:        #1A1A1A;
  --text-secondary:      #555555;
  --text-muted:          #888888;
  --text-tertiary:       #AAAAAA;   /* Lighter than muted — meta/helper text */
  --text-on-dark:        #FFFFFF;
  --text-on-primary:     #FFFFFF;
  --text-link:           var(--brand-primary);
  --text-link-hover:     var(--brand-primary-dark);

  /* ─── COLORS: Background ─── */
  --bg-primary:          #FFFFFF;
  --bg-secondary:        #FAF8F5;   /* Neutral from palette */
  --bg-tertiary:         #F0ECE4;
  --bg-dark:             #1A1A1A;
  --bg-dark-secondary:   #2A2A2A;

  /* ─── COLORS: Border ─── */
  --border-color:        #E0DCD5;
  --border-color-light:  #F0EDE8;
  --border-color-dark:   #C5C0B8;

  /* ─── COLORS: Status ─── */
  --color-success:       #2E7D32;
  --color-warning:       #F57F17;
  --color-error:         #C62828;
  --color-info:          var(--brand-tertiary);

  /* ─── TYPOGRAPHY: Font Family ─── */
  --font-heading:        'Noto Serif', serif;
  --font-body:           'Inter', sans-serif;
  --font-label:          'Space Grotesk', sans-serif;

  /* ─── TYPOGRAPHY: Font Size (responsive via clamp) ─── */
  --fs-display:          clamp(2.5rem, 5vw, 4rem);
  --fs-h1:               clamp(2rem, 4vw, 3rem);
  --fs-h2:               clamp(1.5rem, 3vw, 2.25rem);
  --fs-h3:               clamp(1.25rem, 2.5vw, 1.75rem);
  --fs-h4:               clamp(1.125rem, 2vw, 1.375rem);
  --fs-h5:               clamp(1rem, 1.5vw, 1.125rem);
  --fs-body:             1rem;
  --fs-body-lg:          1.125rem;
  --fs-small:            0.875rem;
  --fs-caption:          0.75rem;

  /* ─── TYPOGRAPHY: Font Weight ─── */
  --fw-regular:          400;
  --fw-medium:           500;
  --fw-semibold:         600;
  --fw-bold:             700;

  /* ─── TYPOGRAPHY: Line Height ─── */
  --lh-tight:            1.2;
  --lh-snug:             1.4;
  --lh-normal:           1.7;
  --lh-relaxed:          1.8;

  /* ─── SPACING (8px base scale) ─── */
  --space-2xs:           0.25rem;   /* 4px */
  --space-xs:            0.5rem;    /* 8px */
  --space-sm:            0.75rem;   /* 12px */
  --space-md:            1rem;      /* 16px */
  --space-lg:            1.5rem;    /* 24px */
  --space-xl:            2rem;      /* 32px */
  --space-2xl:           3rem;      /* 48px */
  --space-3xl:           4rem;      /* 64px */
  --space-4xl:           6rem;      /* 96px */
  --space-section:       clamp(3rem, 8vw, 6rem);

  /* ─── BORDER RADIUS ─── */
  --radius-xs:           2px;
  --radius-sm:           4px;
  --radius-md:           8px;
  --radius-lg:           16px;
  --radius-xl:           24px;
  --radius-full:         9999px;

  /* ─── SHADOWS ─── */
  --shadow-sm:           0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md:           0 4px 12px rgba(0, 0, 0, 0.10);
  --shadow-lg:           0 8px 30px rgba(0, 0, 0, 0.12);
  --shadow-xl:           0 16px 48px rgba(0, 0, 0, 0.16);

  /* ─── TRANSITIONS ─── */
  --ease-default:        cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast:     150ms var(--ease-default);
  --transition-base:     300ms var(--ease-default);
  --transition-slow:     500ms var(--ease-default);

  /* ─── LAYOUT ─── */
  --container-max:       1200px;
  --container-padding:   var(--space-lg);

  /* ─── BREAKPOINTS (convention — CSS vars can't be used in @media) ───
     Desktop-lg:  1279px   — Large screens, product hero, gallery
     Desktop:      960px   — Small desktop / large tablet landscape
     Tablet:       768px   — Tablet portrait (primary responsive tier)
     Mobile:       520px   — Mobile
     Small:        480px   — Small phone (iPhone SE / compact)
     ─ Supplementary (specific use cases only) ─
     Tablet-lg:   1023px   — Utility visibility (hide-tablet class)
     Tiny:         380px   — Ultra-small screens (hero text only)
     ──────────────────────────────────────────────────────────────── */
}