/* ============================================================
   LambdaLoopers Design System — Tokens
   Base + semantic CSS variables, light + dark.
   ============================================================ */

/* -------- Fonts (self-hosted) -------- */
/* Inter — UI / display
   JetBrains Mono — monospace */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ============================================================
   :root — LIGHT mode tokens (default)
   ============================================================ */
:root {
  /* ---- Brand ---- */
  --brand-500: #14D8CC;       /* primary teal (from λ-loop mark) */
  --brand-600: #10B8AE;       /* hover */
  --brand-700: #0A7A72;       /* pressed / darkest on-light */
  --brand-400: #52E5DC;       /* soft accent */
  --brand-100: #D2F6F2;       /* chip / tint BG */
  --brand-50:  #EAFAF7;       /* lightest surface tint */

  /* ---- Neutrals (cool, slate) ---- */
  --neutral-0:   #FFFFFF;
  --neutral-25:  #FAFBFC;
  --neutral-50:  #F4F6F8;
  --neutral-100: #E9ECF1;
  --neutral-200: #E5E8EC;
  --neutral-300: #D0D5DD;
  --neutral-400: #98A2B3;
  --neutral-500: #6B7280;
  --neutral-600: #475467;
  --neutral-700: #344054;
  --neutral-800: #1A2233;
  --neutral-900: #0F1722;

  /* ---- Semantic signals ---- */
  --success-500: #22C58A;
  --success-100: #DEF5E9;
  --warning-500: #F5B544;
  --warning-100: #FCEED0;
  --danger-500:  #F2866A;
  --danger-100:  #FBE0D6;
  --info-500:    #6B8AC4;
  --info-100:    #DDE5F1;

  /* ---- Chart palette (series order) ---- */
  --chart-1: #14D8CC;   /* brand teal — primary series */
  --chart-2: #6B8AC4;   /* slate-blue — secondary */
  --chart-3: #F2866A;   /* coral */
  --chart-4: #F5B544;   /* amber */
  --chart-5: #22C58A;   /* green */
  --chart-6: #9B7FC4;   /* muted purple — tertiary */

  /* ---- Heatmap (single-hue teal, 5 steps) ---- */
  --heat-0: #EAFAF7;
  --heat-1: #B9ECE7;
  --heat-2: #7BDED6;
  --heat-3: #2DBFB3;
  --heat-4: #0A7A72;

  /* ---- Surface / semantic (LIGHT) ---- */
  --bg-page:        var(--neutral-0);
  --bg-surface:     var(--neutral-0);
  --bg-sunken:      var(--neutral-50);
  --bg-subtle:      var(--neutral-25);
  --bg-nav:         var(--neutral-25);
  --bg-hover:       rgba(20, 216, 204, 0.06);
  --bg-active:      rgba(20, 216, 204, 0.10);
  --bg-press:       rgba(0, 0, 0, 0.06);

  --fg-default: var(--neutral-800);
  --fg-strong:  var(--neutral-900);
  --fg-muted:   var(--neutral-600); /* 7.5:1 on white — readable body-secondary */
  --fg-subtle:  var(--neutral-500);
  --fg-inverse: var(--neutral-0);
  --fg-brand:   var(--brand-700);
  --fg-link:    var(--brand-700);

  --border-default: var(--neutral-200);
  --border-strong:  var(--neutral-300);
  --border-brand:   var(--brand-500);

  --focus-ring: 0 0 0 2px rgba(20, 216, 204, 0.6);

  /* ---- Typography ---- */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale — tuned for dense UI */
  --fs-display: 48px; --lh-display: 56px; --ls-display: -0.02em;
  --fs-h1: 32px;  --lh-h1: 40px;  --ls-h1: -0.015em;
  --fs-h2: 24px;  --lh-h2: 32px;  --ls-h2: -0.01em;
  --fs-h3: 20px;  --lh-h3: 28px;  --ls-h3: -0.005em;
  --fs-h4: 16px;  --lh-h4: 24px;  --ls-h4: 0;
  --fs-body: 14px; --lh-body: 20px; --ls-body: 0;
  --fs-body-lg: 16px; --lh-body-lg: 24px;
  --fs-small: 13px; --lh-small: 18px;
  --fs-xs: 12px; --lh-xs: 16px;
  --fs-kpi: 36px; --lh-kpi: 44px; --ls-kpi: -0.02em;
  --fs-kpi-lg: 48px; --lh-kpi-lg: 56px; --ls-kpi-lg: -0.025em;

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

  /* ---- Spacing (4px base) ---- */
  --sp-0: 0;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-14: 56px;
  --sp-18: 72px;

  /* ---- Radius ---- */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  /* ---- Elevation ---- */
  --shadow-0: none;
  --shadow-1: 0 1px 2px rgba(16, 24, 40, 0.04), 0 0 0 1px rgba(16, 24, 40, 0.06);
  --shadow-2: 0 8px 24px rgba(16, 24, 40, 0.08), 0 0 0 1px rgba(16, 24, 40, 0.08);
  --shadow-3: 0 20px 48px rgba(16, 24, 40, 0.14);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in:  cubic-bezier(0.4, 0, 1, 1);
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 220ms;

  /* ---- Layout ---- */
  --sidebar-w: 256px;
  --topbar-h: 56px;
  --content-max: 1440px;
}

