/* ============================================================
   MOLVERN LABS — Design Tokens
   Slate Authority palette · Space Grotesk + Inter + Geist
   ============================================================ */

:root {
  /* ── Colors ─────────────────────────────────────────────── */
  --color-navy:           #1a1f36;
  --color-navy-deep:      #0c141f;
  --color-navy-light:     #0f1629;
  --color-navy-mid:       #151c27;

  --color-blue:           #3b82f6;
  --color-blue-hover:     #2563eb;
  --color-blue-light:     #60a5fa;
  --color-blue-glow:      rgba(59, 130, 246, 0.4);
  --color-blue-subtle:    rgba(59, 130, 246, 0.08);

  --color-white:          #ffffff;
  --color-off-white:      #f9fafb;
  --color-surface:        #f3f4f6;
  --color-surface-hover:  #e5e7eb;
  --color-border:         #e5e7eb;
  --color-border-dark:    #2e3541;

  --color-gray-50:        #f9fafb;
  --color-gray-100:       #f3f4f6;
  --color-gray-200:       #e5e7eb;
  --color-gray-300:       #d1d5db;
  --color-gray-400:       #9ca3af;
  --color-gray-500:       #6b7280;
  --color-gray-600:       #4b5563;
  --color-gray-700:       #374151;
  --color-gray-800:       #1f2937;
  --color-gray-900:       #111827;

  --color-text-primary:   var(--color-navy);
  --color-text-secondary: var(--color-gray-500);
  --color-text-muted:     var(--color-gray-400);
  --color-text-on-dark:   var(--color-white);
  --color-text-on-dark-muted: var(--color-gray-400);

  /* ── Typography ─────────────────────────────────────────── */
  --font-headline:  'Space Grotesk', system-ui, sans-serif;
  --font-body:      'Inter', system-ui, sans-serif;
  --font-label:     'Geist', 'Inter', system-ui, sans-serif;
  --font-mono:      'Geist Mono', 'JetBrains Mono', monospace;

  /* Display */
  --text-display-xl:          4.5rem;    /* 72px */
  --text-display-xl-lh:       1.1;
  --text-display-xl-ls:       -0.03em;
  --text-display-xl-weight:   700;

  --text-display-lg:          3.5rem;    /* 56px */
  --text-display-lg-lh:       1.15;
  --text-display-lg-ls:       -0.02em;
  --text-display-lg-weight:   700;

  --text-display-md:          2.75rem;   /* 44px */
  --text-display-md-lh:       1.2;
  --text-display-md-ls:       -0.02em;
  --text-display-md-weight:   600;

  /* Heading */
  --text-heading-lg:          2.25rem;   /* 36px */
  --text-heading-lg-lh:       1.25;
  --text-heading-lg-ls:       -0.01em;
  --text-heading-lg-weight:   600;

  --text-heading-md:          1.75rem;   /* 28px */
  --text-heading-md-lh:       1.3;
  --text-heading-md-ls:       -0.01em;
  --text-heading-md-weight:   600;

  --text-heading-sm:          1.375rem;  /* 22px */
  --text-heading-sm-lh:       1.35;
  --text-heading-sm-ls:       0;
  --text-heading-sm-weight:   600;

  /* Body */
  --text-body-lg:             1.125rem;  /* 18px */
  --text-body-lg-lh:          1.6;
  --text-body-lg-weight:      400;

  --text-body-md:             1rem;      /* 16px */
  --text-body-md-lh:          1.6;
  --text-body-md-weight:      400;

  --text-body-sm:             0.875rem;  /* 14px */
  --text-body-sm-lh:          1.5;
  --text-body-sm-weight:      400;

  /* Label */
  --text-label-md:            0.8125rem; /* 13px */
  --text-label-md-lh:         1.4;
  --text-label-md-ls:         0.05em;
  --text-label-md-weight:     500;

  --text-label-sm:            0.6875rem; /* 11px */
  --text-label-sm-lh:         1.4;
  --text-label-sm-ls:         0.06em;
  --text-label-sm-weight:     500;

  /* ── Spacing ────────────────────────────────────────────── */
  --space-xs:    0.25rem;   /* 4px  */
  --space-sm:    0.5rem;    /* 8px  */
  --space-md:    1rem;      /* 16px */
  --space-lg:    1.5rem;    /* 24px */
  --space-xl:    2rem;      /* 32px */
  --space-2xl:   3rem;      /* 48px */
  --space-3xl:   4rem;      /* 64px */
  --space-4xl:   6rem;      /* 96px */
  --space-5xl:   8rem;      /* 128px */
  --space-section: 7.5rem;  /* 120px — section gaps */

  /* ── Layout ─────────────────────────────────────────────── */
  --container-max:    1280px;
  --container-narrow: 960px;
  --container-tight:  720px;
  --container-pad:    clamp(1.5rem, 5vw, 4rem);

  /* ── Radius ─────────────────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* ── Shadows ────────────────────────────────────────────── */
  --shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md:    0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --shadow-lg:    0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
  --shadow-xl:    0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
  --shadow-glow:  0 0 20px var(--color-blue-glow);
  --shadow-glow-lg: 0 0 40px var(--color-blue-glow), 0 0 80px rgba(59, 130, 246, 0.15);

  /* ── Transitions ────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast:   150ms;
  --duration-normal: 200ms;
  --duration-slow:   400ms;
  --duration-reveal: 700ms;

  /* ── Z-index ────────────────────────────────────────────── */
  --z-base:      1;
  --z-dropdown:  10;
  --z-sticky:    20;
  --z-nav:       100;
  --z-modal:     200;
  --z-toast:     300;
}

