/**
 * LoveMeGifting Design Tokens
 * Version: 1.0.0
 */

:root {
  /* ============================================
     Primary Palette
     ============================================ */
  --lmg-brown:    #9B7961;
  --lmg-cream:    #F5ECD9;
  --lmg-taupe:    #B5A89B;
  --lmg-burgundy: #5C1A1A;

  /* Extended Palette */
  --lmg-brown-dark:    #7A5F4C;
  --lmg-brown-light:   #B89A85;
  --lmg-cream-light:   #FBF6EA;
  --lmg-cream-dark:    #E8DCC4;
  --lmg-burgundy-dark: #3D0F0F;
  --lmg-burgundy-light:#7A2828;

  /* ============================================
     Neutrals (warm gray scale)
     ============================================ */
  --lmg-ink:   #2A1F18;
  --lmg-text:  #4A3A2E;
  --lmg-muted: #8A7864;
  --lmg-line:  #E2D5C0;
  --lmg-white: #FFFFFF;

  /* ============================================
     Semantic Colors
     ============================================ */
  --lmg-success: #5C7A4A;
  --lmg-warning: #C49B5D;
  --lmg-error:   #A23232;
  --lmg-info:    #6B7F8C;

  /* ============================================
     Typography
     ============================================ */
  --lmg-font-primary: 'IBM Plex Sans Thai', 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --lmg-font-mono:    'IBM Plex Mono', 'Courier New', monospace;

  /* Type Scale (Mobile-first) */
  --lmg-text-display: 40px;
  --lmg-text-h1:      32px;
  --lmg-text-h2:      26px;
  --lmg-text-h3:      22px;
  --lmg-text-h4:      18px;
  --lmg-text-body-lg: 18px;
  --lmg-text-body:    16px;
  --lmg-text-small:   14px;
  --lmg-text-caption: 12px;

  /* Line Heights */
  --lmg-leading-tight:   1.1;
  --lmg-leading-snug:    1.25;
  --lmg-leading-normal:  1.5;
  --lmg-leading-relaxed: 1.75;

  /* Letter Spacing */
  --lmg-tracking-tight:   -0.02em;
  --lmg-tracking-normal:  0;
  --lmg-tracking-wide:    0.05em;
  --lmg-tracking-widest:  0.15em;

  /* Font Weights */
  --lmg-fw-light:    300;
  --lmg-fw-normal:   400;
  --lmg-fw-medium:   500;
  --lmg-fw-semibold: 600;
  --lmg-fw-bold:     700;

  /* ============================================
     Spacing (8pt Grid)
     ============================================ */
  --lmg-space-1:  4px;
  --lmg-space-2:  8px;
  --lmg-space-3:  12px;
  --lmg-space-4:  16px;
  --lmg-space-5:  24px;
  --lmg-space-6:  32px;
  --lmg-space-8:  48px;
  --lmg-space-10: 64px;
  --lmg-space-12: 96px;
  --lmg-space-16: 128px;

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

  /* ============================================
     Shadows (warm-tinted)
     ============================================ */
  --lmg-shadow-xs: 0 1px 2px rgba(42, 31, 24, 0.05);
  --lmg-shadow-sm: 0 2px 8px rgba(42, 31, 24, 0.08);
  --lmg-shadow-md: 0 4px 16px rgba(42, 31, 24, 0.12);
  --lmg-shadow-lg: 0 12px 32px rgba(42, 31, 24, 0.16);
  --lmg-shadow-xl: 0 24px 64px rgba(42, 31, 24, 0.20);

  /* ============================================
     Layout
     ============================================ */
  --lmg-container-max:    1280px;
  --lmg-container-gutter: 16px;

  /* ============================================
     Transitions
     ============================================ */
  --lmg-transition-fast: 0.15s ease;
  --lmg-transition-base: 0.2s ease;
  --lmg-transition-slow: 0.3s ease;

  /* ============================================
     Z-Index Scale
     ============================================ */
  --lmg-z-base:     1;
  --lmg-z-dropdown: 100;
  --lmg-z-sticky:   200;
  --lmg-z-overlay:  300;
  --lmg-z-modal:    400;
  --lmg-z-toast:    500;
}

/* Desktop type scale */
@media (min-width: 768px) {
  :root {
    --lmg-text-display: 64px;
    --lmg-text-h1:      48px;
    --lmg-text-h2:      36px;
    --lmg-text-h3:      28px;
    --lmg-text-h4:      22px;
  }
}