/* ============================================================
   Dark mode — applied via [data-theme="dark"] or prefers
   ============================================================ */
[data-theme="dark"] {
  --bg-page:    #0F1722;
  --bg-surface: #1C2633;
  --bg-sunken:  #0F1722;
  --bg-subtle:  #18212D;
  --bg-nav:     #0F1722;
  --bg-hover:   rgba(20, 216, 204, 0.08);
  --bg-active:  rgba(20, 216, 204, 0.14);
  --bg-press:   rgba(255, 255, 255, 0.08);

  --fg-default: #E6EDF3;
  --fg-strong:  #F4F7FA;
  --fg-muted:   #8A95A5;
  --fg-subtle:  #5D6876;
  --fg-inverse: #0F1722;
  --fg-brand:   #52E5DC;
  --fg-link:    #52E5DC;

  --border-default: #2A3240;
  --border-strong:  #3A4456;
  --border-brand:   var(--brand-500);

  --focus-ring: 0 0 0 2px rgba(20, 216, 204, 0.7);

  --shadow-1: 0 0 0 1px rgba(255, 255, 255, 0.06);
  --shadow-2: 0 12px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.08);
  --shadow-3: 0 24px 56px rgba(0, 0, 0, 0.6);

  /* Dark-mode heatmap uses a lifted scale */
  --heat-0: #16302E;
  --heat-1: #1A4744;
  --heat-2: #1E6A64;
  --heat-3: #2DBFB3;
  --heat-4: #52E5DC;
}

/* Respect OS preference when no explicit theme */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-page:    #0F1722;
    --bg-surface: #1C2633;
    --bg-sunken:  #0F1722;
    --bg-subtle:  #18212D;
    --bg-nav:     #0F1722;
    --bg-hover:   rgba(20, 216, 204, 0.08);
    --bg-active:  rgba(20, 216, 204, 0.14);
    --bg-press:   rgba(255, 255, 255, 0.08);
    --fg-default: #E6EDF3;
    --fg-strong:  #F4F7FA;
    --fg-muted:   #8A95A5;
    --fg-subtle:  #5D6876;
    --fg-inverse: #0F1722;
    --fg-brand:   #52E5DC;
    --fg-link:    #52E5DC;
    --border-default: #2A3240;
    --border-strong:  #3A4456;
    --shadow-1: 0 0 0 1px rgba(255, 255, 255, 0.06);
    --shadow-2: 0 12px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.08);
  }
}

/* ============================================================
   Semantic element defaults
   ============================================================ */
html { font-family: var(--font-sans); color: var(--fg-default); background: var(--bg-page); }
body { margin: 0; font-size: var(--fs-body); line-height: var(--lh-body); font-feature-settings: 'cv11', 'ss01'; -webkit-font-smoothing: antialiased; }

h1, .h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); font-weight: var(--fw-bold); color: var(--fg-strong); margin: 0; }
h2, .h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); font-weight: var(--fw-semibold); color: var(--fg-strong); margin: 0; }
h3, .h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); font-weight: var(--fw-semibold); color: var(--fg-strong); margin: 0; }
h4, .h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); font-weight: var(--fw-semibold); color: var(--fg-strong); margin: 0; }
p   { margin: 0; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg-default); }
small, .small { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--fg-muted); }
.xs { font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--fg-muted); }
code, kbd, pre, .mono { font-family: var(--font-mono); font-size: 13px; }

.display { font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--ls-display); font-weight: var(--fw-bold); }
.kpi     { font-size: var(--fs-kpi); line-height: var(--lh-kpi); letter-spacing: var(--ls-kpi); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.kpi-lg  { font-size: var(--fs-kpi-lg); line-height: var(--lh-kpi-lg); letter-spacing: var(--ls-kpi-lg); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.muted   { color: var(--fg-muted); }
.strong  { color: var(--fg-strong); }
.brand   { color: var(--fg-brand); }

a { color: var(--fg-link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }

:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }

/* Handy utilities used by preview cards + UI kits */
.tabular { font-variant-numeric: tabular-nums; }