/* Lattice theme tokens.
   This is the ONLY file permitted to contain raw colour values.
   Dark values are taken verbatim from lattice-ai.io. Light values are a
   derived counterpart, reviewed on the palette mockup. Every text pairing
   here has a measured contrast ratio recorded in the design spec. */

/* ── Dark, and the default when no attribute is set ──────────────────── */
:root,
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #030515;
  --bg-secondary: #070b20;
  --bg-section: #080d25;
  --bg-elevated: #0b102b;

  --surface: #0d122e;
  --surface-2: #13163a;
  --surface-3: #191743;
  --surface-hover: #1d1b47;

  --border-subtle: rgba(160, 125, 255, 0.18);
  --border: rgba(177, 138, 255, 0.28);
  --border-hover: rgba(177, 138, 255, 0.40);
  --border-strong: rgba(236, 76, 190, 0.42);
  --divider: rgba(255, 255, 255, 0.06);

  --text-primary: #f8f8fb;
  --text-secondary: #d3d2de;
  --text-muted: #9695a8;
  --text-subtle: #717083;

  /* On-surface: used as text or icon colour. */
  --accent: #ec19b8;
  --accent-hover: #f978d6;
  --accent-glow-soft: rgba(236, 25, 184, 0.07);
  --accent-glow: rgba(236, 25, 184, 0.18);
  --accent-glow-strong: rgba(236, 25, 184, 0.35);
  --green: #2dbe63;
  --blue: #4776f4;
  --orange: #ff641a;
  --red: #ef4444;

  /* Action: text-bearing surfaces. Never the gradient.
     The hover darkens, as it does in light, so the white label gains
     contrast rather than losing it: 4.90:1 at rest, 6.36:1 on hover. */
  --brand-action: #9148e7;
  --brand-action-hover: #7c33d6;
  --brand-action-text: #ffffff;
  /* The purple-family counterpart of --accent-glow-strong, at the same alpha,
     for the drop shadow around a --brand-action surface. */
  --brand-action-glow: rgba(145, 72, 231, 0.35);

  --tint-success-bg: #0f2a1c;
  --tint-success-text: #4ade80;
  --tint-info-bg: #101c3a;
  --tint-info-text: #7ea6ff;
  --tint-danger-bg: #2b1116;
  --tint-danger-text: #fca5a5;
  --tint-warning-bg: #2d1510;
  --tint-warning-text: #ffa366;
  --tint-brand-bg: #2a0f28;
  --tint-brand-text: #f978d6;
  --tint-neutral-bg: #191743;
  --tint-neutral-text: #d3d2de;

  --overlay-subtle: rgba(255, 255, 255, 0.025);
  --overlay-soft: rgba(255, 255, 255, 0.05);
  --overlay-medium: rgba(255, 255, 255, 0.09);
  --overlay-strong: rgba(255, 255, 255, 0.14);

  /* Status glows: the per-hue counterpart of --accent-glow. The weak rung is
     a wash or coloured drop shadow; the strong rung is decorative trim on an
     already-tinted surface. A border that is the only signal for a state uses
     the solid --green/--blue/--red/--orange instead. */
  --green-glow: rgba(45, 190, 99, 0.12);
  --green-glow-strong: rgba(45, 190, 99, 0.26);
  --blue-glow: rgba(71, 118, 244, 0.12);
  --blue-glow-strong: rgba(71, 118, 244, 0.26);
  --red-glow: rgba(239, 68, 68, 0.12);
  --red-glow-strong: rgba(239, 68, 68, 0.26);
  --orange-glow: rgba(255, 100, 26, 0.12);
  --orange-glow-strong: rgba(255, 100, 26, 0.26);

  /* A frosted chrome surface: the sidebar, header, toast and floating cards
     paint this behind a backdrop-filter, so it must stay translucent. */
  --surface-translucent: rgba(13, 18, 46, 0.72);

  /* Shadow ink. --shadow-card and --shadow-card-hover are complete shadows at
     a fixed 12/40 and 16/48 geometry; these are the colour alone, for the
     shadows whose geometry differs. */
  --shadow-ink-soft: rgba(0, 0, 0, 0.18);
  --shadow-ink: rgba(0, 0, 0, 0.32);
  --shadow-ink-deep: rgba(0, 0, 0, 0.58);

  --shadow-card: 0 12px 40px rgba(0, 0, 0, 0.20);
  --shadow-card-hover: 0 16px 48px rgba(0, 0, 0, 0.28);
  --focus-ring: #d048e1;

  --scrim: rgba(0, 0, 0, 0.60);
}

