/* ============================================================
   Claudedicted Design System — TOKENS
   Ported verbatim from the design handoff (design_handoff_claudedicted/tokens).
   The values here are the contract. Components read them via var(--…).
   Load order matters: @import (fonts) must come first.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap");

:root {
  /* ---- Navy scale (surfaces) — dark is always the backdrop ---- */
  --cd-ink: #0c1124;        /* deepest base */
  --cd-midnight: #141d3c;
  --cd-deep: #1d2950;
  --cd-slate: #27345f;      /* lightest navy */

  /* ---- Indigo (the glow) ---- */
  --cd-indigo: #6C5CE7;        /* brand: borders, primary fill */
  --cd-indigo-bright: #9A8DFF; /* accents, links, hover, eyebrows */
  --cd-indigo-dim: #5a51b8;    /* gradient end */
  --cd-glow-rgb: 124, 111, 240; /* base for glow shadows */

  /* ---- Cream (the type) — cream is always the type, never the reverse ---- */
  --cd-cream: #F3ECDD;       /* primary type */
  --cd-cream-soft: #E7DEC9;  /* secondary type */

  /* ---- Muted blues (body, captions, meta) ---- */
  --cd-muted: #9aa2cf;       /* body, captions */
  --cd-muted-dim: #6b75a3;   /* labels, meta */
  --cd-muted-faint: #5e688f; /* finest meta */
  --cd-reading: #cdd3ef;     /* long-form body on dark */

  /* ---- Semantic aliases ---- */
  --bg-base: var(--cd-ink);
  --text-primary: var(--cd-cream);
  --text-secondary: var(--cd-cream-soft);
  --text-body: var(--cd-reading);
  --text-muted: var(--cd-muted);
  --text-faint: var(--cd-muted-dim);
  --accent: var(--cd-indigo);
  --accent-bright: var(--cd-indigo-bright);
  --accent-dim: var(--cd-indigo-dim);

  /* hairline borders & glass surfaces */
  --border-hairline: rgba(154, 162, 207, 0.16);
  --border-hairline-soft: rgba(154, 162, 207, 0.12);
  --border-strong: rgba(154, 162, 207, 0.28);
  --border-accent: rgba(154, 141, 255, 0.5);
  --surface-card-top: rgba(39, 52, 95, 0.5);
  --surface-card-bottom: rgba(20, 29, 60, 0.5);
  --surface-glass: rgba(20, 29, 60, 0.6);

  /* gradients */
  --gradient-backdrop: radial-gradient(120% 90% at 50% 8%, #2c3b6b 0%, #1d2950 32%, #141d3c 60%, #0c1124 100%);
  --gradient-accent: linear-gradient(135deg, var(--cd-indigo), var(--cd-indigo-dim));
  --gradient-card: linear-gradient(180deg, var(--surface-card-top), var(--surface-card-bottom));

  /* ---- Typography ---- */
  --font-sans: "Inter", system-ui, -apple-system, sans-serif;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;
  --fw-black: 900;

  --text-display-size: clamp(40px, 7.4vw, 82px);
  --text-display-weight: var(--fw-black);
  --text-display-tracking: -0.04em;
  --text-display-leading: 1.02;

  --text-h2-size: clamp(28px, 4vw, 44px);
  --text-h2-weight: var(--fw-extrabold);
  --text-h2-tracking: -0.035em;
  --text-h2-leading: 1.08;

  --text-h3-size: clamp(19px, 2.6vw, 24px);
  --text-h3-weight: var(--fw-bold);
  --text-h3-tracking: -0.02em;

  --text-eyebrow-size: 12.5px;
  --text-eyebrow-weight: var(--fw-bold);
  --text-eyebrow-tracking: 0.3em;

  --text-body-size: 17px;
  --text-body-weight: var(--fw-regular);
  --text-body-leading: 1.6;

  --text-muted-size: 15px;
  --text-muted-weight: var(--fw-medium);

  /* ---- Spacing scale ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 26px;
  --space-7: 34px;
  --space-8: 48px;
  --space-9: 68px;

  /* ---- Corner radii ---- */
  --radius-pill: 999px;     /* buttons, inputs, tags, eyebrows */
  --radius-panel: 18px;     /* small panels, spec cards */
  --radius-card: 22px;      /* project cards */
  --radius-card-lg: 28px;   /* large reading sections */
  --radius-chip: 26%;       /* the mark's rounded square */

  /* ---- Layout ---- */
  --container-max: 1140px;
  --container-pad: 24px;

  /* ---- Glow (indigo box-shadow — the signature) ---- */
  --glow-mark: 0 0 26px rgba(124, 111, 240, 0.55), inset 0 0 14px rgba(124, 111, 240, 0.25);
  --glow-mark-sm: 0 0 22px rgba(124, 111, 240, 0.55), inset 0 0 12px rgba(124, 111, 240, 0.25);
  --glow-button: 0 10px 30px rgba(108, 92, 231, 0.5);
  --glow-button-hover: 0 14px 44px rgba(124, 111, 240, 0.7);
  --glow-focus: 0 0 0 3px rgba(124, 111, 240, 0.22);

  /* ---- Card lift shadow ---- */
  --shadow-card-hover: 0 18px 40px rgba(12, 17, 36, 0.5);

  /* ---- Borders ---- */
  --border-width-mark: 2.5px;
  --border-width-card: 1px;

  /* ---- Dot-grid texture (apply as background) ---- */
  --texture-dot-image: radial-gradient(rgba(154, 162, 207, 0.18) 1.1px, transparent 1.2px);
  --texture-dot-size: 30px 30px;
  --texture-dot-mask: radial-gradient(ellipse 90% 60% at 50% 22%, #000 35%, transparent 78%);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast: 0.18s;
}

::selection { background: rgba(154, 141, 255, 0.32); color: var(--cd-cream); }

/* The mark's idle glow pulse */
@keyframes cd-glow {
  0%, 100% { box-shadow: 0 0 22px rgba(124, 111, 240, 0.5), inset 0 0 12px rgba(124, 111, 240, 0.22); }
  50%      { box-shadow: 0 0 36px rgba(124, 111, 240, 0.85), inset 0 0 16px rgba(124, 111, 240, 0.34); }
}