/* ============================================
   L'Antic Casino Restaurant — Design Tokens
   ============================================ */

:root {
  /* ── Color Palette ───────────────────────── */
  --color-primary:        #722F37;   /* Burgundy / Wine              */
  --color-primary-dark:   #5A1F27;   /* Deeper burgundy              */
  --color-primary-light:  #8E4A52;   /* Lighter burgundy             */

  --color-secondary:      #C9A96E;   /* Warm gold                    */
  --color-secondary-dark: #A88B4A;   /* Antique gold                 */
  --color-secondary-light:#E0CDA0;   /* Pale gold                    */

  --color-accent:         #6B7B5E;   /* Olive / Sage                 */
  --color-accent-light:   #8A9A7E;   /* Light sage                   */

  --color-cream:          #FDF8F0;   /* Warm ivory background        */
  --color-cream-dark:     #F5EDE0;   /* Slightly darker cream        */
  --color-white:          #FFFFFF;
  --color-black:          #1A1A1A;

  --color-text:           #2C2C2C;   /* Main body text               */
  --color-text-light:     #5A5A5A;   /* Muted / secondary text       */
  --color-text-inverse:   #FAFAFA;   /* Text on dark backgrounds     */

  --color-border:         #E0D6C8;   /* Subtle warm border           */
  --color-border-dark:    #C4B8A8;   /* Stronger border              */

  --color-success:        #4A7C59;
  --color-error:          #C0392B;
  --color-warning:        #D4A017;

  /* ── Typography ──────────────────────────── */
  --font-heading:  'Playfair Display', 'Georgia', 'Times New Roman', serif;
  --font-body:     'Lato', 'Helvetica Neue', Arial, sans-serif;
  --font-accent:   'Cormorant Garamond', 'Georgia', serif;

  --fs-xs:    0.75rem;    /* 12px */
  --fs-sm:    0.875rem;   /* 14px */
  --fs-base:  1rem;       /* 16px */
  --fs-md:    1.125rem;   /* 18px */
  --fs-lg:    1.25rem;    /* 20px */
  --fs-xl:    1.5rem;     /* 24px */
  --fs-2xl:   2rem;       /* 32px */
  --fs-3xl:   2.5rem;     /* 40px */
  --fs-4xl:   3rem;       /* 48px */
  --fs-5xl:   3.75rem;    /* 60px */

  --fw-light:     300;
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;

  --lh-tight:    1.2;
  --lh-normal:   1.6;
  --lh-relaxed:  1.8;

  --ls-tight:   -0.02em;
  --ls-normal:   0;
  --ls-wide:     0.05em;
  --ls-wider:    0.1em;
  --ls-widest:   0.2em;

  /* ── Spacing ─────────────────────────────── */
  --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 */
  --space-32:  8rem;      /* 128px */

  /* ── Layout ──────────────────────────────── */
  --max-width:     1200px;
  --max-width-sm:   640px;
  --max-width-md:   768px;
  --max-width-lg:   1024px;
  --max-width-xl:  1280px;

  --container-padding: var(--space-6);

  /* ── Borders & Radius ────────────────────── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-full: 9999px;

  --border-thin:   1px solid var(--color-border);
  --border-medium: 2px solid var(--color-border);

  /* ── Shadows ─────────────────────────────── */
  --shadow-sm:   0 1px 3px  rgba(0,0,0,0.06), 0 1px 2px   rgba(0,0,0,0.04);
  --shadow-md:   0 4px 6px  rgba(0,0,0,0.05), 0 2px 4px   rgba(0,0,0,0.03);
  --shadow-lg:   0 10px 25px rgba(0,0,0,0.08), 0 4px 10px  rgba(0,0,0,0.04);
  --shadow-xl:   0 20px 40px rgba(0,0,0,0.10), 0 8px 16px  rgba(0,0,0,0.05);
  --shadow-glow:  0 0 30px   rgba(201,169,110,0.15);

  /* ── Transitions ─────────────────────────── */
  --ease-out:    cubic-bezier(0.33, 1, 0.68, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast:   150ms;
  --duration-normal: 300ms;
  --duration-slow:   500ms;

  /* ── Z-index ─────────────────────────────── */
  --z-base:     1;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
}

/* ── Dark-section overrides (optional) ──── */
[data-theme="dark"] {
  --color-text:         #F0ECE4;
  --color-text-light:   #B8B0A4;
  --color-cream:        #1A1A1A;
  --color-cream-dark:   #222222;
  --color-border:       #3A3A3A;
}