/* ==========================================================================
   Queenie-B Honey — Design Tokens
   Base unit: 1rem = 10px (see html { font-size: 62.5% } in base.css),
   so every rem value below reads directly as its px equivalent / 10.
   ========================================================================== */

:root {

  /* ---- Color: pure white & gold luxury palette (no cream tones) ---------- */
  --color-stone: #FFFFFF;          /* page background — pure white */
  --color-cream: #FFFFFF;          /* alt section bg — pure white, distinguished by a gold hairline (see .section--cream) */
  --color-honey-mist: #FFFFFF;     /* secondary editorial section bg — pure white, gold hairline */

  --color-ink: #17130F;            /* primary text / headings */
  --color-ink-soft: #5C5248;       /* secondary / muted copy */
  --color-ink-faint: #9C9186;      /* placeholder, fine print */
  --color-charcoal: #131009;       /* dark sections: footer, overlays */

  --color-accent: #F3A712;         /* brand accent — stunning gold, CTAs, links */
  --color-accent-dark: #C4820A;    /* accent hover / pressed */
  --color-accent-pale: #FFEAB0;    /* badge fills, subtle highlight (gold, not cream) */
  --color-accent-bright: #FFC933;  /* small high-energy accents: dots, underlines */
  --color-highlight: #FFE566;      /* light, clear yellow — callout/highlight box fills (not pale/muted) */

  --color-line: #EFE2C0;           /* default hairline border — soft gold, not cream */
  --color-line-strong: #E3B94A;    /* emphasized border: section dividers, focus, active tab */

  --color-white: #FFFFFF;
  --color-error: #9C4A3A;          /* muted brick — validation only */
  --color-success: #5C6E3F;        /* muted olive — confirmation only */

  /* ---- Typography --------------------------------------------------------*/
  --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-sans: 'Inter', 'Helvetica Neue', Arial, sans-serif;

  --text-2xs: 1.2rem;   /* legal fine print, meta timestamps */
  --text-xs: 1.3rem;    /* nav links, badges, eyebrow labels */
  --text-sm: 1.5rem;    /* buttons, small UI text */
  --text-base: 1.7rem;  /* body copy */
  --text-md: 2.0rem;    /* lead paragraphs, product card names */
  --text-story: 1.8rem; /* editorial/chapter lead paragraphs (our-story etc.) */
  --text-lg: 2.6rem;    /* card / H4 titles */
  --text-xl: 3.4rem;    /* H3 */
  --text-2xl: 4.4rem;   /* H2 / section headers */
  --text-3xl: 5.6rem;   /* H1 / page titles */
  --text-display: clamp(4.4rem, 9vw, 8rem); /* homepage hero display */

  --leading-tight: 1.2;    /* display / H1 */
  --leading-snug: 1.35;    /* H2 - H4 */
  --leading-normal: 1.5;   /* UI text */
  --leading-relaxed: 1.65; /* body paragraphs */
  --leading-loose: 1.7;    /* long-form editorial (Our Story chapters) */

  --tracking-tight: -0.01em;  /* large serif display */
  --tracking-normal: 0;
  --tracking-wide: 0.05rem;   /* all-caps nav / buttons */
  --tracking-wider: 0.1rem;   /* tiny eyebrow labels */

  /* ---- Spacing scale ------------------------------------------------------*/
  --space-1: 0.4rem;
  --space-2: 0.8rem;
  --space-3: 1.2rem;
  --space-4: 1.6rem;
  --space-5: 2.4rem;
  --space-6: 3.2rem;
  --space-7: 4.8rem;
  --space-8: 6.4rem;
  --space-9: 9.6rem;
  --space-10: 12.8rem;

  --section-pad: clamp(6.4rem, 9vw, 9.6rem);      /* vertical section rhythm */
  --section-pad-lg: clamp(8rem, 11vw, 12.8rem);    /* hero / major breaks */

  /* ---- Container / layout --------------------------------------------------*/
  --container-max: 144rem;
  --container-pad: clamp(2.6rem, 4vw, 6.2rem);
  --grid-gap: clamp(1.6rem, 2vw, 3.2rem);

  /* ---- Borders / radius -----------------------------------------------------*/
  --border-thin: 0.1rem;
  --border-thick: 0.2rem;
  --radius-none: 0;
  --radius-sm: 0.2rem;
  --radius-pill: 999rem;

  /* ---- Shadow (used sparingly — flat, editorial) -----------------------------*/
  --shadow-sm: 0 0.2rem 0.8rem rgba(30, 23, 18, 0.06);
  --shadow-md: 0 0.8rem 3.2rem rgba(30, 23, 18, 0.10);

  /* ---- Transitions ------------------------------------------------------------*/
  --ease-primary: cubic-bezier(.19, 1, .22, 1);
  --duration-slow: 0.8s;
  --duration-base: 0.3s;
  --duration-fast: 0.15s;

  /* ---- Z-index ------------------------------------------------------------------*/
  --z-nav: 100;
  --z-drawer: 200;
  --z-modal: 300;
  --z-toast: 400;
  --z-chatbot: 450;
  --z-preloader: 500;
}

/* Breakpoints (documented — custom properties can't be interpolated into
   @media queries, so apply these literal px values consistently by hand):
     480px   phones landscape / large phones
     768px   tablet portrait
     1024px  tablet landscape / small laptop
     1440px  desktop (container max)
     1920px  large desktop                                                    */