:root {
  /* ------------------------------------------------------------ */
  /* MATERIAL DESIGN 3 ? UNIFIED TOKEN SYSTEM                     */
  /* Single source of truth for all colors, typography, spacing   */
  /* ------------------------------------------------------------ */

  /* Primary ? IPOO Orange (checkout-button palette — single source of truth) */
  --md-primary: #ff4d00;
  --pri: var(--md-primary); /* alias: catches any future --pri typo in inline styles */
  --md-primary-dark: #e8500a;
  --md-primary-light: #ff6a1a;
  --md-on-primary: #FFFFFF;
  --md-primary-container: #FFDBCF;
  --md-on-primary-cont: #3A0B00;
  --md-primary-hover: color-mix(in srgb, var(--md-primary-dark) 85%, black);
  --md-primary-active: color-mix(in srgb, var(--md-primary-dark) 70%, black);
  --md-primary-disabled: rgba(255, 77, 0, 0.38);
  --md-primary-focus-ring: rgba(255, 77, 0, 0.12);

  /* Secondary */
  --md-secondary: #785650;
  --md-on-secondary: #FFFFFF;
  --md-secondary-container: #FFDAD5;

  /* Tertiary */
  --md-tertiary: #9A6B3D;
  --md-on-tertiary: #FFFFFF;
  --md-tertiary-container: #FFE0BA;

  /* Surface / Background (canonical warm cream) */
  --app-bg: #FFF8F6;
  --splash-bg: #0D0600;
  --md-surface: #FFF8F6;
  --md-surface-1: #FEF1EE;
  --md-surface-2: #FDECEA;
  --md-surface-3: #FDEAE6;
  --md-surface-4: #FCE7E3;
  --md-surface-5: #FCE5E0;
  --card-bg: #FFFFFF;
  --md-on-surface: #1C0E06;
  --md-on-surface-var: #857370;
  --md-surface-hover: #f5ede5;
  --md-surface-active: #ebe4db;

  /* Error & Success */
  --md-error: #B3261E;
  --md-on-error: #FFFFFF;
  --md-error-container: #F9DEDC;
  --md-on-error-container: #410E0B;
  --md-success: #386A20;

  /* Outline & Dividers */
  --md-outline: #A08E88;
  --md-outline-var: #D8C8C3;

  /* Shape tokens */
  --md-shape-xs: 4px;
  --md-shape-sm: 8px;
  --md-shape-md: 12px;
  --md-shape-lg: 16px;
  --md-shape-xl: 28px;
  --md-shape-full: 999px;

  /* Typography / Font Family */
  --font-handwriting: 'Satisfy', cursive;
  --font-editorial: 'Instrument Serif', serif;
  --font-display: 'Google Sans Display', 'Google Sans', Roboto, sans-serif;
  --font-numeric: 'Google Sans Display', 'Google Sans', Roboto, sans-serif;
  --font-body: 'DM Sans', 'Google Sans', Roboto, sans-serif;

  /* Motion */
  --md-duration-short: 200ms;
  --md-duration-medium: 300ms;
  --md-duration-long: 400ms;
  --md-easing: cubic-bezier(0.2, 0, 0, 1);
  --md-easing-emph: cubic-bezier(0.3, 0, 0, 1);
  --md-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --md-easing-emphasized-decel: cubic-bezier(0.05, 0.7, 0.1, 1);

  /* ------------------------------------------------------------ */
  /* LEGACY ALIASES (for backward compatibility)                 */
  /* These map old token names to new M3 standard names            */
  /* ------------------------------------------------------------ */

  --cream: var(--md-surface);
  --white: var(--md-surface);
  --surface: var(--md-surface);
  --surface-2: var(--md-surface-1);

  --orange: var(--md-primary);
  --pri: var(--md-primary);
  --orange-light: var(--md-primary-light);
  --orange-pale: var(--md-primary-container);
  --orange-container: var(--md-primary-container);
  --orange-dim: rgba(255, 77, 0, 0.08);

  --black: #0D0600;
  --ink: var(--md-on-surface);
  /* Typography & spacing tokens (upgrade #7) */
  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 15px;
  --text-lg: 18px;
  --text-xl: 22px;
  --price-size: 20px;
  --price-currency-size: 12px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --ink2: #180D05;
  --mid: #6E5D59;
  --muted: var(--md-on-surface-var);
  --fog: var(--md-surface-1);

  --border: rgba(120, 75, 40, 0.12);
  --success: #1B8A4B;
  --success-light: #E8F7EE;

  /* Radii */
  --radius: 20px;
  --radius-sm: var(--md-shape-sm);
  --radius-xs: var(--md-shape-xs);
  --radius-full: var(--md-shape-full);

  /* Additional legacy aliases for components using short tokens */
  --sur: var(--md-surface);
  --sur2: var(--md-surface-1);
  --sur3: var(--md-surface-2);
  --out: var(--md-outline);
  --out-var: var(--md-outline-var);
  --pri-lt: var(--md-primary-container);
  --pri-dk: var(--md-primary-dark);
  --dur: var(--md-duration-medium);
  --r8: var(--md-shape-sm);
  --r12: var(--md-shape-md);
  --r16: var(--md-shape-lg);
  --rpill: var(--radius-full);
  --e1: var(--shadow-sm);
  --e2: var(--shadow-md);
  --e3: var(--shadow-lg);
  --suc: var(--success);
  --suc-lt: var(--success-light);
  --err: var(--md-error);
  --err-lt: var(--md-error-container);
  --on-sur3: var(--md-on-surface-var);

  /* Elevation / Shadows */
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-nav: 0 -1px 0 rgba(0, 0, 0, 0.06), 0 -2px 8px rgba(0, 0, 0, 0.06);

  /* Layout */
  --nav-h: 56px;
  --header-h: 68px;

  /* ------------------------------------------------------------ */
  /* PHASE 2: SPACING, SHADOWS, STATES & COMPONENT TOKENS        */
  /* ------------------------------------------------------------ */

  /* Spacing / Scale System (8px base unit) */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 40px;
  --spacing-3xl: 48px;

  --gap-xs: var(--spacing-xs);
  --gap-sm: var(--spacing-sm);
  --gap-md: var(--spacing-md);
  --gap-lg: var(--spacing-lg);

  /* Shadow / Elevation Scale (using dark ink rgba) */
  --shadow-sm: 0 1px 2px rgba(28, 14, 6, 0.05);
  --shadow-md: 0 2px 8px rgba(28, 14, 6, 0.08);
  --shadow-lg: 0 12px 24px rgba(28, 14, 6, 0.12);
  --shadow-xl: 0 20px 40px rgba(28, 14, 6, 0.15);

  --elevation-sm: var(--shadow-sm);
  --elevation-md: var(--shadow-md);
  --elevation-lg: var(--shadow-lg);
  --elevation-xl: var(--shadow-xl);

  /* Component-Specific Button Tokens */
  --button-primary-bg: var(--md-primary);
  --button-primary-text: var(--md-on-primary);
  --button-primary-hover: var(--md-primary-hover);
  --button-primary-active: var(--md-primary-active);
  --button-primary-disabled: var(--md-primary-disabled);

  --button-secondary-bg: var(--md-surface-1);
  --button-secondary-text: var(--md-on-surface);
  --button-secondary-hover: var(--md-surface-hover);
  --button-secondary-active: var(--md-surface-active);

  --button-disabled-bg: var(--md-surface-2);
  --button-disabled-text: var(--md-on-surface-var);

  --button-padding-sm: var(--spacing-sm) var(--spacing-md);
  --button-padding-md: var(--spacing-md) var(--spacing-lg);

  /* Component-Specific Input Tokens */
  --input-bg: var(--md-surface-1);
  --input-text: var(--md-on-surface);
  --input-border: var(--border);
  --input-border-hover: var(--md-outline);
  --input-focus-border: var(--md-primary);
  --input-focus-ring: var(--md-primary-focus-ring);
  --input-placeholder: var(--md-on-surface-var);
  --input-disabled-bg: var(--md-surface-2);
  --input-disabled-text: var(--md-on-surface-var);
  --input-padding: var(--spacing-sm) var(--spacing-md);
  --input-padding-lg: var(--spacing-md) var(--spacing-lg);

  /* Component-Specific Card Tokens */
  --card-bg: var(--md-surface-1);
  --card-text: var(--md-on-surface);
  --card-shadow: var(--shadow-sm);
  --card-hover-shadow: var(--shadow-md);
  --card-padding: var(--spacing-md);
  --card-radius: var(--radius-sm);
  --card-border: var(--border);

  /* Component-Specific Chip Tokens */
  --chip-bg: var(--md-surface-2);
  --chip-text: var(--md-on-surface);
  --chip-padding: var(--spacing-sm) var(--spacing-md);
  --chip-radius: var(--radius-full);
  --chip-selected-bg: var(--md-primary-container);
  --chip-selected-text: var(--md-on-surface);

  /* Component-Specific Badge Tokens */
  --badge-success-bg: rgba(27, 138, 75, 0.08);
  --badge-success-text: var(--success);
  --badge-error-bg: rgba(197, 25, 45, 0.08);
  --badge-error-text: #C5192D;
  --badge-pending-bg: rgba(255, 185, 0, 0.08);
  --badge-pending-text: #FFB900;
}