/* ==========================================================================
   MAC Design Tokens
   Metric Accelerated Commerce — Design System Foundation
   ========================================================================== */

:root {
  /* --------------------------------------------------------------------------
     COLOR SYSTEM
     -------------------------------------------------------------------------- */

  /* Primary Palette */
  --color-midnight:       #0A0F1E;  /* Primary dark — near-black navy */
  --color-snow:           #F8FAFC;  /* Primary light — warm off-white */
  --color-signal:         #3B82F6;  /* Signature accent — metric blue */

  /* Secondary Palette */
  --color-signal-light:   #60A5FA;  /* Accent light — hover states, data viz */
  --color-signal-dark:    #2563EB;  /* Accent dark — active states */
  --color-graphite:       #1E293B;  /* Dark surface — cards on dark bg */

  /* Semantic Colors */
  --color-success:        #10B981;  /* Emerald green */
  --color-success-light:  #D1FAE5;
  --color-success-dark:   #059669;
  --color-warning:        #F59E0B;  /* Amber */
  --color-warning-light:  #FEF3C7;
  --color-warning-dark:   #D97706;
  --color-error:          #EF4444;  /* Red */
  --color-error-light:    #FEE2E2;
  --color-error-dark:     #DC2626;
  --color-info:           #3B82F6;  /* Blue (matches signal) */
  --color-info-light:     #DBEAFE;
  --color-info-dark:      #2563EB;

  /* Neutral Scale (10 steps) */
  --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-neutral-950:    #020617;

  /* Adaptive Accent System — override these per case study */
  --color-accent:         var(--color-signal);
  --color-accent-light:   var(--color-signal-light);
  --color-accent-dark:    var(--color-signal-dark);

  /* --------------------------------------------------------------------------
     TYPOGRAPHY
     -------------------------------------------------------------------------- */

  /* Font Families */
  --font-heading:         'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-body:            'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:            'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  /* Type Scale (base 16px, ratio ~1.25 Major Third) */
  --text-display:         4rem;      /* 64px — hero headlines */
  --text-h1:              3rem;      /* 48px */
  --text-h2:              2.25rem;   /* 36px */
  --text-h3:              1.75rem;   /* 28px */
  --text-h4:              1.375rem;  /* 22px */
  --text-h5:              1.125rem;  /* 18px */
  --text-h6:              1rem;      /* 16px */
  --text-body-lg:         1.125rem;  /* 18px */
  --text-body:            1rem;      /* 16px */
  --text-body-sm:         0.875rem;  /* 14px */
  --text-caption:         0.75rem;   /* 12px */
  --text-overline:        0.6875rem; /* 11px */
  --text-code:            0.875rem;  /* 14px */

  /* Line Heights */
  --leading-display:      1.1;
  --leading-heading:      1.2;
  --leading-body:         1.6;
  --leading-tight:        1.35;
  --leading-relaxed:      1.75;

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

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

  /* --------------------------------------------------------------------------
     SPACING (base unit: 4px)
     -------------------------------------------------------------------------- */

  --space-px:             1px;
  --space-0:              0;
  --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 */
  --space-40:             10rem;     /* 160px */
  --space-48:             12rem;     /* 192px */

  /* Section Spacing */
  --section-gap:          var(--space-32);    /* 128px between major sections */
  --section-gap-sm:       var(--space-20);    /* 80px for tighter sections */

  /* --------------------------------------------------------------------------
     LAYOUT
     -------------------------------------------------------------------------- */

  /* Container Widths */
  --container-sm:         640px;
  --container-md:         768px;
  --container-lg:         1024px;
  --container-xl:         1200px;
  --container-2xl:        1400px;
  --container-full:       100%;

  /* Grid */
  --grid-columns:         12;
  --grid-gutter:          var(--space-6);     /* 24px */
  --grid-margin:          var(--space-6);     /* 24px mobile */
  --grid-margin-lg:       var(--space-16);    /* 64px desktop */

  /* Breakpoints (for reference — used in media queries and Tailwind) */
  /* --bp-sm:  640px  */
  /* --bp-md:  768px  */
  /* --bp-lg:  1024px */
  /* --bp-xl:  1280px */
  /* --bp-2xl: 1536px */

  /* --------------------------------------------------------------------------
     SHADOWS
     -------------------------------------------------------------------------- */

  --shadow-xs:            0 1px 2px rgba(10, 15, 30, 0.05);
  --shadow-sm:            0 1px 3px rgba(10, 15, 30, 0.08), 0 1px 2px rgba(10, 15, 30, 0.04);
  --shadow-md:            0 4px 6px rgba(10, 15, 30, 0.07), 0 2px 4px rgba(10, 15, 30, 0.04);
  --shadow-lg:            0 10px 15px rgba(10, 15, 30, 0.08), 0 4px 6px rgba(10, 15, 30, 0.04);
  --shadow-xl:            0 20px 25px rgba(10, 15, 30, 0.1), 0 8px 10px rgba(10, 15, 30, 0.04);
  --shadow-2xl:           0 25px 50px rgba(10, 15, 30, 0.2);
  --shadow-inner:         inset 0 2px 4px rgba(10, 15, 30, 0.05);

  /* Glow (for metric/data callouts) */
  --glow-signal:          0 0 20px rgba(59, 130, 246, 0.15), 0 0 60px rgba(59, 130, 246, 0.05);
  --glow-signal-strong:   0 0 20px rgba(59, 130, 246, 0.3), 0 0 60px rgba(59, 130, 246, 0.1);

  /* --------------------------------------------------------------------------
     BORDER RADIUS
     -------------------------------------------------------------------------- */

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

  /* --------------------------------------------------------------------------
     TRANSITIONS
     -------------------------------------------------------------------------- */

  --duration-fast:        150ms;
  --duration-normal:      250ms;
  --duration-slow:        400ms;
  --duration-slower:      600ms;

  --ease-default:         cubic-bezier(0.4, 0, 0.2, 1);
  --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);
  --ease-bounce:          cubic-bezier(0.34, 1.56, 0.64, 1);

  --transition-colors:    color var(--duration-normal) var(--ease-default),
                          background-color var(--duration-normal) var(--ease-default),
                          border-color var(--duration-normal) var(--ease-default);
  --transition-transform: transform var(--duration-normal) var(--ease-default);
  --transition-shadow:    box-shadow var(--duration-normal) var(--ease-default);
  --transition-all:       all var(--duration-normal) var(--ease-default);

  /* --------------------------------------------------------------------------
     Z-INDEX SCALE
     -------------------------------------------------------------------------- */

  --z-behind:             -1;
  --z-base:               0;
  --z-dropdown:           10;
  --z-sticky:             20;
  --z-overlay:            30;
  --z-modal:              40;
  --z-toast:              50;
  --z-tooltip:            60;
}

