/* emod design tokens — ported from design/tokens/*.css (single source of truth: design/design-system.md).
   Keep in sync if the design system changes. */

/* Fonts are self-hosted — see assets/fonts.css (enqueued before this file in functions.php).
   No Google Fonts CDN: keeps visitor IPs off US servers and removes a render-blocking fetch chain. */

:root {
  /* Ink */
  --ink-900: #0a0a0a;
  --ink-800: #141412;
  --ink-700: #1c1c1a;
  --ink-600: #2e2e2b;
  /* Paper */
  --paper-0: #ffffff;
  --paper-50: #fbfaf7;
  --paper-100: #f2f2f0;
  --paper-200: #eceae5;
  /* Warm grays */
  --gray-700: #3a3a37;
  --gray-600: #56544e;
  --gray-500: #6f6f6b;
  --gray-400: #9a988f;
  --gray-300: #b4b2ac;
  --gray-200: #d8d6d0;
  /* Lime — the signature */
  --lime-300: #ddfa78;
  --lime-550: #b8e628;
  --lime-600: #a9d71b;
  --lime-700: #6e8c14;
  --lime-100: #f0fac8;
  --lime-50: #f7fbe6;
  /* Semantic — warm, muted */
  --green-600: #5f7d33;
  --amber-600: #b9822b;
  --red-600: #be4a34;
  --red-50: #f7e9e3;
  --green-50: #eef1e1;
  --amber-50: #f6eedd;

  /* Aliases */
  --bg-page: var(--paper-50);
  --bg-surface: var(--paper-0);
  --bg-sunken: var(--paper-100);
  --bg-inverse: var(--ink-900);
  --bg-inverse-surface: var(--ink-800);
  --text-primary: #1c1a17;
  --text-secondary: var(--gray-600);
  --text-muted: var(--gray-400);
  --text-inverse: var(--paper-50);
  --text-inverse-secondary: #9c9a93;
  --text-on-lime: #0e0e0d;
  --text-accent: var(--lime-700);
  --border-subtle: var(--paper-200);
  --border-strong: var(--gray-200);
  --border-inverse: rgba(251, 250, 247, 0.14);
  --accent: var(--lime-600);
  --accent-hover: var(--lime-550);
  --accent-soft: var(--lime-50);
  --focus-ring: 0 0 0 2px var(--paper-50), 0 0 0 4px var(--lime-600);
  --focus-ring-inverse: 0 0 0 2px var(--ink-900), 0 0 0 4px var(--lime-600);

  /* Type */
  --font-sans: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", Consolas, monospace;
  --text-display-xl: 700 clamp(48px, 6vw, 72px)/1.02 var(--font-sans);
  --text-display: 700 48px/1.06 var(--font-sans);
  --text-h1: 700 36px/1.12 var(--font-sans);
  --text-h2: 700 28px/1.2 var(--font-sans);
  --text-h3: 600 22px/1.3 var(--font-sans);
  --text-h4: 600 18px/1.4 var(--font-sans);
  --text-body-lg: 400 17px/1.6 var(--font-sans);
  --text-body: 400 15px/1.6 var(--font-sans);
  --text-body-sm: 400 13.5px/1.5 var(--font-sans);
  --text-label: 600 11px/1.2 var(--font-mono);
  --text-mono: 500 13px/1.5 var(--font-mono);
  --tracking-display: -0.025em;
  --tracking-h: -0.015em;
  --tracking-label: 0.14em;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Spacing */
  --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: 128px;
  --container-max: 1160px;
  --container-pad: 24px;
  --section-gap: var(--space-9);

  /* Radii */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 999px;

  /* Shadows (warm) */
  --shadow-sm: 0 1px 2px rgba(20, 18, 12, 0.06);
  --shadow-md:
    0 1px 2px rgba(20, 18, 12, 0.06), 0 10px 28px -18px rgba(20, 18, 12, 0.22);
  --shadow-lg:
    0 2px 5px rgba(20, 18, 12, 0.08), 0 22px 46px -22px rgba(20, 18, 12, 0.3);
  --shadow-lime: 0 12px 30px -10px rgba(150, 180, 30, 0.55);

  /* Motion */
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-switch: cubic-bezier(0.3, 0.9, 0.3, 1.15);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-primary);
  font: var(--text-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection {
  background: var(--lime-600);
  color: var(--text-on-lime);
}
:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}