/* ============================================================
   VDS Lead Platform — Design Tokens
   Single source of truth. tokens only — no component rules here.
   Light = :root. Dark = [data-theme="dark"].
   ============================================================ */

:root,
[data-theme="light"] {
  color-scheme: light;

  /* ---- Ink / text scale ---- */
  --ink: #0f1525;
  --ink-2: #1f2940;
  --ink-soft: #2a3147;
  --muted: #5b6478;
  --muted-2: #8a93a6;

  /* ---- Lines ---- */
  --line: #e6eaf0;
  --line-strong: #d2d9e6;

  /* ---- Surfaces ---- */
  --paper: #f6f7f9;
  --paper-2: #eef1f6;
  --panel: #ffffff;

  /* ---- Brand ---- */
  --red: #e21a23;
  --red-hover: #ad141c;
  --red-dark: #891016;
  --red-tint: #fce8e9;

  /* ---- Accents ---- */
  --green: #0f766e;
  --gold: #f4c15d;
  --slate: #334155;

  /* ---- Semantic: status stages ---- */
  --stage-new: #64748b;          /* slate-grey — fresh, untouched */
  --stage-new-tint: #eef1f6;
  --stage-reviewing: #b45309;    /* amber — being looked at */
  --stage-reviewing-tint: #fdf2e3;
  --stage-qualified: #1d4ed8;    /* blue — qualified */
  --stage-qualified-tint: #e7edfd;
  --stage-contacted: #7c3aed;    /* violet — outreach made */
  --stage-contacted-tint: #f1eafe;
  --stage-closed: #0f766e;       /* teal-green — won/closed */
  --stage-closed-tint: #e3f2f0;

  /* ---- Semantic: enrichment confidence ---- */
  --conf-high: #0f766e;
  --conf-high-tint: #e3f2f0;
  --conf-medium: #b45309;
  --conf-medium-tint: #fdf2e3;
  --conf-low: #5b6478;
  --conf-low-tint: #eef1f6;

  /* ---- Semantic: health dots ---- */
  --health-ok: #0f766e;
  --health-warn: #d97706;
  --health-bad: #e21a23;

  /* ---- Semantic: deltas / trends ---- */
  --delta-up: #0f766e;
  --delta-down: #e21a23;

  /* ---- Feedback tints ---- */
  --amber: #d97706;
  --amber-tint: #fdf2e3;
  --info: #1d4ed8;
  --info-tint: #e7edfd;
  --ok: #0f766e;
  --ok-tint: #e3f2f0;

  /* ---- Chart ink (channel/series) ---- */
  --series-1: #e21a23;
  --series-2: #1d4ed8;
  --series-3: #0f766e;
  --series-4: #7c3aed;
  --series-grid: #e6eaf0;
  --series-area: rgba(226, 26, 35, 0.10);

  /* ---- Radii ---- */
  --radius-xs: 4px;
  --radius: 8px;
  --radius-l: 12px;
  --radius-pill: 999px;

  /* ---- Shadows (light — softened polish pass) ---- */
  --shadow-xs: 0 1px 2px rgba(15, 21, 37, 0.05);
  --shadow-sm: 0 1px 3px rgba(15, 21, 37, 0.07), 0 1px 2px rgba(15, 21, 37, 0.035);
  --shadow-md: 0 4px 12px rgba(15, 21, 37, 0.07), 0 2px 4px rgba(15, 21, 37, 0.04);
  --shadow-lg: 0 12px 32px rgba(15, 21, 37, 0.12), 0 4px 8px rgba(15, 21, 37, 0.05);

  /* ---- Focus ring ---- */
  --focus-ring: 0 0 0 2px var(--panel), 0 0 0 4px rgba(226, 26, 35, 0.55);

  /* ---- Overlay scrim ---- */
  --scrim: rgba(15, 21, 37, 0.46);

  /* ---- Mono stack (one source for code/ids) ---- */
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---- Gradients (2026 layer: atmosphere, light model, brand moments) ---- */
  --grad-brand: linear-gradient(135deg, var(--red), var(--red-dark));
  /* surfaces are "lit from above": white top → 2% ink at the foot */
  --grad-card: linear-gradient(180deg, var(--panel) 0%, color-mix(in srgb, var(--ink) 2%, var(--panel)) 100%);
  --grad-raised: linear-gradient(180deg, var(--panel), color-mix(in srgb, var(--ink) 2.5%, var(--panel)));
  /* page atmosphere: faint brand + cool washes in opposite corners */
  --grad-page:
    radial-gradient(1100px 640px at 88% -12%, color-mix(in srgb, var(--red) 4%, transparent), transparent 62%),
    radial-gradient(900px 600px at -8% 112%, color-mix(in srgb, var(--info) 3%, transparent), transparent 58%);
  --grad-ink-text: linear-gradient(180deg, var(--ink) 25%, color-mix(in srgb, var(--ink) 64%, var(--muted)) 100%);

  /* ---- Glass (2026 luxe layer: a restrained touch of frost on elevated surfaces) ---- */
  --glass-blur: saturate(1.06) blur(5px);          /* floating chrome: context bar, panel, palette */
  --glass-blur-soft: saturate(1.02) blur(1.5px);   /* data surfaces: cards, tables — barely there */
  --glass-fill: color-mix(in srgb, var(--panel) 93%, transparent);        /* dialog / drawer / popover */
  --glass-fill-strong: color-mix(in srgb, var(--panel) 99%, transparent); /* cards / tables stay legible */
  --glass-border: color-mix(in srgb, #fff 12%, var(--line));
  --glass-edge: inset 0 1px 0 rgba(255, 255, 255, 0.16);                  /* signature lit top edge */
  --glass-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 34%);

  /* ---- Motion ---- */
  --duration: .18s;
  --ease: cubic-bezier(.2, .8, .2, 1);

  /* ---- Layout ---- */
  --rail-w: 56px;
  --panel-w: 240px;
  --contextbar-h: 56px;

  /* ---- Type ---- */
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fs-base: 15px;
}

