/* =========================================================================
   Deep Analytica — Colors & Typography Tokens
   -------------------------------------------------------------------------
   Single source of truth. Import in any UI kit:
     <link rel="stylesheet" href="/colors_and_type.css">
   ========================================================================= */

/* ---------- Webfonts ---------------------------------------------------- */
/* Inter — UI + body. JetBrains Mono — code. Space Grotesk — display (optional,
   closest geometric-sans match to the tracked-out wordmark). */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=Space+Grotesk:wght@500;600;700&display=swap');

/* =========================================================================
   1. Brand palette
   ========================================================================= */
:root {
  /* Core brand */
  --brand-cyan:      #33E1ED;   /* chevron, CTAs, active states, focus rings */
  --brand-cyan-ink:  #0B2E33;   /* readable ink when used on cyan surfaces   */
  --brand-ink:       #2D2D44;   /* navy-violet — never black                 */
  --brand-white:     #F7F8FF;   /* cool off-white — never pure white         */

  /* Neutral scale — interpolated #2D2D44 → #F7F8FF, biased cool.
     Use for surfaces, borders, hairlines, text hierarchies.               */
  --n-950: #1C1C2E;   /* deepest surface (below ink, for dark-mode panels) */
  --n-900: #2D2D44;   /* = brand-ink                                       */
  --n-800: #3C3C55;
  --n-700: #575773;
  --n-600: #737391;
  --n-500: #9494AE;
  --n-400: #B4B4C8;
  --n-300: #CFCFDD;
  --n-200: #E2E2EC;
  --n-100: #EDEEF5;
  --n-050: #F7F8FF;   /* = brand-white                                     */

  /* Cyan scale — derived from #33E1ED for data-viz + hover/press states. */
  --c-900: #0B5B61;
  --c-800: #127A82;
  --c-700: #1A9CA6;
  --c-600: #22BDC9;
  --c-500: #33E1ED;   /* = brand-cyan                                      */
  --c-400: #5CE8F1;
  --c-300: #8AEFF5;
  --c-200: #B9F6F9;
  --c-100: #DEFAFC;
  --c-050: #F0FDFE;

  /* Semantic — derived, all tuned for a cool/desaturated feel to coexist
     with the single-accent rule (cyan stays dominant).                   */
  --success-500: #25B47A;
  --success-100: #E1F5EC;
  --warning-500: #E7A63B;
  --warning-100: #FAEFD7;
  --danger-500:  #E04F5F;
  --danger-100:  #FADDE1;
  --info-500:    var(--c-600);
  --info-100:    var(--c-100);
}

/* =========================================================================
   2. Semantic surfaces — LIGHT (default)
   ========================================================================= */
:root,
[data-theme='light'] {
  /* Background layers */
  --bg:             var(--n-050);
  --bg-elevated:    #FFFFFF;
  --bg-sunken:      var(--n-100);
  --bg-inverted:    var(--n-900);

  /* Foreground */
  --fg-1:           var(--n-900);   /* headings, primary text              */
  --fg-2:           var(--n-700);   /* body text, default labels           */
  --fg-3:           var(--n-600);   /* secondary text, captions            */
  --fg-4:           var(--n-500);   /* placeholder, disabled-subtle        */
  --fg-on-accent:   var(--brand-cyan-ink);
  --fg-on-inverted: var(--n-050);

  /* Borders & hairlines */
  --border-1:       var(--n-200);   /* default border                      */
  --border-2:       var(--n-300);   /* stronger, focused cards / tables    */
  --border-3:       var(--n-400);   /* inputs on hover                     */
  --hairline:       rgba(45,45,68,0.08);

  /* Accent */
  --accent:         var(--brand-cyan);
  --accent-hover:   var(--c-600);
  --accent-press:   var(--c-700);
  --accent-soft:    var(--c-100);
  --focus-ring:     color-mix(in srgb, var(--brand-cyan) 55%, transparent);

  /* Data-viz categorical (6 steps; extend if needed) */
  --dv-1: #33E1ED;
  --dv-2: #1A9CA6;
  --dv-3: #737391;
  --dv-4: #2D2D44;
  --dv-5: #8AEFF5;
  --dv-6: #B4B4C8;
}

