/* ============================================
   PEI PADIMAR — Design Tokens
   ============================================ */

:root {
  /* --- Colors --- */
  --color-primary:        #ffffff;
  --color-primary-alt:    #f8fafc;
  --color-secondary:      #0f172a; /* Navy Blue for text/accents */
  --color-tertiary:       #1e293b;
  --color-accent:         #d97706; /* Warmer, brighter Amber/Gold for trust */
  --color-accent-hover:   #b45309;
  --color-accent-dark:    #92400e;

  --color-white:          #ffffff;
  --color-black:          #020617;
  --color-neutral-50:     #f8fafc;
  --color-neutral-100:    #f1f5f9;
  --color-neutral-200:    #e2e8f0;
  --color-neutral-300:    #cbd5e1;
  --color-neutral-400:    #94a3b8;
  --color-neutral-500:    #64748b;
  --color-neutral-600:    #475569;
  --color-neutral-700:    #334155;
  --color-neutral-800:    #1e293b;
  --color-neutral-900:    #0f172a;

  --color-success:        #059669;
  --color-warning:        #d97706;
  --color-error:          #dc2626;

  /* --- Typography --- */
  --font-primary:         'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:            'Roboto Mono', 'Courier New', monospace;
  --font-logo:            'Cinzel', serif;
  --font-serif:           'Playfair Display', 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-regular:           400;
  --fw-medium:            500;
  --fw-semibold:          600;
  --fw-bold:              700;
  --fw-extrabold:         800;

  --lh-tight:             1.15;
  --lh-snug:              1.3;
  --lh-normal:            1.6;
  --lh-relaxed:           1.8;

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

  /* --- Spacing --- */
  --space-xs:             0.25rem;
  --space-sm:             0.5rem;
  --space-md:             1rem;
  --space-lg:             1.5rem;
  --space-xl:             2rem;
  --space-2xl:            3rem;
  --space-3xl:            4rem;
  --space-4xl:            6rem;
  --space-5xl:            8rem;
  --space-6xl:            10rem;

  /* --- Layout --- */
  --container-sm:         640px;
  --container-md:         768px;
  --container-lg:         1024px;
  --container-xl:         1200px;
  --container-2xl:        1400px;

  --nav-height:           80px;

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

  --border-thin:          1px solid rgba(255, 255, 255, 0.08);
  --border-light:         1px solid rgba(255, 255, 255, 0.12);
  --border-accent:        2px solid var(--color-accent);

  /* --- Shadows --- */
  --shadow-sm:            0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md:            0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg:            0 8px 30px rgba(0, 0, 0, 0.5);
  --shadow-xl:            0 16px 50px rgba(0, 0, 0, 0.6);
  --shadow-glow:          0 0 30px rgba(42, 82, 152, 0.3);
  --shadow-accent:        0 4px 20px rgba(196, 90, 45, 0.3);

  /* --- Transitions --- */
  --transition-fast:      150ms ease;
  --transition-base:      250ms ease;
  --transition-slow:      400ms ease;
  --transition-smooth:    500ms cubic-bezier(0.4, 0, 0.2, 1);

  /* --- Z-Index --- */
  --z-base:               1;
  --z-dropdown:           100;
  --z-sticky:             200;
  --z-nav:                500;
  --z-modal:              1000;
  --z-overlay:            900;
}