/*
 * Amatos Liquor Mart — Design Tokens
 * Source: design/brand-toolkit/tokens.css
 */

:root {
  /* Colours — Core Palette */
  --color-primary: #F5B800;
  --color-primary-hover: #E5A800;
  --color-primary-active: #D49900;
  --color-secondary: #1A1A1A;
  --color-secondary-hover: #333333;
  --color-accent: #F3641A;
  --color-brand-red: #CC0000;

  /* Colours — Semantic */
  --color-success: #2D6A2D;
  --color-success-bg: #F0F9F0;
  --color-warning: #8B6914;
  --color-warning-bg: #FFF8E6;
  --color-error: #8B1A1A;
  --color-error-bg: #FEF2F2;
  --color-info: #1A4D8B;
  --color-info-bg: #EFF6FF;

  /* Colours — Surfaces & Backgrounds */
  --color-background: #FFFFFF;
  --color-surface: #FFFFFF;
  --color-surface-elevated: #FAFAFA;
  --color-surface-sunken: #F5F5F5;

  /* Colours — Borders */
  --color-border: #E0E0E0;
  --color-border-strong: #BDBDBD;
  --color-border-focus: #F5B800;

  /* Colours — Text */
  --color-text-primary: #1A1A1A;
  --color-text-secondary: #666666;
  --color-text-disabled: #BDBDBD;
  --color-text-inverse: #FFFFFF;
  --color-text-link: #1A1A1A;

  /* Typography — Font Families */
  --font-primary: 'League Spartan', sans-serif;
  --font-body: 'Inter', 'Helvetica Neue', Arial, sans-serif;

  /* Typography — Type Scale */
  --text-h1: 2.5rem;
  --leading-h1: 1.2;
  --text-h2: 2rem;
  --leading-h2: 1.25;
  --text-h3: 1.5rem;
  --leading-h3: 1.3;
  --text-h4: 1.25rem;
  --leading-h4: 1.35;
  --text-body-lg: 1.125rem;
  --leading-body-lg: 1.6;
  --text-body: 1rem;
  --leading-body: 1.6;
  --text-body-sm: 0.875rem;
  --leading-body-sm: 1.5;
  --text-caption: 0.75rem;
  --leading-caption: 1.4;

  /* Spacing — 8px Base Scale */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  /* Elevation */
  --elevation-1: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
  --elevation-2: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
  --elevation-3: 0 10px 15px rgba(0, 0, 0, 0.10), 0 4px 6px rgba(0, 0, 0, 0.05);

  /* Transitions */
  --transition-fast: 100ms ease;
  --transition-default: 200ms ease;
  --transition-slow: 300ms ease;

  /* Grid */
  --grid-max-width: 1200px;
}