/* ============================================================
   DARK THEME
   Dark navy-ink surfaces derived from the ink scale.
   Shadows soften into borders; tints become translucent overlays.
   ============================================================ */
[data-theme="dark"] {
  color-scheme: dark;

  --ink: #eef1f8;
  --ink-2: #d4dae8;
  --ink-soft: #c0c8da;
  --muted: #a3acc2;
  --muted-2: #76809b;

  --line: #1c2438;
  --line-strong: #2e3a58;

  --paper: #070a12;
  --paper-2: #0c1220;
  --panel: #0f1524;

  --red: #f0383f;
  --red-hover: #f4595f;
  --red-dark: #c11d24;
  --red-tint: rgba(240, 56, 63, 0.14);

  --green: #2dd4bf;
  --gold: #f0bf66;
  --slate: #94a3b8;

  --stage-new: #94a3b8;
  --stage-new-tint: rgba(148, 163, 184, 0.16);
  --stage-reviewing: #fbbf24;
  --stage-reviewing-tint: rgba(251, 191, 36, 0.16);
  --stage-qualified: #60a5fa;
  --stage-qualified-tint: rgba(96, 165, 250, 0.16);
  --stage-contacted: #c084fc;
  --stage-contacted-tint: rgba(192, 132, 252, 0.16);
  --stage-closed: #2dd4bf;
  --stage-closed-tint: rgba(45, 212, 191, 0.16);

  --conf-high: #2dd4bf;
  --conf-high-tint: rgba(45, 212, 191, 0.16);
  --conf-medium: #fbbf24;
  --conf-medium-tint: rgba(251, 191, 36, 0.16);
  --conf-low: #9aa3b8;
  --conf-low-tint: rgba(154, 163, 184, 0.14);

  --health-ok: #2dd4bf;
  --health-warn: #fbbf24;
  --health-bad: #f0383f;

  --delta-up: #2dd4bf;
  --delta-down: #f0383f;

  --amber: #fbbf24;
  --amber-tint: rgba(251, 191, 36, 0.16);
  --info: #60a5fa;
  --info-tint: rgba(96, 165, 250, 0.16);
  --ok: #2dd4bf;
  --ok-tint: rgba(45, 212, 191, 0.16);

  --series-1: #f0383f;
  --series-2: #60a5fa;
  --series-3: #2dd4bf;
  --series-4: #c084fc;
  --series-grid: #1c2438;
  --series-area: rgba(240, 56, 63, 0.18);

  /* In dark, depth = a 1px inset top-highlight + soft drop. Borders carry structure. */
  --shadow-xs: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 0 0 1px rgba(255, 255, 255, 0.03);
  --shadow-sm: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 1px 2px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.04);
  --shadow-md: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 6px 16px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-lg: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 16px 40px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.06);

  --focus-ring: 0 0 0 2px var(--panel), 0 0 0 4px rgba(240, 56, 63, 0.6);

  --scrim: rgba(2, 4, 10, 0.62);

  /* dark: light source flips to a faint top sheen; washes glow a touch more */
  --grad-card: linear-gradient(180deg, color-mix(in srgb, #fff 2.5%, var(--panel)) 0%, var(--panel) 58%);
  --grad-raised: linear-gradient(180deg, color-mix(in srgb, #fff 3.5%, var(--panel)), var(--panel));
  --grad-page:
    radial-gradient(1100px 640px at 88% -12%, color-mix(in srgb, var(--red) 6%, transparent), transparent 62%),
    radial-gradient(900px 600px at -8% 112%, color-mix(in srgb, var(--info) 4%, transparent), transparent 58%);
  --grad-ink-text: linear-gradient(180deg, var(--ink) 30%, color-mix(in srgb, var(--ink) 70%, var(--muted-2)) 100%);

  /* dark glass: the lit edge dims to a faint top sheen; navy ink carries the fill */
  --glass-blur: saturate(1.05) blur(6px);
  --glass-blur-soft: saturate(1.02) blur(2px);
  --glass-fill: color-mix(in srgb, var(--panel) 90%, transparent);
  --glass-fill-strong: color-mix(in srgb, var(--panel) 98%, transparent);
  --glass-border: color-mix(in srgb, #fff 4%, var(--line));
  --glass-edge: inset 0 1px 0 rgba(255, 255, 255, 0.022);
  --glass-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.014) 0%, rgba(255, 255, 255, 0) 34%);
}