/* ============================================================
   OX3 DESIGN SYSTEM — TOKEN ARCHITECTURE
   Three-layer: Primitive → Semantic → Component
   ============================================================ */

/* ============================================================
   LAYER 1: PRIMITIVES — raw values, no semantic meaning
   ============================================================ */
:root {

  /* --- Color: Navy Scale --- */
  --primitive-navy-50:  #eeedf5;
  --primitive-navy-100: #d5d3e8;
  --primitive-navy-200: #aba7d1;
  --primitive-navy-300: #807bb9;
  --primitive-navy-400: #5a548f;
  --primitive-navy-500: #3a3566;
  --primitive-navy-600: #282444;   /* Brand navy */
  --primitive-navy-700: #1e1a33;
  --primitive-navy-800: #141224;
  --primitive-navy-900: #0a0915;

  /* --- Color: Coral Scale --- */
  --primitive-coral-50:  #fdf0f1;
  --primitive-coral-100: #f9d9db;
  --primitive-coral-200: #f3b3b7;
  --primitive-coral-300: #ec8d93;
  --primitive-coral-400: #e66870;
  --primitive-coral-500: #e04c54;   /* Brand coral */
  --primitive-coral-600: #c73e47;
  --primitive-coral-700: #a83039;
  --primitive-coral-800: #7d222a;
  --primitive-coral-900: #52151b;

  /* --- Color: Cream / Warm Neutral Scale --- */
  --primitive-cream-50:  #ffffff;
  --primitive-cream-100: #fcfaf8;   /* Main background */
  --primitive-cream-200: #f9f6f2;
  --primitive-cream-300: #f0ece6;   /* Warm tan */
  --primitive-cream-400: #e8e2d8;
  --primitive-cream-500: #d8d0c4;
  --primitive-cream-600: #b8ac9c;
  --primitive-cream-700: #8c7e6e;
  --primitive-cream-800: #5c5044;
  --primitive-cream-900: #2d2620;

  /* --- Color: Gray (cool, for text) --- */
  --primitive-gray-50:  #f9fafb;
  --primitive-gray-100: #f3f4f6;
  --primitive-gray-200: #e5e7eb;
  --primitive-gray-300: #d1d5db;
  --primitive-gray-400: #9ca3af;
  --primitive-gray-500: #6b7280;
  --primitive-gray-600: #4b5563;
  --primitive-gray-700: #374151;
  --primitive-gray-800: #1f2937;
  --primitive-gray-900: #111827;

  /* --- Color: Status --- */
  --primitive-success:       #16a34a;
  --primitive-success-light: #dcfce7;
  --primitive-warning:       #d97706;
  --primitive-warning-light: #fef3c7;
  --primitive-error:         #dc2626;
  --primitive-error-light:   #fee2e2;
  --primitive-info:          #0284c7;
  --primitive-info-light:    #e0f2fe;

  --primitive-white: #ffffff;
  --primitive-black: #000000;

  /* --- Spacing (4px base grid) --- */
  --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-7:   1.75rem;    /* 28px */
  --space-8:   2rem;       /* 32px */
  --space-10:  2.5rem;     /* 40px */
  --space-12:  3rem;       /* 48px */
  --space-14:  3.5rem;     /* 56px */
  --space-16:  4rem;       /* 64px */
  --space-20:  5rem;       /* 80px */
  --space-24:  6rem;       /* 96px */
  --space-32:  8rem;       /* 128px */

  /* --- Typography: Font Families --- */
  --font-heading: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  /* --- Typography: Font Sizes (fluid-friendly) --- */
  --font-size-2xs:  0.625rem;    /* 10px */
  --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 */
  --font-size-7xl:  4.5rem;      /* 72px */

  /* --- Typography: Font Weights --- */
  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  /* --- Typography: Line Heights --- */
  --leading-none:    1;
  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;

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

  /* --- Border Radius --- */
  --radius-none: 0;
  --radius-sm:   0.25rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.75rem;
  --radius-xl:   1rem;
  --radius-2xl:  1.5rem;
  --radius-3xl:  2rem;
  --radius-full: 9999px;

  /* --- Shadows --- */
  --shadow-none: none;
  --shadow-xs:   0 1px 2px rgb(0 0 0 / 0.05);
  --shadow-sm:   0 2px 4px rgb(0 0 0 / 0.06), 0 1px 2px rgb(0 0 0 / 0.04);
  --shadow-md:   0 4px 12px rgb(0 0 0 / 0.08), 0 2px 4px rgb(0 0 0 / 0.04);
  --shadow-lg:   0 8px 24px rgb(0 0 0 / 0.1),  0 4px 8px rgb(0 0 0 / 0.06);
  --shadow-xl:   0 20px 48px rgb(0 0 0 / 0.14), 0 8px 16px rgb(0 0 0 / 0.08);
  --shadow-2xl:  0 40px 80px rgb(0 0 0 / 0.2);
  --shadow-inner: inset 0 2px 4px rgb(0 0 0 / 0.06);

  /* --- Motion --- */
  --duration-fast:   100ms;
  --duration-normal: 200ms;
  --duration-slow:   300ms;
  --duration-slower: 500ms;

  --ease-out:    cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* --- Z-Index --- */
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
}


