/* Magnalev Core — design tokens.
   Concatenated verbatim from the Magnalev Core Core Design System project (tokens/):
   fonts.css, colors.css, typography.css, spacing.css, shape.css, motion.css.
   Do not hand-edit values here — change them in the design system and re-sync. */

/* ---- fonts.css ----
   SUBSTITUTION NOTICE: no font binaries were supplied with the brand materials.
   The business card's wordmark is a geometric humanist sans (Century Gothic / Futura
   lineage). Nearest free match: Jost. The card's tagline is a tight bold grotesque in
   all caps with wide tracking. Nearest free match: Archivo (600/700).
   The Google Fonts stylesheet is loaded with a <link> tag in each page's <head>,
   not from this file, so the request starts during HTML parsing instead of waiting
   for this stylesheet to download. Replace with local @font-face rules + woff2 in
   assets/fonts/ when the real licensed faces are available. */

:root {
  --font-display: "Jost", "Century Gothic", "Futura", system-ui, sans-serif;
  --font-body: "Jost", "Century Gothic", system-ui, sans-serif;
  --font-label: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", monospace;
}

/* ---- colors.css ---- */
:root {
  /* Navy: the card stock colour. */
  --navy-900: #14182b;
  --navy-800: #1b2038;
  --navy-700: #262c4b;
  --navy-600: #333a5e;
  --navy-500: #4a5279;
  --navy-300: #8f96b3;
  --navy-100: #ced2e0;

  /* Cream: the card's ink / reverse face. */
  --cream-50: #fbf9f3;
  --cream-100: #f4f0e6;
  --cream-200: #e9e3d4;
  --cream-300: #d8d0bc;
  --cream-400: #b9af97;

  /* Gust — aerated teal, the single interactive accent. */
  --gust-700: #1f6f69;
  --gust-500: #2f9c92;
  --gust-300: #6fc4bb;
  --gust-100: #d5ece9;

  /* Volt — warm output/energy highlight, used sparingly for data. */
  --volt-700: #a9761f;
  --volt-500: #e0a83c;
  --volt-200: #f6e3bb;

  /* Status */
  --green-500: #3f9e6a;
  --amber-500: #d98e2b;
  --red-500: #c2453d;

  /* Semantic aliases — always prefer these in components. */
  --surface-page: var(--cream-100);
  --surface-raised: var(--cream-50);
  --surface-sunken: var(--cream-200);
  --surface-inverse: var(--navy-800);
  --surface-inverse-raised: var(--navy-700);
  --surface-accent: var(--gust-100);

  --text-heading: var(--navy-900);
  --text-body: var(--navy-700);
  --text-muted: var(--navy-500);
  --text-inverse: var(--cream-100);
  --text-inverse-muted: var(--navy-300);
  --text-accent: var(--gust-700);
  --text-link: var(--gust-700);
  --text-link-hover: var(--navy-900);

  --border-hairline: rgba(20, 24, 43, 0.14);
  --border-strong: rgba(20, 24, 43, 0.38);
  --border-inverse: rgba(244, 240, 230, 0.22);
  --border-focus: var(--gust-500);

  --action-primary-bg: var(--navy-800);
  --action-primary-bg-hover: var(--navy-900);
  --action-primary-fg: var(--cream-100);
  --action-accent-bg: var(--gust-500);
  --action-accent-bg-hover: var(--gust-700);
  --action-accent-fg: var(--cream-50);
  --action-quiet-fg: var(--navy-700);

  --status-ok: var(--green-500);
  --status-warn: var(--amber-500);
  --status-error: var(--red-500);
  --data-output: var(--volt-500);
}

/* Inverse scope: apply to any navy section; components read the same aliases. */
.mlc-inverse {
  --surface-page: var(--navy-800);
  --surface-raised: var(--navy-700);
  --surface-sunken: var(--navy-900);
  --text-heading: var(--cream-50);
  --text-body: var(--cream-100);
  --text-muted: var(--navy-300);
  --text-link: var(--gust-300);
  --text-link-hover: var(--cream-50);
  --text-accent: var(--gust-300);
  --border-hairline: rgba(244, 240, 230, 0.18);
  --border-strong: rgba(244, 240, 230, 0.42);
  --action-primary-bg: var(--cream-100);
  --action-primary-fg: var(--navy-900);
  --action-primary-bg-hover: var(--cream-50);
  --action-quiet-fg: var(--cream-100);
}

/* ---- typography.css ---- */
:root {
  --text-display-1: 4.5rem;   /* 72px — hero only */
  --text-display-2: 3.25rem;  /* 52px — section openers */
  --text-h1: 2.5rem;          /* 40px */
  --text-h2: 1.875rem;        /* 30px */
  --text-h3: 1.375rem;        /* 22px */
  --text-lead: 1.25rem;       /* 20px */
  --text-base: 1rem;
  --text-sm: 0.875rem;
  --text-xs: 0.75rem;

  --leading-tight: 1.04;
  --leading-snug: 1.2;
  --leading-normal: 1.55;
  --leading-loose: 1.7;

  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --tracking-display: -0.02em;
  --tracking-normal: 0;
  --tracking-label: 0.14em;   /* the card's tagline tracking */
  --tracking-eyebrow: 0.22em;

  --measure-prose: 62ch;
  --measure-lead: 48ch;
}

/* ---- spacing.css ---- */
:root {
  /* 4px base, doubling at the top end. Section rhythm is the 96/144 pair. */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 144px;

  --gutter: var(--space-5);
  --section-y: var(--space-9);
  --section-y-lg: var(--space-10);
  --container-max: 1200px;
  --container-narrow: 760px;
}

/* ---- shape.css ---- */
:root {
  /* The card's corner is a large, even radius — echoed at 14px on surfaces. */
  --radius-xs: 2px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 22px;
  --radius-pill: 999px;

  --border-width: 1px;
  --border-width-strong: 2px;

  /* Elevation is almost absent: hairline borders do the work.
     Shadows are cool-navy and low-contrast, never black. */
  --shadow-none: none;
  --shadow-sm: 0 1px 2px rgba(20, 24, 43, 0.06);
  --shadow-md: 0 6px 18px -8px rgba(20, 24, 43, 0.18);
  --shadow-lg: 0 24px 48px -24px rgba(20, 24, 43, 0.32);
  --shadow-inset-hairline: inset 0 0 0 1px var(--border-hairline);
  --ring-focus: 0 0 0 3px rgba(47, 156, 146, 0.34);

  --blur-veil: blur(14px);
  --veil-light: rgba(251, 249, 243, 0.78);
  --veil-dark: rgba(20, 24, 43, 0.72);
}

/* ---- motion.css ---- */
:root {
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 420ms;
  --duration-drift: 900ms;   /* long, wind-like entrances */

  /* Nothing bounces. Motion is eased-out and level. */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-drift: cubic-bezier(0.16, 0.84, 0.24, 1);

  --transition-control: color var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
  --press-scale: 0.985;
}