/* ==========================================================================
   Next Ukraine Foundation — design tokens
   Mirrored verbatim from the Claude Design system
   "next-ukraine-foundation-design-system-d1bdb736".
   Edit tokens here; never hard-code a value in site.css.
   ========================================================================== */

@import url("../fonts/fonts.css");

/* --- colours ------------------------------------------------------------ */
:root {
  /* base — ink (navy family) */
  --ink-900: #16233c;
  --ink-700: #2a3e5e;
  --ink-500: #3a4d6a;
  --ink-300: #5b6d88;

  /* base — accent (signal orange) */
  --accent-600: #c44a1f;
  --accent-500: #e05a2b;
  --accent-300: #ec9370;
  --accent-100: #f8e4da;

  /* base — warm neutrals (paper family) */
  --paper-000: #ffffff;
  --paper-050: #faf9f7;
  --paper-100: #f4f3f1;
  --paper-200: #e9e7e3;
  --paper-300: #e4e1dc;
  --paper-400: #c7c4bd;
  --paper-500: #a3a09a;
  --paper-600: #7d7a74;
  --paper-700: #55524c;

  /* semantic — text */
  --text-display: var(--ink-900);
  --text-heading: var(--ink-900);
  --text-body: var(--paper-700);
  --text-muted: var(--paper-500);
  --text-faint: var(--paper-400);
  --text-accent: var(--accent-500);
  --text-on-dark: #ffffff;
  --text-on-dark-muted: #c3cbd8;
  --text-link: var(--accent-500);
  --text-link-hover: var(--accent-600);

  /* semantic — surfaces */
  --surface-page: var(--paper-000);
  --surface-card: var(--paper-100);
  --surface-card-alt: var(--paper-050);
  --surface-panel: var(--ink-700);
  --surface-panel-card: var(--ink-500);
  --surface-panel-accent: rgba(224, 90, 43, .18);
  --surface-inset: var(--paper-200);

  /* semantic — lines */
  --line-hairline: var(--paper-300);
  --line-strong: var(--ink-900);
  --line-accent: var(--accent-500);
  --line-on-dark: rgba(255, 255, 255, .22);

  /* semantic — states: NUF has no green/red semantic palette in source.
     accent = priority / active, ink = neutral, paper-500 = inactive. */
  --state-priority: var(--accent-500);
  --state-neutral: var(--ink-900);
  --state-inactive: var(--paper-500);
}

/* --- typography --------------------------------------------------------- */
:root {
  /* families */
  --font-display: "Spectral", Georgia, "Times New Roman", serif;
  --font-body: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* sizes — document scale, 16px body */
  --text-4xl: 56px;
  --text-3xl: 44px;
  --text-2xl: 34px;
  --text-xl: 26px;
  --text-lg: 21px;
  --text-md: 17px;
  --text-base: 16px;
  --text-sm: 14.5px;
  --text-xs: 13px;
  --text-2xs: 11.5px;

  /* line heights */
  --leading-display: 1.16;
  --leading-heading: 1.24;
  --leading-body: 1.55;
  --leading-tight: 1.35;
  --leading-label: 1.2;

  /* weights */
  --weight-display: 400;
  --weight-display-strong: 600;
  --weight-body: 400;
  --weight-body-strong: 500;
  --weight-label: 500;

  /* tracking */
  --tracking-display: -0.012em;
  --tracking-body: 0;
  --tracking-label: 0.16em;
  --tracking-label-tight: 0.1em;

  /* semantic roles */
  --type-display: var(--weight-display) var(--text-3xl)/var(--leading-display) var(--font-display);
  --type-title: var(--weight-display) var(--text-2xl)/var(--leading-heading) var(--font-display);
  --type-heading: var(--weight-display-strong) var(--text-lg)/var(--leading-heading) var(--font-display);
  --type-stat: var(--weight-display) var(--text-3xl)/1 var(--font-display);
  --type-body: var(--weight-body) var(--text-base)/var(--leading-body) var(--font-body);
  --type-body-sm: var(--weight-body) var(--text-sm)/var(--leading-body) var(--font-body);
  --type-label: var(--weight-label) var(--text-2xs)/var(--leading-label) var(--font-mono);
}

/* --- spacing ------------------------------------------------------------ */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  --gap-card: 20px;
  --gap-grid: 16px;
  --pad-card: 24px;
  --pad-card-sm: 18px;
  --pad-panel: 48px;
  --pad-page: 56px;
  --section-gap: 44px;
  --rule-gap: 14px;

  --measure-body: 68ch;
  --measure-display: 24ch;
}

/* --- borders ------------------------------------------------------------ */
:root {
  /* radii — the brand is square. Nothing is rounded except circular numerals. */
  --radius-none: 0px;
  --radius-sm: 2px;
  --radius-pill: 999px;

  --border-hairline: 1px;
  --border-strong: 2px;
  --border-accent-top: 3px;
  --border-accent-left: 4px;
  --border-bleed: 8px;

  --border-card: var(--border-hairline) solid var(--line-hairline);
  --border-rule: var(--border-hairline) solid var(--line-hairline);
  --border-rule-strong: var(--border-strong) solid var(--line-strong);
  --border-accent: var(--border-hairline) solid var(--line-accent);

  /* elevation — flat by design: separation comes from tone + rules, not shadow. */
  --shadow-none: none;
  --shadow-overlay: 0 18px 48px rgba(22, 35, 60, .18);
  --focus-ring: 0 0 0 2px var(--paper-000), 0 0 0 4px var(--accent-500);
}

/* --- motion ------------------------------------------------------------- */
:root {
  --ease-standard: cubic-bezier(.2, .6, .2, 1);
  --ease-out: cubic-bezier(0, 0, .2, 1);
  --duration-fast: 120ms;
  --duration-base: 180ms;
  --duration-slow: 320ms;
  --transition-hover:
    color var(--duration-fast) var(--ease-standard),
    background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard);
}

/* --- brand -------------------------------------------------------------- */
:root {
  --mark-size-sm: 20px;
  --mark-size-md: 38px;
  --mark-size-lg: 56px;
  --mark-size-xl: 120px;
  --mark-clearspace: 0.15em;

  --node-size: 11px;
  --node-size-lg: 22px;
  --node-ink: var(--ink-900);
  --node-global: var(--accent-500);
  --node-potential: transparent;
  --path-dash: 7 7;
  --path-possible: 2px dashed var(--accent-500);
  --path-complete: 2px solid var(--accent-500);
  --path-structure: 1px solid var(--line-hairline);
}

/* --- page rhythm (site-level, not in the DS token set) ------------------- */
:root {
  --page-max: 1400px;
  --pad-x: clamp(20px, 4vw, 56px);
  --pad-y-lg: clamp(56px, 7vw, 96px);
  --pad-y-md: clamp(48px, 6vw, 72px);
}