/* ============================================================
   LAYER 2: SEMANTIC — purpose-based aliases
   ============================================================ */
:root {

  /* Background */
  --color-bg-base:    var(--primitive-cream-100);
  --color-bg-subtle:  var(--primitive-cream-300);
  --color-bg-muted:   var(--primitive-cream-200);
  --color-bg-invert:  var(--primitive-navy-600);
  --color-bg-overlay: rgb(40 36 68 / 0.6);
  --color-bg-white:   var(--primitive-white);

  /* Text */
  --color-text-primary:   var(--primitive-gray-900);
  --color-text-secondary: var(--primitive-gray-700);
  --color-text-muted:     var(--primitive-gray-500);
  --color-text-disabled:  var(--primitive-gray-400);
  --color-text-invert:    var(--primitive-white);
  --color-text-brand:     var(--primitive-navy-600);
  --color-text-accent:    var(--primitive-coral-500);

  /* Brand */
  --color-brand-primary:       var(--primitive-navy-600);
  --color-brand-primary-light: var(--primitive-navy-400);
  --color-brand-primary-dark:  var(--primitive-navy-700);
  --color-brand-accent:        var(--primitive-coral-500);
  --color-brand-accent-light:  var(--primitive-coral-400);
  --color-brand-accent-dark:   var(--primitive-coral-600);

  /* Border */
  --color-border-subtle:  var(--primitive-cream-400);
  --color-border-default: var(--primitive-cream-500);
  --color-border-strong:  var(--primitive-gray-300);
  --color-border-brand:   var(--primitive-navy-600);
  --color-border-accent:  var(--primitive-coral-500);

  /* Status */
  --color-success:    var(--primitive-success);
  --color-success-bg: var(--primitive-success-light);
  --color-warning:    var(--primitive-warning);
  --color-warning-bg: var(--primitive-warning-light);
  --color-error:      var(--primitive-error);
  --color-error-bg:   var(--primitive-error-light);
  --color-info:       var(--primitive-info);
  --color-info-bg:    var(--primitive-info-light);

  /* Semantic Spacing */
  --spacing-xs:  var(--space-2);    /*  8px */
  --spacing-sm:  var(--space-4);    /* 16px */
  --spacing-md:  var(--space-6);    /* 24px */
  --spacing-lg:  var(--space-10);   /* 40px */
  --spacing-xl:  var(--space-16);   /* 64px */
  --spacing-2xl: var(--space-24);   /* 96px */

  /* Semantic Typography */
  --text-display: var(--font-size-6xl);
  --text-h1:      var(--font-size-5xl);
  --text-h2:      var(--font-size-4xl);
  --text-h3:      var(--font-size-3xl);
  --text-h4:      var(--font-size-2xl);
  --text-h5:      var(--font-size-xl);
  --text-body-lg: var(--font-size-lg);
  --text-body:    var(--font-size-base);
  --text-body-sm: var(--font-size-sm);
  --text-caption: var(--font-size-xs);

  /* Semantic Shadows */
  --shadow-card:       var(--shadow-sm);
  --shadow-card-hover: var(--shadow-lg);
  --shadow-modal:      var(--shadow-xl);
  --shadow-nav:        0 1px 0 var(--color-border-subtle), var(--shadow-xs);

  /* Layout */
  --layout-max-width:         1280px;
  --layout-content-width:     760px;
  --layout-nav-height:        72px;
  --layout-page-padding-x:    var(--space-6);
  --layout-page-padding-x-lg: var(--space-12);

  /* Transitions */
  --transition-fast:   var(--duration-fast)   var(--ease-out);
  --transition-normal: var(--duration-normal) var(--ease-out);
  --transition-slow:   var(--duration-slow)   var(--ease-out);
  --transition-spring: var(--duration-slow)   var(--ease-spring);
}


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

  /* Button: Primary (Navy) */
  --btn-primary-bg:           var(--color-brand-primary);
  --btn-primary-bg-hover:     var(--color-brand-primary-dark);
  --btn-primary-fg:           var(--primitive-white);
  --btn-primary-shadow:       0 2px 8px rgb(40 36 68 / 0.25);
  --btn-primary-shadow-hover: 0 6px 20px rgb(40 36 68 / 0.35);

  /* Button: Accent (Coral) */
  --btn-accent-bg:           var(--color-brand-accent);
  --btn-accent-bg-hover:     var(--color-brand-accent-dark);
  --btn-accent-fg:           var(--primitive-white);
  --btn-accent-shadow:       0 2px 8px rgb(224 76 84 / 0.3);
  --btn-accent-shadow-hover: 0 6px 20px rgb(224 76 84 / 0.4);

  /* Button: Outline */
  --btn-outline-bg:       transparent;
  --btn-outline-bg-hover: var(--color-brand-primary);
  --btn-outline-fg:       var(--color-brand-primary);
  --btn-outline-fg-hover: var(--primitive-white);
  --btn-outline-border:   var(--color-brand-primary);

  /* Button: Shared */
  --btn-padding-sm:      var(--space-2) var(--space-4);
  --btn-padding-md:      var(--space-3) var(--space-6);
  --btn-padding-lg:      var(--space-4) var(--space-8);
  --btn-font-size-sm:    var(--font-size-sm);
  --btn-font-size-md:    var(--font-size-sm);
  --btn-font-size-lg:    var(--font-size-base);
  --btn-radius:          var(--radius-md);
  --btn-font-weight:     var(--font-weight-semibold);

  /* Card */
  --card-bg:           var(--color-bg-white);
  --card-border:       1px solid var(--color-border-subtle);
  --card-radius:       var(--radius-xl);
  --card-padding:      var(--space-8);
  --card-padding-sm:   var(--space-6);
  --card-shadow:       var(--shadow-card);
  --card-shadow-hover: var(--shadow-card-hover);

  /* Input */
  --input-bg:           var(--primitive-white);
  --input-border:       1px solid var(--color-border-default);
  --input-border-focus: 1px solid var(--color-brand-primary);
  --input-border-error: 1px solid var(--color-error);
  --input-radius:       var(--radius-md);
  --input-padding:      var(--space-3) var(--space-4);
  --input-font-size:    var(--font-size-base);
  --input-fg:           var(--color-text-primary);
  --input-placeholder:  var(--color-text-muted);
  --input-focus-ring:   0 0 0 3px rgb(224 76 84 / 0.15);

  /* Nav */
  --nav-bg:             var(--color-bg-white);
  --nav-height:         var(--layout-nav-height);
  --nav-link-fg:        var(--color-text-secondary);
  --nav-link-fg-hover:  var(--color-brand-primary);

  /* Badge */
  --badge-font-size:   var(--font-size-xs);
  --badge-font-weight: var(--font-weight-semibold);
  --badge-padding:     var(--space-1) var(--space-3);
  --badge-radius:      var(--radius-full);
  --badge-tracking:    var(--tracking-wider);

  /* Section */
  --section-padding-y: var(--space-20);
  --section-gap:       var(--space-12);

  /* Modal */
  --modal-bg:        var(--color-bg-white);
  --modal-radius:    var(--radius-2xl);
  --modal-shadow:    var(--shadow-modal);
  --modal-padding:   var(--space-10);
  --modal-max-width: 540px;

  /* Eyebrow / Label */
  --eyebrow-color:     var(--color-brand-accent);
  --eyebrow-font:      var(--font-heading);
  --eyebrow-size:      var(--font-size-xs);
  --eyebrow-weight:    var(--font-weight-semibold);
  --eyebrow-tracking:  var(--tracking-widest);
}