/* ============================================================
   DESIGN TOKENS — Lu marketing site
   Chorus identity: neutral canvas, cobalt primary, teal accent.
   Structural tokens (spacing/type/sources) from the Lu design
   system; color tokens are the Chorus override set. A dark
   palette applies inside any [data-theme="dark"] subtree.
   ============================================================ */

/* ---- Spacing, radius, shadow, motion ---- */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 36px;
  --space-9: 48px;
  --space-10: 64px;

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 14px;
  --radius-pill: 999px;

  --shadow-card: 0 1px 3px rgba(40, 38, 30, .06);
  --shadow-hover: 0 6px 20px rgba(40, 38, 30, .07);
  --shadow-pop: 0 8px 24px rgba(40, 38, 30, .10);

  --ease-standard: cubic-bezier(.2, .6, .2, 1);
  --dur-fast: .12s;
  --dur-med: .2s;
}

/* ---- Typography ---- */
:root {
  --font-sans: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 800;

  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-normal: 1.55;

  --tracking-display: -0.02em;
  --tracking-tight: -0.01em;
  --tracking-eyebrow: 0.12em;
  --tracking-wide: 0.16em;
}

/* ---- Source brand colors ---- */
:root {
  --src-discord: #5865F2;
  --src-steam: #1b2838;
  --src-reddit: #FF4500;
  --src-x: #0f1419;
  --src-tiktok: #111111;
  --src-instagram: #E4405F;
  --src-facebook: #0866FF;
  --src-google: #4285F4;
  --src-youtube: #FF0000;
}

[data-theme="dark"] {
  --src-steam: #66c0f4;
  --src-x: #e7e4dc;
  --src-tiktok: #e7e4dc;
}

/* ---- Chorus color identity · Light (default) ---- */
:root {
  --brand-forest: #3358ff;
  --brand-forest-deep: #2646e0;
  --brand-lime: #0e9e90;
  --brand-lime-ink: #ffffff;
  --brand-mint: #12b5a6;

  --paper: #f6f5f1;
  --surface: #ffffff;
  --surface-sunk: #ecebe4;

  --ink: #17181d;
  --ink-2: #2e3038;
  --text-soft: #64697a;
  --text-faint: #9aa0b0;

  --border: #e7e6df;
  --border-soft: #f1f0ea;
  --border-strong: #d2d1c8;

  --primary: var(--brand-forest);
  --primary-hover: var(--brand-forest-deep);
  --primary-ink: #ffffff;
  --primary-soft: #e6eaff;
  --accent: var(--brand-lime);
  --accent-ink: var(--brand-lime-ink);

  --cat-issue: #c0392b;    --cat-issue-bg: #fbe4e1;    --cat-issue-border: #f0cbc4;
  --cat-feedback: #b0327f; --cat-feedback-bg: #fae3f0; --cat-feedback-border: #edccdf;
  --cat-other: #2f7d8c;    --cat-other-bg: #e2eff2;    --cat-other-border: #cbe1e6;

  --status-open: #275fa6;     --status-open-bg: #e8eef8;     --status-open-border: #c7d6ef;
  --status-resolved: #1f8a5b; --status-resolved-bg: #e3f1ea; --status-resolved-border: #c3e2d1;
  --status-ignored: #74716a;  --status-ignored-bg: #eeece6;  --status-ignored-border: #ddd9cf;

  --sent-pos: #2f9a6f;
  --sent-neu: #b9bdc7;
  --sent-neg: #cf4436;

  --brand-forest-deep-canvas: #0c1a12;
}

/* ---- Chorus color identity · Dark ---- */
[data-theme="dark"] {
  --brand-forest: #4d70ff;
  --brand-forest-deep: #6a86ff;
  --brand-lime: #12c2b0;
  --brand-lime-ink: #04211e;
  --brand-mint: #12c2b0;

  --paper: #0e0f15;
  --surface: #171a24;
  --surface-sunk: #12141d;

  --ink: #eef0f6;
  --ink-2: #cdd2e0;
  --text-soft: #8f96ab;
  --text-faint: #636a80;

  --border: #222634;
  --border-soft: #1b1e2a;
  --border-strong: #323850;

  --primary: #4d70ff;
  --primary-hover: #6a86ff;
  --primary-ink: #060a1a;
  --primary-soft: #1a2040;
  --accent: #12c2b0;
  --accent-ink: #04211e;

  --cat-issue: #ff9080;    --cat-issue-bg: #2c1a17;    --cat-issue-border: #47302a;
  --cat-feedback: #f09ac8; --cat-feedback-bg: #2c1826; --cat-feedback-border: #46283c;
  --cat-other: #7fc6d6;    --cat-other-bg: #16262e;    --cat-other-border: #27414d;

  --status-open: #8fa6ff;     --status-open-bg: #171d34;     --status-open-border: #2c3a5b;
  --status-resolved: #35d6a4; --status-resolved-bg: #0f2a22; --status-resolved-border: #23453a;
  --status-ignored: #8f96ab;  --status-ignored-bg: #1a1e28;  --status-ignored-border: #2b303c;

  --sent-pos: #35d6a4;
  --sent-neu: #6b7080;
  --sent-neg: #ff7a72;

  --shadow-card: 0 1px 3px rgba(0, 0, 0, .34);
  --shadow-hover: 0 6px 20px rgba(0, 0, 0, .40);
  --shadow-pop: 0 10px 28px rgba(0, 0, 0, .50);
}