/* ============================================
   IVORY Design Tokens — Three-Layer Architecture
   Primitive → Semantic → Component
   ============================================ */

:root {
  /* ========== LAYER 1: PRIMITIVE TOKENS ========== */

  /* Color Scales — Ivory Brand */
  --ivory-50:  #FEFDFB;
  --ivory-100: #FDF9F3;
  --ivory-200: #FAF3E6;
  --ivory-300: #F5E9D0;
  --ivory-400: #EDD9B3;
  --ivory-500: #FFFFF0;

  /* Color Scales — Gold */
  --gold-50:  #FBF7EE;
  --gold-100: #F5ECD4;
  --gold-200: #EBD9AA;
  --gold-300: #DFC27B;
  --gold-400: #D4B06A;
  --gold-500: #C9A96E;
  --gold-600: #B8944F;
  --gold-700: #9A7A3E;
  --gold-800: #7D6333;
  --gold-900: #5E4A26;

  /* Color Scales — Navy */
  --navy-50:  #E8ECF2;
  --navy-100: #C5CDDB;
  --navy-200: #9EADC3;
  --navy-300: #778DAB;
  --navy-400: #597399;
  --navy-500: #3C5987;
  --navy-600: #2A3D66;
  --navy-700: #1B2A4A;
  --navy-800: #111C33;
  --navy-900: #0A1120;

  /* Color Scales — Gray (Neutral) */
  --gray-50:  #F9FAFB;
  --gray-100: #F3F4F6;
  --gray-200: #E5E7EB;
  --gray-300: #D1D5DB;
  --gray-400: #9CA3AF;
  --gray-500: #6B7280;
  --gray-600: #4B5563;
  --gray-700: #374151;
  --gray-800: #1F2937;
  --gray-900: #111827;

  /* Status Colors */
  --green-500: #22C55E;
  --green-600: #16A34A;
  --red-500:   #EF4444;
  --red-600:   #DC2626;

  /* Pure */
  --white: #FFFFFF;
  --black: #111111;

  /* Spacing Scale — 4px base */
  --space-0:   0;
  --space-px:  1px;
  --space-0-5: 0.125rem;   /* 2px */
  --space-1:   0.25rem;    /* 4px */
  --space-1-5: 0.375rem;   /* 6px */
  --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 */

  /* Typography Scale */
  --font-size-xs:   0.75rem;    /* 12px */
  --font-size-sm:   0.875rem;   /* 14px */
  --font-size-base: 1rem;       /* 16px */
  --font-size-lg:   1.125rem;   /* 18px */
  --font-size-xl:   1.25rem;    /* 20px */
  --font-size-2xl:  1.5rem;     /* 24px */
  --font-size-3xl:  1.875rem;   /* 30px */
  --font-size-4xl:  2.25rem;    /* 36px */
  --font-size-5xl:  3rem;       /* 48px */
  --font-size-6xl:  3.75rem;    /* 60px */

  /* Line Heights */
  --leading-none:    1;
  --leading-tight:   1.2;
  --leading-snug:    1.375;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;
  --leading-loose:   1.8;

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

  /* Letter Spacing */
  --tracking-tight:  -0.025em;
  --tracking-normal: 0;
  --tracking-wide:   0.025em;
  --tracking-wider:  0.05em;
  --tracking-widest: 0.12em;

  /* Font Families */
  --font-family-heading: 'Playfair Display', 'Georgia', serif;
  --font-family-body:    'Inter', 'Helvetica Neue', Arial, sans-serif;

  /* Border Radius */
  --radius-none: 0;
  --radius-sm:   0.25rem;    /* 4px */
  --radius-md:   0.375rem;   /* 6px */
  --radius-lg:   0.5rem;     /* 8px */
  --radius-xl:   0.75rem;    /* 12px */
  --radius-2xl:  1rem;       /* 16px */
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm:   0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-base: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md:   0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg:   0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl:   0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --shadow-2xl:  0 25px 50px -12px rgb(0 0 0 / 0.25);
  --shadow-gold: 0 4px 20px rgb(201 169 110 / 0.25);

  /* Motion / Duration */
  --duration-75:  75ms;
  --duration-100: 100ms;
  --duration-150: 150ms;
  --duration-200: 200ms;
  --duration-300: 300ms;
  --duration-500: 500ms;

  /* Semantic Durations */
  --duration-fast:   var(--duration-150);
  --duration-normal: var(--duration-200);
  --duration-slow:   var(--duration-300);

  /* Easing */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.55, 0, 1, 0.45);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Z-Index Scale */
  --z-0:        0;
  --z-10:       10;
  --z-20:       20;
  --z-40:       40;
  --z-sticky:   100;
  --z-overlay:  400;
  --z-modal:    1000;
  --z-popover:  1100;

  /* ========== LAYER 2: SEMANTIC TOKENS ========== */

  /* Page */
  --color-background:    var(--white);
  --color-foreground:    var(--navy-700);
  --color-surface:       var(--ivory-100);
  --color-surface-alt:   var(--ivory-50);

  /* Primary (Gold) */
  --color-primary:            var(--gold-500);
  --color-primary-hover:      var(--gold-600);
  --color-primary-active:     var(--gold-700);
  --color-primary-foreground: var(--white);
  --color-primary-subtle:     var(--gold-50);

  /* Secondary (Navy) */
  --color-secondary:            var(--navy-700);
  --color-secondary-hover:      var(--navy-600);
  --color-secondary-foreground: var(--white);

  /* Muted */
  --color-muted:            var(--gray-100);
  --color-muted-foreground: var(--gray-500);

  /* Text */
  --color-text-heading:   var(--navy-700);
  --color-text-body:      var(--gray-600);
  --color-text-caption:   var(--gray-400);
  --color-text-on-dark:   rgba(255, 255, 255, 0.85);
  --color-text-on-dark-muted: rgba(255, 255, 255, 0.6);

  /* Border */
  --color-border:       var(--gray-200);
  --color-border-hover: var(--gray-300);
  --color-ring:         var(--gold-500);

  /* Status */
  --color-success:            var(--green-600);
  --color-success-foreground: var(--white);
  --color-error:              var(--red-600);
  --color-error-foreground:   var(--white);

  /* Spacing Semantic */
  --spacing-section:    var(--space-24);
  --spacing-section-sm: var(--space-16);
  --spacing-container:  var(--space-6);
  --container-max:      75rem;  /* 1200px */

  /* Focus */
  --ring-width:  2px;
  --ring-offset: 2px;
  --ring-color:  var(--color-ring);

  /* Disabled */
  --opacity-disabled: 0.5;

  /* ========== LAYER 3: COMPONENT TOKENS ========== */

  /* Button */
  --button-bg:            var(--color-primary);
  --button-fg:            var(--color-primary-foreground);
  --button-hover-bg:      var(--color-primary-hover);
  --button-active-bg:     var(--color-primary-active);
  --button-padding-x:     var(--space-8);
  --button-padding-y:     var(--space-3);
  --button-radius:        var(--radius-sm);
  --button-font-size:     var(--font-size-sm);
  --button-font-weight:   var(--font-weight-medium);
  --button-min-height:    2.75rem;  /* 44px touch target */

  /* Button Outline */
  --button-outline-border: var(--color-primary);
  --button-outline-fg:     var(--color-primary);
  --button-outline-hover-bg: var(--color-primary);
  --button-outline-hover-fg: var(--white);

  /* Card */
  --card-bg:           var(--white);
  --card-fg:           var(--color-foreground);
  --card-border:       var(--color-border);
  --card-shadow:       var(--shadow-sm);
  --card-shadow-hover: var(--shadow-lg);
  --card-padding:      var(--space-8);
  --card-radius:       var(--radius-2xl);

  /* Input */
  --input-bg:            var(--white);
  --input-border:        var(--color-border);
  --input-fg:            var(--color-foreground);
  --input-placeholder:   var(--color-muted-foreground);
  --input-focus-border:  var(--color-ring);
  --input-error-border:  var(--color-error);
  --input-padding-x:     var(--space-4);
  --input-padding-y:     var(--space-3);
  --input-radius:        var(--radius-lg);
  --input-min-height:    2.75rem;  /* 44px touch target */
  --input-font-size:     var(--font-size-base);

  /* Nav */
  --nav-height:     5rem;   /* 80px */
  --nav-height-sm:  4rem;   /* 64px on scroll */
}