/* ── Light ───────────────────────────────────────────────────────────── */
:root[data-theme="light"] {
  color-scheme: light;

  --bg: #fbfaff;
  --bg-secondary: #f5f3fc;
  --bg-section: #f0edf9;
  --bg-elevated: #ffffff;

  --surface: #ffffff;
  --surface-2: #f7f5fd;
  --surface-3: #f0edf9;
  --surface-hover: #f2eefb;

  --border-subtle: rgba(93, 58, 173, 0.14);
  --border: rgba(93, 58, 173, 0.22);
  --border-hover: rgba(93, 58, 173, 0.34);
  --border-strong: rgba(236, 25, 184, 0.38);
  --divider: rgba(22, 19, 31, 0.08);

  --text-primary: #16131f;
  --text-secondary: #4a4458;
  --text-muted: #6e6880;
  --text-subtle: #908a9e;

  --accent: #b0067f;
  --accent-hover: #8a0563;
  --accent-glow-soft: rgba(176, 6, 127, 0.04);
  --accent-glow: rgba(176, 6, 127, 0.10);
  --accent-glow-strong: rgba(176, 6, 127, 0.20);
  --green: #15803d;
  --blue: #2d5ce0;
  --orange: #c2410c;
  --red: #dc2626;

  --brand-action: #6929be;
  --brand-action-hover: #581fa3;
  --brand-action-text: #ffffff;
  --brand-action-glow: rgba(105, 41, 190, 0.20);

  --tint-success-bg: #e8f7ee;
  --tint-success-text: #15803d;
  --tint-info-bg: #e8eefc;
  --tint-info-text: #2d5ce0;
  --tint-danger-bg: #fdeaea;
  --tint-danger-text: #b91c1c;
  --tint-warning-bg: #fdeee6;
  --tint-warning-text: #c2410c;
  --tint-brand-bg: #fdeaf6;
  --tint-brand-text: #b0067f;
  --tint-neutral-bg: #f0edf9;
  --tint-neutral-text: #4a4458;

  --overlay-subtle: rgba(22, 19, 31, 0.02);
  --overlay-soft: rgba(22, 19, 31, 0.04);
  --overlay-medium: rgba(22, 19, 31, 0.07);
  --overlay-strong: rgba(22, 19, 31, 0.11);

  --green-glow: rgba(21, 128, 61, 0.07);
  --green-glow-strong: rgba(21, 128, 61, 0.15);
  --blue-glow: rgba(45, 92, 224, 0.07);
  --blue-glow-strong: rgba(45, 92, 224, 0.15);
  --red-glow: rgba(220, 38, 38, 0.07);
  --red-glow-strong: rgba(220, 38, 38, 0.15);
  --orange-glow: rgba(194, 65, 12, 0.07);
  --orange-glow-strong: rgba(194, 65, 12, 0.15);

  --surface-translucent: rgba(255, 255, 255, 0.72);

  --shadow-ink-soft: rgba(60, 40, 110, 0.09);
  --shadow-ink: rgba(60, 40, 110, 0.16);
  --shadow-ink-deep: rgba(60, 40, 110, 0.29);

  --shadow-card: 0 12px 40px rgba(60, 40, 110, 0.10);
  --shadow-card-hover: 0 16px 48px rgba(60, 40, 110, 0.14);
  --focus-ring: #a21caf;

  --scrim: rgba(22, 19, 31, 0.40);
}

/* ── Brand and geometry: identical in every theme ────────────────────── */
:root {
  --brand-orange: #ff641a;
  --brand-orange-light: #ff8a21;
  --brand-coral: #ff4938;
  --brand-pink: #f72a8b;
  --brand-magenta: #ec19b8;
  --brand-magenta-deep: #be079a;
  --brand-purple: #9148e7;
  --brand-purple-deep: #6929be;

  --gradient-brand-horizontal: linear-gradient(90deg, #ff7a1a, #ff4938 30%, #f4248c 60%, #b92be0);
  --gradient-brand-diagonal: linear-gradient(135deg, #ff7a1a, #f4248c 58%, #9148e7);
  --gradient-brand-reverse: linear-gradient(90deg, #b92be0, #f4248c 42%, #ff7a1a);

  --sidebar-w: 236px;
  --radius: 12px;
  --radius-lg: 18px;
}