/* ── Responsive token overrides ───────────────────────────── */
@media (max-width: 768px) {
  :root {
    --container-pad:      1.25rem;  /* 20px */
    --text-display-xl:    2.75rem;  /* 44px */
    --text-display-lg:    2.25rem;  /* 36px */
    --text-display-md:    2rem;     /* 32px */
    --text-heading-lg:    1.75rem;  /* 28px */
    --text-heading-md:    1.5rem;   /* 24px */
    --text-heading-sm:    1.25rem;  /* 20px */
    --space-section:      4rem;
  }
}

@media (max-width: 480px) {
  :root {
    --container-pad:      1rem;     /* 16px */
    --text-display-xl:    2.25rem;  /* 36px */
    --text-display-lg:    2rem;     /* 32px */
    --text-display-md:    1.75rem;  /* 28px */
    --text-heading-lg:    1.5rem;   /* 24px */
    --space-section:      3rem;
  }
}

/* ── Light Mode Theme ──────────────────────────────────────── */
[data-theme="light"] {
  --color-navy:           #ffffff;
  --color-navy-deep:      #f8fafc;
  --color-navy-light:     #f1f5f9;
  --color-navy-mid:       #e2e8f0;

  --color-blue:           #2563eb;
  --color-blue-hover:     #1d4ed8;
  --color-blue-light:     #3b82f6;
  --color-blue-glow:      rgba(37, 99, 235, 0.25);
  --color-blue-subtle:    rgba(37, 99, 235, 0.06);

  --color-white:          #1a1f36;
  --color-surface:        #f3f4f6;
  --color-surface-hover:  #e5e7eb;
  --color-border:         #d1d5db;
  --color-border-dark:    #d1d5db;

  --color-gray-400:       #6b7280;
  --color-gray-500:       #4b5563;
  --color-gray-600:       #374151;

  --color-text-primary:   #1a1f36;
  --color-text-secondary: #4b5563;
  --color-text-muted:     #6b7280;
  --color-text-on-dark:   #1a1f36;
  --color-text-on-dark-muted: #6b7280;

  --shadow-glow:  0 0 20px rgba(37, 99, 235, 0.2);
  --shadow-glow-lg: 0 0 40px rgba(37, 99, 235, 0.25), 0 0 80px rgba(37, 99, 235, 0.1);
}