/* =========================================================================
   3. Semantic surfaces — DARK (canonical composition)
   ========================================================================= */
[data-theme='dark'] {
  --bg:             var(--n-900);
  --bg-elevated:    var(--n-800);
  --bg-sunken:      var(--n-950);
  --bg-inverted:    var(--n-050);

  --fg-1:           var(--n-050);
  --fg-2:           var(--n-300);
  --fg-3:           var(--n-400);
  --fg-4:           var(--n-500);
  --fg-on-accent:   var(--brand-cyan-ink);
  --fg-on-inverted: var(--n-900);

  --border-1:       rgba(247,248,255,0.08);
  --border-2:       rgba(247,248,255,0.14);
  --border-3:       rgba(247,248,255,0.22);
  --hairline:       rgba(247,248,255,0.06);

  --accent:         var(--brand-cyan);
  --accent-hover:   var(--c-400);
  --accent-press:   var(--c-300);
  --accent-soft:    rgba(51,225,237,0.12);
  --focus-ring:     color-mix(in srgb, var(--brand-cyan) 65%, transparent);

  --dv-1: #33E1ED;
  --dv-2: #5CE8F1;
  --dv-3: #B4B4C8;
  --dv-4: #F7F8FF;
  --dv-5: #1A9CA6;
  --dv-6: #737391;
}

/* =========================================================================
   4. Typography
   ========================================================================= */
:root {
  --font-sans:    'Inter', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;  /* geometric sans, tracks the wordmark feel */
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Type scale — major third (1.25) from 14 base, rounded. */
  --fs-12: 0.75rem;     /* 12 — micro labels, legal           */
  --fs-13: 0.8125rem;   /* 13 — table cells, secondary        */
  --fs-14: 0.875rem;    /* 14 — UI default                    */
  --fs-15: 0.9375rem;   /* 15 — prose body default            */
  --fs-16: 1rem;        /* 16 — body large, inputs            */
  --fs-18: 1.125rem;    /* 18 — lead, h5                      */
  --fs-20: 1.25rem;     /* 20 — h4                            */
  --fs-24: 1.5rem;      /* 24 — h3                            */
  --fs-30: 1.875rem;    /* 30 — h2                            */
  --fs-38: 2.375rem;    /* 38 — h1                            */
  --fs-48: 3rem;        /* 48 — display-s                     */
  --fs-64: 4rem;        /* 64 — display-m                     */
  --fs-80: 5rem;        /* 80 — display-l (hero)              */

  --lh-tight:   1.1;
  --lh-heading: 1.2;
  --lh-snug:    1.35;
  --lh-body:    1.55;
  --lh-loose:   1.7;

  /* Tracking — display uses the wordmark's generous tracking on uppercase */
  --tr-tight:    -0.02em;
  --tr-normal:   0;
  --tr-wide:     0.04em;
  --tr-wider:    0.08em;   /* brand wordmark vibe on eyebrows  */

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
}

/* ---- Semantic type roles — use via utility classes or @extend ---------- */
html {
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--fg-1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.display-l, .display-m, .display-s,
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tr-tight);
  line-height: var(--lh-heading);
  color: var(--fg-1);
  text-wrap: balance;
}

.display-l { font-size: clamp(3rem, 6vw, var(--fs-80)); line-height: var(--lh-tight); letter-spacing: -0.03em; font-weight: var(--fw-bold); }
.display-m { font-size: clamp(2.25rem, 4.5vw, var(--fs-64)); line-height: var(--lh-tight); letter-spacing: -0.025em; font-weight: var(--fw-bold); }
.display-s { font-size: clamp(1.75rem, 3.5vw, var(--fs-48)); line-height: var(--lh-tight); letter-spacing: -0.02em; font-weight: var(--fw-semibold); }

