/* ==========================================================================
   Mirage Furniture — Design Tokens
   Global, single source of truth for the muted, warm, editorial system.
   ========================================================================== */

:root {
  /* --- Fonts -------------------------------------------------------------
     Tenor Sans  -> logo + nav only (always UPPERCASE, generous tracking)
     Newsreader  -> headings + body copy (base text font)                 */
  --font-display: "Tenor Sans", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Newsreader", Georgia, "Times New Roman", serif;

  /* --- Letter spacing (tracking) --------------------------------------- */
  --tracking-wide: 0.25em;   /* logo + nav */
  --tracking-wider: 0.3em;

  /* --- Colors ------------------------------------------------------------
     Warm neutrals throughout: luxury furniture sites (Tribu, Dedon, Kettal)
     soften both ends of the scale, pure #000-on-#fff reads clinical next to
     the warm weave photography. The single bronze accent is reserved for
     primary CTAs and the quote count ONLY, never decoration.               */
  --color-text-primary: #211d18;   /* warm ink: headings / primary text     */
  --color-text-body: #5b5650;      /* warm grey body copy (light bg)        */
  --color-hairline: #ddd8d0;       /* warm hairlines / dividers             */
  --color-bg: #faf9f6;             /* warm paper, default section bg        */
  --color-bg-alt: #d9d8d0;         /* alternate (warm) section background   */
  --color-photo-bg: #efe9e1;       /* warm cream behind product photos (matches the studio backdrop) */
  /* Warm-tinted rather than a neutral grey: this was the one pure-neutral
     value in an otherwise entirely warm scale, and it read cold against the
     hero photography. */
  --color-pagination-inactive: #8f8880;
  --color-hero-text: #ffffff;      /* hero text (sits over dark imagery)    */
  --color-accent: #8a6d4a;         /* muted bronze, primary CTAs only       */
  --color-accent-dark: #74593b;    /* bronze hover state                    */
  /* Text selection band. Tinted from the paper background rather than left
     as the browser's system blue, which belongs to no design system. */
  --color-selection-bg: #e6dccd;
  /* Form error text. Was hard-coded identically in contact, trade and the
     quote drawer; a single value keeps the three forms speaking together. */
  --color-error: #9a2a2a;

  /* --- Spacing scale ---------------------------------------------------- */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 5rem;
  --space-7: 8rem;

  /* --- Type scale ------------------------------------------------------- */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.75rem;
  --text-2xl: 2.5rem;
  --text-3xl: 3.5rem;
  /* Hero heading: a touch smaller than a full display size so it never
     crowds the viewport edges. */
  --text-hero: clamp(2.25rem, 5.2vw, 4rem);

  /* --- Line heights ----------------------------------------------------- */
  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-normal: 1.6;

  /* --- Layout ----------------------------------------------------------- */
  --reading-width: 34rem;   /* constrained reading measure for paragraphs   */
  --nav-pad-x: clamp(1.5rem, 4vw, 4rem);
  --nav-pad-y: clamp(1.25rem, 2.5vw, 2.25rem);
}