/* ==========================================================================
   LCNYC Order App – Design Tokens
   Derived from: media/design/LCNYC_Menu 2.pdf
   
   Token layers:
   1. Raw tokens      → exact values
   2. Semantic tokens  → meaning-based aliases
   3. Component tokens → reusable component decisions
   ========================================================================== */

:root {

  /* ──────────────────────────────────────────
     1. RAW COLOR TOKENS
     ────────────────────────────────────────── */

  --raw-black: #111111;
  --raw-near-black: #1a1a1a;
  --raw-charcoal: #2a2a2a;
  --raw-white: #ffffff;
  --raw-off-white: #f3f1eb;
  --raw-paper: #ece9e2;
  --raw-warm-gray: #d6d1c9;
  --raw-mid-gray: #9a9590;

  --raw-red: #b10f14;
  --raw-red-dark: #8e0c10;
  --raw-gold: #c7a64a;
  --raw-gold-dark: #a8893a;
  --raw-yellow: #d9c54a;
  --raw-green: #4d8b57;
  --raw-green-dark: #3a6b42;
  --raw-pink: #dcb7c8;
  --raw-lilac: #b897c6;

  /* ──────────────────────────────────────────
     2. SEMANTIC COLOR TOKENS
     ────────────────────────────────────────── */

  /* backgrounds */
  --color-bg-app: #ece9e2;
  --color-bg-paper: #f3f1eb;
  --color-bg-surface: #f7f5f0;
  --color-bg-elevated: #ffffff;
  --color-bg-contrast: #111111;
  --color-bg-contrast-soft: #1a1a1a;

  /* text */
  --color-text-primary: #111111;
  --color-text-secondary: rgba(17, 17, 17, 0.72);
  --color-text-muted: rgba(17, 17, 17, 0.48);
  --color-text-inverse: #ffffff;
  --color-text-inverse-muted: rgba(255, 255, 255, 0.64);

  /* brand accents */
  --color-brand-red: #b10f14;
  --color-brand-red-hover: #8e0c10;
  --color-brand-gold: #c7a64a;
  --color-brand-gold-hover: #a8893a;
  --color-brand-yellow: #d9c54a;
  --color-brand-green: #4d8b57;
  --color-brand-green-hover: #3a6b42;
  --color-brand-pink: #dcb7c8;
  --color-brand-lilac: #b897c6;

  /* borders */
  --color-border-subtle: rgba(17, 17, 17, 0.10);
  --color-border-medium: rgba(17, 17, 17, 0.18);
  --color-border-strong: rgba(17, 17, 17, 0.28);
  --color-border-inverse: rgba(255, 255, 255, 0.12);

  /* feedback / status */
  --color-success: #4d8b57;
  --color-success-bg: rgba(77, 139, 87, 0.10);
  --color-warning: #a06a12;
  --color-warning-bg: rgba(160, 106, 18, 0.10);
  --color-danger: #b10f14;
  --color-danger-bg: rgba(177, 15, 20, 0.10);
  --color-info: #3a6b8a;
  --color-info-bg: rgba(58, 107, 138, 0.10);

  /* ──────────────────────────────────────────
     3. TYPOGRAPHY TOKENS
     ────────────────────────────────────────── */

  /* font families */
  --font-family-display: "Oswald", "Arial Narrow", Arial, sans-serif;
  --font-family-heading: "Bebas Neue", "Oswald", "Arial Narrow", sans-serif;
  --font-family-body: "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-family-accent: "Amatic SC", "Patrick Hand", cursive;

  /* font sizes */
  --font-size-2xs: 0.6875rem;   /* 11px */
  --font-size-xs: 0.75rem;      /* 12px */
  --font-size-sm: 0.875rem;     /* 14px */
  --font-size-md: 1rem;         /* 16px */
  --font-size-lg: 1.125rem;     /* 18px */
  --font-size-xl: 1.5rem;       /* 24px */
  --font-size-2xl: 2rem;        /* 32px */
  --font-size-3xl: 2.5rem;      /* 40px */
  --font-size-4xl: 3.5rem;      /* 56px */
  --font-size-5xl: 4.5rem;      /* 72px */

  /* font weights */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-black: 900;

  /* line heights */
  --line-height-tight: 1.05;
  --line-height-snug: 1.2;
  --line-height-normal: 1.45;
  --line-height-relaxed: 1.65;

  /* letter spacing */
  --letter-spacing-tight: -0.02em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.04em;
  --letter-spacing-display: 0.08em;

  /* ──────────────────────────────────────────
     4. SPACING TOKENS (4px base rhythm)
     ────────────────────────────────────────── */

  --space-0: 0;
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */

  /* ──────────────────────────────────────────
     5. RADIUS TOKENS
     ────────────────────────────────────────── */

  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-pill: 999px;

  /* ──────────────────────────────────────────
     6. SHADOW TOKENS
     ────────────────────────────────────────── */

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.10);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.14);
  --shadow-xl: 0 24px 56px rgba(0, 0, 0, 0.18);
  --shadow-contrast: 0 12px 32px rgba(0, 0, 0, 0.28);

  /* ──────────────────────────────────────────
     7. MOTION TOKENS
     ────────────────────────────────────────── */

  --transition-fast: 120ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;
  --transition-panel: 240ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ──────────────────────────────────────────
     8. LAYOUT TOKENS
     ────────────────────────────────────────── */

  --container-xs: 420px;
  --container-sm: 640px;
  --container-md: 960px;
  --container-lg: 1200px;
  --container-xl: 1400px;

  --header-height: 64px;
  --header-height-mobile: 56px;
  --topbar-height: 80px;

  /* ──────────────────────────────────────────
     9. COMPONENT TOKENS
     ────────────────────────────────────────── */

  /* buttons */
  --button-height: 48px;
  --button-height-sm: 36px;
  --button-height-lg: 56px;
  --button-padding-x: var(--space-6);
  --button-radius: var(--radius-md);
  --button-font-family: var(--font-family-display);
  --button-font-weight: var(--font-weight-semibold);
  --button-letter-spacing: var(--letter-spacing-wide);

  /* inputs */
  --input-height: 48px;
  --input-padding-x: var(--space-4);
  --input-radius: var(--radius-md);
  --input-border-color: var(--color-border-medium);
  --input-focus-color: var(--color-brand-red);

  /* cards */
  --card-padding: var(--space-5);
  --card-radius: var(--radius-lg);
  --card-shadow: var(--shadow-sm);
  --card-border: 1px solid var(--color-border-subtle);

  /* badges / tags */
  --badge-height: 24px;
  --badge-padding-x: var(--space-2);
  --badge-radius: var(--radius-sm);
  --badge-font-size: var(--font-size-2xs);

  /* modal */
  --modal-radius: var(--radius-xl);
  --modal-shadow: var(--shadow-xl);
  --modal-backdrop: rgba(17, 17, 17, 0.5);

  /* section spacing */
  --section-gap: var(--space-10);
  --section-gap-lg: var(--space-16);

  /* menu item */
  --menu-item-image-ratio: 4 / 3;
  --menu-item-image-height: 180px;

  /* z-index scale */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-header: 300;
  --z-overlay: 400;
  --z-modal: 500;
  --z-toast: 600;
  --z-spinner: 700;
}