/* ==========================================================================
   tokens.css — the design system for Lacquer & Bloom
   Every colour, font and size used on the site is defined here, once.
   Change a value here and it updates everywhere.
   ========================================================================== */

:root {
  /* ---- Colours: cream and blush, cocoa text, a classic rosewood polish ---- */
  --color-cream:       #F7F1EC;   /* page background */
  --color-blush:       #EFD9D3;   /* soft panels and sections */
  --color-white:       #FFFFFF;   /* cards */
  --color-cocoa:       #3A2A24;   /* main text, headings, footer */
  --color-ink-soft:    #6B5650;   /* secondary text (6:1 on cream) */
  --color-rosewood:    #9E3446;   /* buttons, links, highlights (6:1 on cream) */
  --color-rosewood-deep: #7E2536; /* button hover */
  --color-champagne:   #C9A77C;   /* decoration only on light backgrounds; text only on cocoa */
  --color-line:        #E2D3CB;   /* borders and dividers */

  /* ---- Fonts ---- */
  --font-display: "Gloock", Georgia, serif;                         /* headings */
  --font-body:    "Figtree", "Segoe UI", system-ui, sans-serif;      /* text, buttons, menu */

  /* ---- Type sizes (fluid: grow smoothly from phone to desktop) ---- */
  --text-sm:   0.9rem;
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg:   clamp(1.15rem, 1rem + 0.6vw, 1.4rem);
  --text-xl:   clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
  --text-2xl:  clamp(2.2rem, 1.5rem + 3vw, 3.8rem);
  --text-hero: clamp(2.6rem, 1.6rem + 4vw, 5rem);

  /* ---- Spacing scale ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --space-6: 4rem;
  --space-7: 6rem;
  --section-pad: clamp(4rem, 3rem + 5vw, 8rem);

  /* ---- Layout ---- */
  --container: 1200px;
  --container-narrow: 760px;
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
  --header-height: 80px;

  /* ---- Shape & motion ---- */
  --radius-sm: 4px;
  --radius-md: 12px;
  --radius-oval: 50% / 42%;   /* the soft oval photo frame */
  --shadow-soft: 0 16px 40px -16px rgba(58, 42, 36, 0.28);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration: 0.9s;
}