/* ============================================================================
   LinkMartin design tokens — VENDORED VERBATIM from the Claude Design project
   "LinkMartin Design System" (73c8385b-2b7b-467a-83e5-6e79cc031eea), 2026-08-05.

   Do not edit values here. Edit them in the design system and re-vendor, or the
   site and the product drift apart. Layer order below matches that project's
   styles.css exactly: fonts -> colors -> typography -> spacing -> radius ->
   elevation -> motion -> base.
   ============================================================================ */

/* ---- tokens/fonts.css ---- */
@import url("https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,600;8..60,700&family=Instrument+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap");
/* SUBSTITUTED FONTS — no font files were supplied with the brand source.
   Iowan Old Style -> Source Serif 4 · system UI sans -> Instrument Sans · SF Mono -> IBM Plex Mono.
   Replace the @import with @font-face rules pointing at assets/fonts/ when real files exist. */
:root {
  --lm-font-serif: "Source Serif 4", "Iowan Old Style", Georgia, Charter, serif;
  --lm-font-sans: "Instrument Sans", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --lm-font-mono: "IBM Plex Mono", "SF Mono", Consolas, "Liberation Mono", monospace;
}

/* ---- tokens/colors.css ---- */
:root {
  /* Brand purple. Pinned corridor: hue 245-258 deg, saturation BELOW 0.50.
     Saturation, not hue, is what keeps LinkMartin clear of NBC Peacock (h251 s0.63). */
  --lm-purple-50: #F5F3F9;
  --lm-purple-100: #ECE9F3;
  --lm-purple-200: #D5D0E4;
  --lm-purple-300: #B4ACCE;
  --lm-purple-400: #9187BE;
  --lm-purple-500: #7164B4; /* UI accent      h250 s0.35 l0.55 */
  --lm-purple-600: #544A85; /* primary, light h250 s0.29 l0.41 */
  --lm-purple-700: #463C6E; /* BRAND PRIMARY  h252 s0.29 l0.33 */
  --lm-purple-800: #372F57;
  --lm-purple-900: #241F3A;

  /* Steel-blue: the house martin's true upperparts. Illustration + accent only. */
  --lm-steel-100: #E6EBF3;
  --lm-steel-300: #5A6A85;
  --lm-steel-500: #2B3A55;
  --lm-steel-700: #182430;

  /* Warm neutral ramp. Warm paper is the house convention and it is also what
     separates our surfaces from Chrome's cool greys. */
  --lm-neutral-0: #FFFFFF;
  --lm-neutral-50: #FAF8F5;
  --lm-neutral-100: #F2EFE9;
  --lm-neutral-200: #DDD6CC;
  --lm-neutral-300: #C4BBAD;
  --lm-neutral-400: #948C7E;
  --lm-neutral-500: #6B6459;
  --lm-neutral-600: #4A453E;
  --lm-neutral-700: #33302A;
  --lm-neutral-900: #1C1B1A;

  /* Semantic hues, all muted to match the purple's low saturation */
  --lm-green-600: #4C6B4F;
  --lm-green-100: #E8EFE6;
  --lm-amber-600: #9A7A2E;
  --lm-amber-100: #F4ECD9;
  --lm-red-600: #9C4A3D;
  --lm-red-100: #F5E6E2;
  --lm-blue-600: #4A5A7A;
  --lm-blue-100: #E6EBF3;

  --lm-bird-white: #FFFFFF;

  --lm-chrome-toolbar-light: #F1F3F4;
  --lm-chrome-toolbar-dark: #292A2D;

  /* ================= SEMANTIC ALIASES ================= */
  --lm-brand: var(--lm-purple-700);
  --lm-brand-hover: var(--lm-purple-800);
  --lm-brand-active: var(--lm-purple-900);
  --lm-brand-soft: var(--lm-purple-100);
  --lm-accent: var(--lm-purple-500);
  --lm-accent-hover: var(--lm-purple-600);

  --lm-surface-page: var(--lm-neutral-50);
  --lm-surface-card: var(--lm-neutral-0);
  --lm-surface-sunken: var(--lm-neutral-100);
  --lm-surface-inverse: var(--lm-neutral-900);
  --lm-surface-brand: var(--lm-purple-700);
  --lm-surface-hover: var(--lm-purple-100);
  --lm-surface-selected: var(--lm-purple-100);

  --lm-text-heading: var(--lm-neutral-900);
  --lm-text-body: var(--lm-neutral-600);
  --lm-text-muted: var(--lm-neutral-400); /* PLACEHOLDERS ONLY - 3.33:1 on white, below AA. */
  --lm-text-meta: var(--lm-neutral-500);
  --lm-text-brand: var(--lm-purple-700);
  --lm-text-on-brand: var(--lm-neutral-0);
  --lm-text-link: var(--lm-purple-700);
  --lm-text-link-hover: var(--lm-purple-500);

  --lm-border: var(--lm-neutral-200);
  --lm-border-strong: var(--lm-neutral-300);
  --lm-border-brand: var(--lm-purple-700);
  --lm-focus-ring: var(--lm-purple-500);

  --lm-status-ok-fg: var(--lm-green-600);
  --lm-status-ok-bg: var(--lm-green-100);
  --lm-status-warn-fg: var(--lm-amber-600);
  --lm-status-warn-bg: var(--lm-amber-100);
  --lm-status-error-fg: var(--lm-red-600);
  --lm-status-error-bg: var(--lm-red-100);
  --lm-status-info-fg: var(--lm-blue-600);
  --lm-status-info-bg: var(--lm-blue-100);
}
/* ANTI-PALETTE. Never use these. On file so the values are recorded, not consumed.
   Chrome blue #4285F4 · Discord blurple #546CF0 · any purple at sat >= 0.50 ·
   blue-purple gradients (now the generic "AI" signifier, incl. Google's own AI surfaces). */

