/* ==========================================================================
   MindJek — Design Tokens
   Premium dark identity built on the brand indigo (#4c55c4).
   Single restrained accent, refined & minimal.
   ========================================================================== */

:root {
  /* ---- Neutrals (near-black canvas) ---- */
  --ink-900: #06070a;      /* deepest */
  --ink-800: #0c0d12;      /* body bg */
  --ink-700: #101119;      /* surface */
  --ink-600: #16171f;      /* elevated surface */
  --ink-500: #20222c;      /* lines on dark */
  --ink-400: #2a2c38;

  --paper:   #f4f4f7;      /* primary text */
  --mist:    #adb0be;      /* muted text */
  --smoke:   #767988;      /* faint text */

  /* ---- Brand indigo (the one accent) ---- */
  --indigo:        #4c55c4;   /* exact brand color */
  --indigo-bright: #8a90ff;   /* legible accent on dark (links, eyebrows, icons) */
  --indigo-deep:   #363da0;
  --indigo-tint:   rgba(76, 85, 196, 0.14);
  --indigo-line:   rgba(138, 144, 255, 0.28);

  /* Legacy alias names kept so component CSS stays valid — all map to indigo now */
  --violet: var(--indigo);
  --violet-bright: var(--indigo-bright);
  --cyan: var(--indigo-bright);
  --lime: var(--indigo-bright);
  --coral: var(--indigo-bright);

  /* ---- Gradients (subtle, indigo-only — never rainbow) ---- */
  --grad-brand: linear-gradient(135deg, #4c55c4 0%, #5f68d8 100%);
  --grad-brand-soft: linear-gradient(135deg, rgba(76,85,196,.16), rgba(76,85,196,.05));
  --grad-glow: radial-gradient(60% 60% at 50% 0%, rgba(76,85,196,.20), rgba(76,85,196,0) 70%);
  --grad-text: linear-gradient(100deg, #f4f4f7 15%, #9aa0ff 95%);

  /* ---- Semantic ---- */
  --bg:            var(--ink-800);
  --bg-alt:        var(--ink-700);
  --surface:       var(--ink-700);
  --surface-2:     var(--ink-600);
  --border:        rgba(255, 255, 255, .07);
  --border-strong: rgba(255, 255, 255, .14);
  --text:          var(--paper);
  --text-muted:    var(--mist);
  --text-faint:    var(--smoke);
  --accent:        var(--indigo);
  --accent-2:      var(--indigo-bright);

  /* ---- Fluid type scale ---- */
  --step--1: clamp(0.83rem, 0.79rem + 0.18vw, 0.94rem);
  --step-0:  clamp(1rem, 0.94rem + 0.28vw, 1.13rem);
  --step-1:  clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
  --step-2:  clamp(1.44rem, 1.28rem + 0.8vw, 2rem);
  --step-3:  clamp(1.73rem, 1.48rem + 1.24vw, 2.66rem);
  --step-4:  clamp(2.07rem, 1.7rem + 1.86vw, 3.4rem);
  --step-5:  clamp(2.49rem, 1.94rem + 2.72vw, 4.5rem);
  --step-6:  clamp(2.9rem, 2.2rem + 3.6vw, 5.9rem);

  /* Fonts */
  --font-display: "Sora", "Space Grotesk", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;

  /* ---- Spacing scale ---- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-s:   1rem;
  --space-m:   1.5rem;
  --space-l:   2rem;
  --space-xl:  3rem;
  --space-2xl: 4.5rem;
  --space-3xl: 7.5rem;
  --space-4xl: 10rem;

  /* Layout */
  --container: 1200px;
  --container-wide: 1360px;
  --container-narrow: 760px;
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --radius-s: 10px;
  --radius-m: 14px;
  --radius-l: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* Elevation — soft, no neon */
  --shadow-s: 0 2px 10px rgba(0,0,0,.4);
  --shadow-m: 0 20px 55px rgba(0,0,0,.5);
  --shadow-glow: 0 16px 40px rgba(76,85,196,.22);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 0.2s;
  --dur: 0.4s;
  --dur-slow: 0.8s;

  --header-h: 76px;
}