/**
 * JiyaneDesign - Design System Variables
 * Premium color palette, typography, spacing, and animation tokens
 */

:root {
  /* ===== BRAND COLORS ===== */
  --color-primary: #d4af37;
  /* Premium Gold */
  --color-primary-light: #e6c966;
  --color-primary-dark: #b8951f;

  --color-secondary: #1a1a2e;
  /* Deep Navy */
  --color-secondary-light: #2d2d44;
  --color-secondary-dark: #0d0d17;

  --color-dark: #0f0f1e;
  /* Charcoal */
  --color-darker: #050509;

  --color-light: #f5f5f5;
  /* Off-white */
  --color-lighter: #fafafa;
  --color-white: #ffffff;

  --color-gray-100: #f8f9fa;
  --color-gray-200: #e9ecef;
  --color-gray-300: #dee2e6;
  --color-gray-400: #ced4da;
  --color-gray-500: #adb5bd;
  --color-gray-600: #6c757d;
  --color-gray-700: #495057;
  --color-gray-800: #343a40;
  --color-gray-900: #212529;

  /* ===== SEMANTIC COLORS ===== */
  --color-success: #28a745;
  --color-error: #dc3545;
  --color-warning: #ffc107;
  --color-info: #17a2b8;

  /* ===== TYPOGRAPHY ===== */
  --font-primary: 'Inter', system-ui, -apple-system, sans-serif;
  --font-accent: 'Playfair Display', serif;

  /* Font Sizes - Modular Scale (1.25 - Major Third) */
  --text-xs: 0.75rem;
  /* 12px */
  --text-sm: 0.875rem;
  /* 14px */
  --text-base: 1rem;
  /* 16px */
  --text-lg: 1.125rem;
  /* 18px */
  --text-xl: 1.25rem;
  /* 20px */
  --text-2xl: 1.563rem;
  /* 25px */
  --text-3xl: 1.953rem;
  /* 31px */
  --text-4xl: 2.441rem;
  /* 39px */
  --text-5xl: 3.052rem;
  /* 49px */
  --text-6xl: 3.815rem;
  /* 61px */

  /* Line Heights */
  --leading-tight: 1.2;
  --leading-snug: 1.4;
  --leading-normal: 1.6;
  --leading-relaxed: 1.8;
  --leading-loose: 2;

  /* Font Weights */
  --font-light: 300;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-black: 900;

  /* ===== SPACING SCALE (8px base) ===== */
  --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 ===== */
  --container-max: 1200px;
  --container-wide: 1400px;
  --container-narrow: 800px;
  --container-padding: var(--space-6);

  /* ===== BORDER RADIUS ===== */
  --radius-sm: 0.25rem;
  /* 4px */
  --radius-base: 0.5rem;
  /* 8px */
  --radius-lg: 0.75rem;
  /* 12px */
  --radius-xl: 1rem;
  /* 16px */
  --radius-2xl: 1.5rem;
  /* 24px */
  --radius-full: 9999px;

  /* ===== SHADOWS ===== */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --shadow-gold: 0 10px 40px -10px rgba(212, 175, 55, 0.3);

  /* ===== TRANSITIONS ===== */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slower: 500ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Easing functions */
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* ===== Z-INDEX SCALE ===== */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-tooltip: 700;

  /* ===== BREAKPOINTS (for JS) ===== */
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;
  /* ===== SEMANTIC TOKENS ===== */
  --bg-body: var(--color-white);
  --bg-surface: var(--color-white);
  --bg-surface-alt: var(--color-light);
  /* Section backgrounds */
  --bg-footer: var(--color-secondary);

  --text-body: var(--color-gray-900);
  --text-muted: var(--color-gray-600);
  --text-heading: var(--color-secondary);
  --text-on-dark: var(--color-white);
  /* Text on dark backgrounds (footer, hero buttons) */

  --border-color: var(--color-gray-300);
  --card-shadow: var(--shadow-base);
}

/* Dark Theme */
[data-theme="dark"] {
  --bg-body: var(--color-dark);
  --bg-surface: var(--color-secondary-light);
  --bg-surface-alt: var(--color-secondary);
  --bg-footer: var(--color-darker);

  --text-body: var(--color-gray-300);
  --text-muted: var(--color-gray-500);
  --text-heading: var(--color-white);
  --text-on-dark: var(--color-gray-300);

  --border-color: var(--color-secondary-light);
  --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.3);

  /* Update primitives for dark mode if needed for direct usage, 
     but semantic usage is preferred */
}