/* tokens.css: Carabao storefront
   Primitive design tokens. Palette redirected from the original monochrome
   spec by client brief (luxurious black / red / yellow, 2026-11-11); token
   architecture unchanged. Components must consume these via semantic aliases
   in main.css: never raw values in component rules. */

:root {
  /* Typography: Cormorant Garamond carries display, Montserrat carries UI */
  --font-family-display: "Cormorant Garamond", "Times New Roman", serif;
  --font-family-primary: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-size-base: 16px;
  --font-weight-base: 400;
  --font-line-height-base: 1.6;

  /* Type steps: nothing meant to be read sits below 13px */
  --text-sm: 13px;
  --text-md: 15px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-display-1: clamp(46px, 6.5vw, 92px);  /* hero */
  --text-display-2: clamp(34px, 4vw, 54px);    /* sections */

  /* Colour: layered lacquer blacks, bone ink, red action, gilt yellow */
  --color-black-950: #070605;
  --color-black-900: #0d0b0a;
  --color-black-800: #151210;
  --color-black-700: #1e1a16;
  --color-bone: #f2ede3;
  --color-bone-muted: #a39a8b;
  --color-red: #c8102e;
  --color-red-deep: #9d0c24;
  --color-red-bright: #e5484d;   /* error text on black: ≥4.5:1 */
  --color-yellow: #eeb32c;
  --color-line: #3a332b;         /* form-field borders only */

  /* Light-surface scope: alternating bone backdrops re-scope the semantic
     aliases in main.css; these primitives are their light-mode values. */
  --color-surface-light: #f2ede3;        /* the light backdrop (bone) */
  --color-surface-light-raised: #eae4d5; /* tonal fills on light */
  --color-surface-light-input: #faf8f1;  /* inputs on light */
  --color-taupe-deep: #5f584c;           /* muted ink on light: ≥4.5:1 */
  --color-gold-deep: #7a5e0e;            /* gilt figures on light: ≥4.5:1 */
  --color-red-deep-text: #9d0c24;        /* error text on light: ≥4.5:1 */
  --color-line-light: #cfc6b3;           /* form-field borders on light */

  /* Spacing */
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 6px;
  --space-4: 7px;
  --space-5: 10px;
  --space-6: 10.4px;
  --space-7: 11px;
  --space-8: 12.8px;

  /* Radius: square corners, decided once; round exists for circles only */
  --radius-0: 0px;
  --radius-round: 50%;

  /* Shadow: reserved for what truly floats (menus); surfaces step tone */
  --shadow-float: rgba(0, 0, 0, 0.55) 0px 24px 48px 0px;

  /* Motion */
  --motion-instant: 100ms;
  --motion-fast: 150ms;
  --motion-normal: 200ms;
  --motion-slow: 250ms;
  --motion-slower: 300ms;
  --motion-step6: 450ms;
  --motion-gesture: 1400ms;      /* signature entrance moves */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}