/* ============================================================
   NORLIGHT Study design system — design tokens
   Imported from the Claude Design project
   "Norlight Study Design System" (325cff18-7a18-4577-be37-6b043d92c97b)

   This file is the source of truth for brand values. Do not hand-edit
   values here; re-import from the design system instead.
   ============================================================ */

/* ---- Webfonts --------------------------------------------------------
   SUBSTITUTION NOTICE: the print collateral uses licensed fonts we do not
   have binaries for:
     Zuume Bold + Druk Text Medium (condensed heavy display caps) -> Anton
     Nexa Book / Bold / Black      (geometric sans, body + UI)    -> Outfit
     Acumin Pro Condensed Regular  (legal / job-code microtype)   -> Archivo Narrow
   Replace this @import with self-hosted @font-face rules once the real
   files are licensed. -------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Anton&family=Outfit:wght@300;400;500;600;700;800&family=Archivo+Narrow:wght@400;500&display=swap");

:root {
  /* ---- Brand base ---- */
  --nl-indigo: #1D0068;        /* logo wordmark violet */
  --nl-plum-900: #200B2C;      /* deepest plum, brochure footer */
  --nl-plum-800: #2A1440;
  --nl-plum-700: #31194B;      /* PRIMARY dark - all purple bands & panels */
  --nl-plum-600: #452C88;
  --nl-plum-400: #6B5490;
  --nl-plum-200: #C9BFDA;
  --nl-plum-050: #F3F0F8;

  --nl-pink-700: #C43C77;
  --nl-pink-600: #E24D8E;
  --nl-pink-500: #F15FA0;      /* PRIMARY accent - magenta panels, buttons, icon discs */
  --nl-pink-400: #F681B4;
  --nl-pink-200: #FBC7DE;
  --nl-pink-050: #FDEFF6;

  --nl-lime-600: #94A74E;
  --nl-lime-500: #BBD981;      /* section headings on plum, illustration greens */
  --nl-lime-300: #D3E7AC;
  --nl-lime-spark: #B5F94C;    /* logo starburst green - sparingly, never as a field */

  --nl-white: #FFFFFF;
  --nl-paper: #FFFDFB;
  --nl-grey-100: #ECECEC;
  --nl-grey-300: #C9C9CE;
  --nl-grey-500: #868998;
  --nl-ink: #231436;

  /* Hero band — the deep plum used behind the headline */
  --nl-hero: #2F053D;

  /* ---- Semantic ---- */
  --surface-page: var(--nl-white);
  --surface-card: var(--nl-white);
  --surface-sunken: var(--nl-plum-050);
  --surface-inverse: var(--nl-plum-700);
  --surface-accent: var(--nl-pink-500);
  --surface-accent-soft: var(--nl-pink-050);

  --text-heading: var(--nl-plum-700);
  --text-body: var(--nl-ink);
  --text-muted: var(--nl-grey-500);
  --text-on-inverse: var(--nl-white);
  --text-on-accent: var(--nl-white);
  --text-heading-inverse: var(--nl-lime-500);
  --text-link: var(--nl-pink-700);
  --text-link-hover: var(--nl-plum-700);

  --border-subtle: var(--nl-plum-200);
  --border-strong: var(--nl-plum-700);
  --border-accent: var(--nl-pink-500);

  --focus-ring: var(--nl-pink-500);
  --state-error: #C0392B;
  --state-success: var(--nl-lime-600);

  /* ---- Brand gradients (from the logo starburst trail) ---- */
  --grad-spark: linear-gradient(90deg, #F15FA0 0%, #E24D8E 35%, #BBD981 78%, #B5F94C 100%);
  --grad-plum: linear-gradient(180deg, #31194B 0%, #200B2C 100%);
  --grad-pink-wash: linear-gradient(160deg, #FDEFF6 0%, #FBC7DE 100%);

  /* ---- Typography ---- */
  --font-display: "Anton", "Zuume", "Druk Text", Impact, "Haettenschweiler", sans-serif;
  --font-sans: "Outfit", "Nexa", "Aalto Sans Pro", "Helvetica Neue", Arial, sans-serif;
  --font-legal: "Archivo Narrow", "Acumin Pro Condensed", "Arial Narrow", sans-serif;

  --fs-display-xl: clamp(44px, 6.2vw, 86px);
  --fs-display-lg: clamp(34px, 4.4vw, 60px);
  --fs-display-md: clamp(26px, 3vw, 40px);
  --fs-display-sm: 24px;
  --fs-h1: 40px;
  --fs-h2: 30px;
  --fs-h3: 22px;
  --fs-h4: 18px;
  --fs-body-lg: 19px;
  --fs-body: 17px;
  --fs-body-sm: 15px;
  --fs-caption: 13px;
  --fs-legal: 11px;

  --lh-display: 0.94;
  --lh-heading: 1.14;
  --lh-body: 1.55;
  --lh-tight: 1.3;

  --ls-display: 0.005em;   /* Anton stands in for Zuume: keep near-zero tracking */
  --ls-eyebrow: 0.14em;
  --ls-body: 0;

  --fw-book: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 800;

  /* ---- Spacing ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-7: 32px; --sp-8: 40px; --sp-9: 56px; --sp-10: 72px;
  --sp-11: 96px; --sp-12: 128px;

  --gutter: 24px;
  --container-max: 1160px;
  --container-narrow: 720px;
  --section-y: clamp(56px, 7vw, 112px);
  --field-height: 52px;
  --tap-min: 48px;

  /* ---- Effects ---- */
  --radius-xs: 4px; --radius-sm: 8px; --radius-md: 14px; --radius-lg: 24px;
  --radius-xl: 36px; --radius-pill: 999px;
  --radius-blob: 50% 50% 0 0 / 12% 12% 0 0;

  --shadow-xs: 0 1px 2px rgba(32, 11, 44, .08);
  --shadow-sm: 0 2px 8px rgba(32, 11, 44, .10);
  --shadow-md: 0 10px 28px rgba(32, 11, 44, .12);
  --shadow-lg: 0 22px 60px rgba(32, 11, 44, .18);
  --shadow-accent: 0 10px 24px rgba(241, 95, 160, .32);
  --shadow-inset-field: inset 0 0 0 1px var(--border-subtle);

  --ring: 0 0 0 3px rgba(241, 95, 160, .38);

  --ease-out: cubic-bezier(.2, .7, .3, 1);
  --ease-in-out: cubic-bezier(.6, 0, .2, 1);
  --dur-fast: 120ms;
  --dur: 200ms;
  --dur-slow: 420ms;
}