@import url("../design-system/fonts/fonts.css"); /* fonts @import — re-add after regen, see design-tokens-build (DTB_FONTS_IMPORT) */
/**
 * Do not edit directly.
 * Generated by the design-tokens-build skill from DESIGN.md (W3C DTCG export).
 * Re-generate, do not hand-edit. Source of truth: <project>/DESIGN.md
 * System of record: chosen showcase variant D ("B + signed green") —
 * values mirror design-system/radarnet-design-system.html exactly.
 */

:root {
  /* ── Core color roles ── */
  --color-primary: #4a357d;          /* brand plum — hero, primary, accent, focus, borders */
  --color-ink: #2e2150;              /* deep plum ink — headlines (accent-ink) */
  --color-secondary: #4a4366;        /* secondary text */
  --color-muted: #574f73;            /* muted text / captions (~7:1 on green canvas; darkened from #6e6788 for perceptual contrast) */
  --color-text: #1a1430;             /* body copy — near-black purple-cast (AAA) */
  --color-neutral: #f1f7e6;          /* signed green-tint canvas — page base */
  --color-surface: #ffffff;          /* raised card */
  --color-surface-lavender: #e6e0ff; /* lavender body-band wash */
  --color-surface-green: #e8f2d8;    /* deeper green body-band fill */
  --color-mint: #c7ebc7;             /* promoted positive accent */
  --color-mint-600: #2c7a4b;         /* AA text on mint */
  --color-peach: #ffe7d6;            /* soft pastel accent */
  --color-on-accent: #ffffff;        /* text on plum */
  --color-success: #1e8e63;
  --color-warn: #b7791f;
  --color-error: #c0392b;
  --color-success-50: #e4f4ec;
  --color-warn-50: #faf1df;
  --color-error-50: #fbe9e7;
  --color-mint-50: #eaf7ea;
  --color-peach-50: #fff4ec;
  --color-border: #d8dec9;           /* green-cast hairline on canvas */
  --color-border-lavender: #cfc6ec;  /* lavender-cast border for inputs/cards */

  /* ── Brand plum ramp (derived from #4A357D) ── */
  --purple-50: #f3f0fa;
  --purple-100: #e7e1f4;
  --purple-200: #cdc2e8;
  --purple-300: #a593d2;
  --purple-400: #7b63b5;
  --purple-500: #4a357d;
  --purple-600: #3e2c6a;             /* hover */
  --purple-700: #322356;             /* active */
  --purple-800: #2e2150;             /* ink */
  --purple-900: #211739;             /* depth shadow */
  --lavender-2: #efebff;             /* secondary lavender wash */

  /* ── Spacing (base-4) ── */
  --spacing-base: 4px;
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 40px;
  --spacing-2xl: 64px;
  --spacing-3xl: 96px;

  /* ── Radii — fluid clamp + clean scale ── */
  --rounded-xs: 4px;
  --rounded-sm: 8px;
  --rounded-md: clamp(10px, 0.6vw + 8px, 14px);
  --rounded-lg: clamp(16px, 1vw + 12px, 22px);
  --rounded-xl: clamp(22px, 1.6vw + 16px, 32px);
  --rounded-full: 9999px;

  /* ── Iconography — uniform 1.75 stroke at every size (domain + UI sets) ── */
  --icon-size-sm: 16px;
  --icon-size-md: 20px;
  --icon-size-base: 24px;
  --icon-size-lg: 32px;
  --icon-stroke-width: 1.75;

  /* ── Plum-tinted shadow ladder (never gray-black) ── */
  --shadow-e1: 0 1px 2px rgba(74, 53, 125, 0.08);
  --shadow-e2: 0 2px 4px rgba(74, 53, 125, 0.08), 0 4px 12px rgba(74, 53, 125, 0.10);
  --shadow-e3: 0 4px 10px rgba(74, 53, 125, 0.10), 0 12px 28px rgba(74, 53, 125, 0.12);
  --shadow-e4: 0 8px 20px rgba(74, 53, 125, 0.12), 0 24px 48px rgba(74, 53, 125, 0.14);
  --shadow-e5: 0 18px 50px rgba(74, 53, 125, 0.18);
  --shadow-focus-ring: 0 0 0 1px var(--color-surface), 0 0 0 3px rgba(74, 53, 125, 0.5);

  /* ── Gradient recipes (restrained, atmospheric) ── */
  --gradient-hero: linear-gradient(135deg, #6a52a0 0%, #4a357d 48%, #322356 100%);
  --glow-card: radial-gradient(80% 70% at 85% 0%, rgba(123, 99, 181, 0.12) 0%, rgba(123, 99, 181, 0) 65%);
  --glow-green: radial-gradient(70% 70% at 20% 0%, rgba(120, 170, 90, 0.14) 0%, rgba(120, 170, 90, 0) 65%);
  --glow-radial: radial-gradient(60% 60% at 70% 20%, rgba(74, 53, 125, 0.14) 0%, rgba(74, 53, 125, 0) 70%);

  /* ── Typography — Heebo (display+body), JetBrains Mono (code/eyebrow) ── */
  --font-display: "Heebo";
  --font-h1: "Heebo";
  --font-h2: "Heebo";
  --font-h3: "Heebo";
  --font-body-lg: "Heebo";
  --font-body: "Heebo";
  --font-label: "Heebo";
  --font-eyebrow: "JetBrains Mono";
  --font-caption: "Heebo";
  --font-mono: "JetBrains Mono";

  --text-display: clamp(44px, 6vw, 72px);
  --text-h1: 40px;
  --text-h2: 28px;
  --text-h3: 22px;
  --text-body-lg: 18px;
  --text-body: 16px;
  --text-label: 13px;
  --text-eyebrow: 12px;
  --text-caption: 12px;

  --leading-display: 1.02;
  --leading-h1: 1.1;
  --leading-h2: 1.18;
  --leading-h3: 1.25;
  --leading-body: 1.6;
  --leading-label: 1.2;
  --leading-caption: 1.4;

  --tracking-display: -0.035em;
  --tracking-h1: -0.01em;
  --tracking-label: 0.02em;
  --tracking-eyebrow: 0.14em;

  --font-weight-display: 900;
  --font-weight-h1: 700;
  --font-weight-h2: 700;
  --font-weight-h3: 500;
  --font-weight-body-lg: 400;
  --font-weight-body: 400;
  --font-weight-label: 600;
  --font-weight-eyebrow: 500;
  --font-weight-caption: 400;
}