/* ---- tokens/typography.css ---- */
:root {
  --lm-text-2xs: 0.66rem;
  --lm-text-xs: 0.7rem;
  --lm-text-sm: 0.78rem;
  --lm-text-base: 0.87rem;
  --lm-text-md: 0.95rem;
  --lm-text-lg: 1.05rem;
  --lm-text-xl: 1.15rem;
  --lm-text-2xl: 1.25rem;
  --lm-text-3xl: 1.9rem;
  --lm-text-4xl: 2.6rem;
  --lm-text-5xl: 3.6rem;

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

  --lm-leading-tight: 1.2;
  --lm-leading-snug: 1.35;
  --lm-leading-normal: 1.45;
  --lm-leading-relaxed: 1.5;

  --lm-tracking-tight: -0.01em;
  --lm-tracking-normal: 0;
  --lm-tracking-wide: 0.02em;
  --lm-tracking-caps: 0.04em;

  --lm-font-display: var(--lm-font-serif);
  --lm-font-heading: var(--lm-font-serif);
  --lm-font-ui: var(--lm-font-sans);
  --lm-font-body: var(--lm-font-sans);
  --lm-font-value: var(--lm-font-mono);
  --lm-font-wordmark: var(--lm-font-serif);
}

/* ---- tokens/spacing.css ---- */
:root {
  --lm-space-1: 2px;
  --lm-space-2: 4px;
  --lm-space-3: 6px;
  --lm-space-4: 8px;
  --lm-space-5: 10px;
  --lm-space-6: 12px;
  --lm-space-7: 14px;
  --lm-space-8: 18px;
  --lm-space-9: 22px;
  --lm-space-10: 24px;
  --lm-space-11: 34px;
  --lm-space-12: 40px;
  --lm-space-13: 64px;
  --lm-space-14: 80px;

  --lm-card-padding: var(--lm-space-8) var(--lm-space-9);
  --lm-row-padding: 11px var(--lm-space-7);
  --lm-stack-gap: var(--lm-space-6);
  --lm-inline-gap: var(--lm-space-5);

  --lm-popup-width: 400px;
  --lm-content-max: 1200px;
  --lm-hit-min: 32px;
  --lm-hit-touch: 44px;
}

/* ---- tokens/radius.css ---- */
:root {
  --lm-radius-xs: 3px;
  --lm-radius-sm: 4px;
  --lm-radius-md: 5px;
  --lm-radius-lg: 6px;
  --lm-radius-xl: 9px;
  --lm-radius-2xl: 10px; /* CARD - the default */
  --lm-radius-3xl: 14px; /* modal, injection card */
  --lm-radius-pill: 999px;

  --lm-border-width: 1px;
  --lm-border-width-thick: 2px;
  --lm-border-accent: 4px;
}

/* ---- tokens/elevation.css ---- */
:root {
  /* Border-first system. A card is a white surface with a 1px warm border and NO shadow. */
  --lm-shadow-none: none;
  --lm-shadow-raised: 0 1px 2px rgba(28, 27, 26, 0.06);
  --lm-shadow-popover: 0 4px 12px rgba(28, 27, 26, 0.10), 0 0 0 1px var(--lm-border);
  --lm-shadow-modal: 0 16px 40px rgba(28, 27, 26, 0.18);
  --lm-shadow-toolbar: 0 1px 0 rgba(28, 27, 26, 0.08);

  --lm-ring: 0 0 0 2px var(--lm-neutral-0), 0 0 0 4px var(--lm-focus-ring);
  --lm-ring-inset: inset 0 0 0 1px var(--lm-purple-500);

  --lm-scrim: rgba(28, 27, 26, 0.42);
  --lm-veil: rgba(250, 248, 245, 0.86);
  --lm-blur-chrome: saturate(180%) blur(12px);
}

/* ---- tokens/motion.css ---- */
:root {
  --lm-duration-instant: 90ms;
  --lm-duration-fast: 120ms;
  --lm-duration-normal: 180ms;
  --lm-duration-slow: 260ms;
  --lm-ease-standard: cubic-bezier(0.2, 0, 0.2, 1);
  --lm-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --lm-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --lm-transition-tint: background-color var(--lm-duration-fast) var(--lm-ease-standard), border-color var(--lm-duration-fast) var(--lm-ease-standard), color var(--lm-duration-fast) var(--lm-ease-standard);
  --lm-transition-fade: opacity var(--lm-duration-normal) var(--lm-ease-out);
}
@media (prefers-reduced-motion: reduce) {
  :root { --lm-duration-instant: 0ms; --lm-duration-fast: 0ms; --lm-duration-normal: 0ms; --lm-duration-slow: 0ms; }
}

/* ---- tokens/base.css ---- */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--lm-surface-page); color: var(--lm-text-body); font-family: var(--lm-font-body); font-size: var(--lm-text-base); line-height: var(--lm-leading-relaxed); -webkit-font-smoothing: antialiased; text-wrap: pretty; }
h1, h2, h3, h4 { font-family: var(--lm-font-heading); color: var(--lm-text-heading); letter-spacing: var(--lm-tracking-tight); line-height: var(--lm-leading-tight); margin: 0; }
a { color: var(--lm-text-link); text-decoration-thickness: 1px; text-underline-offset: 2px; transition: var(--lm-transition-tint); }
a:hover { color: var(--lm-text-link-hover); }
code, kbd, samp { font-family: var(--lm-font-value); font-size: 0.92em; }
:focus-visible { outline: 2px solid var(--lm-focus-ring); outline-offset: 2px; }