h1 { font-size: var(--fs-38); }
h2 { font-size: var(--fs-30); }
h3 { font-size: var(--fs-24); }
h4 { font-size: var(--fs-20); font-weight: var(--fw-semibold); }
h5 { font-size: var(--fs-18); font-weight: var(--fw-semibold); }
h6 { font-size: var(--fs-16); font-weight: var(--fw-semibold); letter-spacing: 0; }

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
  color: var(--fg-3);
}

.lead { font-size: var(--fs-18); line-height: var(--lh-body); color: var(--fg-2); }

p, .body { font-size: var(--fs-15); line-height: var(--lh-body); color: var(--fg-2); text-wrap: pretty; }
.body-lg { font-size: var(--fs-16); line-height: var(--lh-body); }
.body-sm { font-size: var(--fs-13); line-height: var(--lh-snug); color: var(--fg-3); }

.caption { font-size: var(--fs-12); line-height: var(--lh-snug); color: var(--fg-3); }

.label {
  font-size: var(--fs-13);
  font-weight: var(--fw-medium);
  color: var(--fg-2);
  letter-spacing: 0;
}

code, pre, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  font-variant-ligatures: none;
  font-feature-settings: 'ss01', 'cv01';
}

.metric {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--fg-1);
}
.metric-xl { font-size: var(--fs-48); line-height: 1; }
.metric-l  { font-size: var(--fs-38); line-height: 1; }
.metric-m  { font-size: var(--fs-30); line-height: 1; }

/* =========================================================================
   5. Spacing, radii, shadows, motion
   ========================================================================= */
:root {
  /* 4-pt spacing scale */
  --sp-0:  0;
  --sp-1:  0.25rem;   /* 4  */
  --sp-2:  0.5rem;    /* 8  */
  --sp-3:  0.75rem;   /* 12 */
  --sp-4:  1rem;      /* 16 */
  --sp-5:  1.25rem;   /* 20 */
  --sp-6:  1.5rem;    /* 24 */
  --sp-8:  2rem;      /* 32 */
  --sp-10: 2.5rem;    /* 40 */
  --sp-12: 3rem;      /* 48 */
  --sp-16: 4rem;      /* 64 */
  --sp-20: 5rem;      /* 80 */
  --sp-24: 6rem;      /* 96 */

  /* Radii — small to medium only. No pills, no big rounding. */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-full: 999px;    /* reserved for avatars + status dots              */

  /* Shadows — restrained. Sofistication comes from proportion, not depth. */
  --shadow-1: 0 1px 0 0 var(--hairline);
  --shadow-2: 0 1px 2px rgba(45,45,68,0.06), 0 1px 1px rgba(45,45,68,0.04);
  --shadow-3: 0 4px 12px rgba(45,45,68,0.08), 0 1px 2px rgba(45,45,68,0.04);
  --shadow-4: 0 12px 32px rgba(45,45,68,0.12), 0 2px 6px rgba(45,45,68,0.06);

  /* Motion */
  --ease-out:       cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:       120ms;
  --dur-base:       180ms;
  --dur-slow:       320ms;

  /* Container + grid */
  --container:      1200px;
  --container-wide: 1360px;
  --gutter:         var(--sp-6);
}

[data-theme='dark'] {
  --shadow-2: 0 1px 2px rgba(0,0,0,0.5), 0 0 0 1px rgba(247,248,255,0.04);
  --shadow-3: 0 6px 18px rgba(0,0,0,0.45), 0 0 0 1px rgba(247,248,255,0.05);
  --shadow-4: 0 18px 40px rgba(0,0,0,0.55), 0 0 0 1px rgba(247,248,255,0.06);
}

/* =========================================================================
   6. Focus, selection
   ========================================================================= */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}
::selection {
  background: color-mix(in srgb, var(--brand-cyan) 30%, transparent);
  color: var(--fg-1);
}