/* --------------------------------------------------------------------------
   DARK MODE OVERRIDES
   -------------------------------------------------------------------------- */

[data-theme="dark"],
.dark {
  --color-midnight:       #F8FAFC;
  --color-snow:           #0A0F1E;
  --color-signal:         #60A5FA;
  --color-signal-light:   #93C5FD;
  --color-signal-dark:    #3B82F6;
  --color-graphite:       #1E293B;

  --color-success:        #34D399;
  --color-success-light:  #064E3B;
  --color-warning:        #FBBF24;
  --color-warning-light:  #78350F;
  --color-error:          #F87171;
  --color-error-light:    #7F1D1D;
  --color-info:           #60A5FA;
  --color-info-light:     #1E3A5F;

  --shadow-xs:            0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-sm:            0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-md:            0 4px 6px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2);
  --shadow-lg:            0 10px 15px rgba(0, 0, 0, 0.3), 0 4px 6px rgba(0, 0, 0, 0.2);
  --shadow-xl:            0 20px 25px rgba(0, 0, 0, 0.4), 0 8px 10px rgba(0, 0, 0, 0.2);
  --shadow-2xl:           0 25px 50px rgba(0, 0, 0, 0.5);

  --glow-signal:          0 0 20px rgba(96, 165, 250, 0.2), 0 0 60px rgba(96, 165, 250, 0.08);
  --glow-signal-strong:   0 0 20px rgba(96, 165, 250, 0.4), 0 0 60px rgba(96, 165, 250, 0.15);
}

/* --------------------------------------------------------------------------
   PREFERS REDUCED MOTION
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast:      0ms;
    --duration-normal:    0ms;
    --duration-slow:      0ms;
    --duration-slower:    0ms;
  }
}