/* ==========================================================================
   Design tokens
   Source of truth for the design system (was the inline tailwind.config
   block in index.html). All other stylesheets read from these custom
   properties instead of hard-coding values.
   ========================================================================== */

:root {
  /* ---- Colors --------------------------------------------------------- */
  --color-surface: #fff8f3;
  --color-on-error: #ffffff;
  --color-surface-container-low: #fff2e2;
  --color-on-tertiary-fixed-variant: #653d1e;
  --color-secondary-container: #fed65b;
  --color-parchment-light: #f5e6d3;
  --color-on-primary: #ffffff;
  --color-surface-container-high: #f5e6d3;
  --color-surface-bright: #fff8f3;
  --color-primary: #26170c;
  --color-on-tertiary-container: #bf8c66;
  --color-secondary-fixed-dim: #e9c349;
  --color-outline-variant: #d2c4bc;
  --color-cocoa-dark: #3d2b1f;
  --color-on-surface: #221a0f;
  --color-inverse-on-surface: #feefdb;
  --color-on-secondary-fixed-variant: #574500;
  --color-primary-fixed: #fbddca;
  --color-error-container: #ffdad6;
  --color-surface-tint: #705a4c;
  --color-secondary-fixed: #ffe088;
  --color-caramel-accent: #8b5e3c;
  --color-on-secondary-fixed: #241a00;
  --color-on-error-container: #93000a;
  --color-surface-dim: #e6d8c5;
  --color-surface-container: #fbecd9;
  --color-surface-container-lowest: #ffffff;
  --color-background: #fff8f3;
  --color-on-primary-fixed-variant: #574335;
  --color-metallic-gold: #d4af37;
  --color-on-primary-fixed: #28180d;
  --color-on-secondary-container: #745c00;
  --color-tertiary-fixed: #ffdcc5;
  --color-inverse-surface: #372f22;
  --color-on-background: #221a0f;
  --color-on-secondary: #ffffff;
  --color-surface-variant: #efe0cd;
  --color-on-tertiary: #ffffff;
  --color-on-surface-variant: #4f453f;
  --color-surface-container-highest: #efe0cd;
  --color-primary-container: #3d2b1f;
  --color-secondary: #735c00;
  --color-tertiary-fixed-dim: #f4bb92;
  --color-outline: #81756e;
  --color-primary-fixed-dim: #dec1af;
  --color-tertiary-container: #492609;
  --color-error: #ba1a1a;
  --color-on-tertiary-fixed: #301400;
  --color-tertiary: #2e1300;
  --color-inverse-primary: #dec1af;
  --color-on-primary-container: #ac9181;

  /* Frequently used translucent variants (pre-mixed for browser support) */
  --color-surface-90: rgba(255, 248, 243, 0.9);
  --color-primary-80: rgba(38, 23, 12, 0.8);
  --color-primary-20: rgba(38, 23, 12, 0.2);
  --color-primary-0: rgba(38, 23, 12, 0);
  --color-cocoa-dark-10: rgba(61, 43, 31, 0.1);

  /* ---- Radius ----------------------------------------------------------- */
  --radius-default: 0.125rem;
  --radius-lg: 0.25rem;
  --radius-xl: 0.5rem;
  --radius-full: 0.75rem;

  /* ---- Spacing / grid ---------------------------------------------------- */
  --spacing-unit: 8px;
  --container-max: 1200px;
  --margin-mobile: 20px;
  --margin-desktop: 64px;
  --gutter: 16px;

  /* ---- Breakpoints (documentation only, media queries are hard-coded
     since custom properties cannot be used inside @media conditions) ---- */
  --breakpoint-md: 768px;
  --breakpoint-header-nav: 1150px;

  /* ---- Font families ---------------------------------------------------- */
  --font-headline-lg-mobile: "Libre Caslon Text", serif;
  --font-body-md: "Manrope", sans-serif;
  --font-label-sm: "Manrope", sans-serif;
  --font-display-lg: "Libre Caslon Text", serif;
  --font-slogan-script: "Playfair Display", serif;
  --font-headline-lg: "Libre Caslon Text", serif;

  /* ---- Type scale (size / line-height / letter-spacing / weight) ------- */
  --text-headline-lg-mobile-size: 28px;
  --text-headline-lg-mobile-lh: 36px;
  --text-headline-lg-mobile-ls: 0.05em;
  --text-headline-lg-mobile-fw: 400;

  --text-body-md-size: 16px;
  --text-body-md-lh: 24px;
  --text-body-md-fw: 400;

  --text-label-sm-size: 12px;
  --text-label-sm-lh: 16px;
  --text-label-sm-ls: 0.08em;
  --text-label-sm-fw: 600;

  --text-display-lg-size: 48px;
  --text-display-lg-lh: 56px;
  --text-display-lg-ls: 0.1em;
  --text-display-lg-fw: 700;

  --text-slogan-script-size: 24px;
  --text-slogan-script-lh: 32px;
  --text-slogan-script-fw: 400;

  --text-headline-lg-size: 32px;
  --text-headline-lg-lh: 40px;
  --text-headline-lg-ls: 0.05em;
  --text-headline-lg-fw: 400;

  /* ---- Motion ------------------------------------------------------------ */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 150ms;
  --duration-base: 300ms;
  --duration-slow: 500ms;
  --duration-slower: 700ms;
}