/* EtlKit design tokens — bundled from the EtlKit design system (brand-only). */

/* ===== tokens/fonts.css ===== */
/* EtlKit — Webfonts
   Display / UI: Space Grotesk (300–700) — a modern technical grotesque with a
   slightly engineered character; the project's signature voice.
   Mono: IBM Plex Mono — for code, IDs, figures and tabular data. Both are
   open-source, fitting an open-source toolkit. */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');


/* ===== tokens/colors.css ===== */
/* EtlKit — Color tokens
   Brand: Vermillion #F8462D — a single decisive, energetic accent.
   Neutrals: cool gray ramp on near-black ink. Surfaces stay calm so the
   accent does the talking. Feedback colours are distinct from the brand red. */

:root {
  /* ---- Brand accent (Vermillion) ---- */
  --ek-vermillion: #F8462D;     /* primary brand colour */

  /* Vermillion ramp (states & tints) */
  --ek-vermillion-700: #BE2814; /* active / pressed */
  --ek-vermillion-600: #E5351C; /* hover */
  --ek-vermillion-500: #F8462D; /* = --ek-vermillion */
  --ek-vermillion-400: #FA6E57;
  --ek-vermillion-300: #FB9D8C;
  --ek-vermillion-100: #FEDCD5;
  --ek-vermillion-50:  #FFF1EE;

  /* ---- Neutrals ---- */
  --ek-white:   #FFFFFF;
  --ek-gray-50: #F5F5F7;        /* page background */
  --ek-gray-100:#ECECEF;
  --ek-gray-200:#DEDEE3;
  --ek-gray-300:#C4C4CC;
  --ek-gray-400:#9A9AA5;
  --ek-gray-500:#71717E;
  --ek-gray-600:#54545F;
  --ek-gray-700:#3B3B44;
  --ek-gray-800:#26262C;
  --ek-gray-900:#16161A;        /* ink */

  /* ---- Semantic feedback ---- */
  --ek-success: #1F9D55;
  --ek-success-50: #E7F6EE;
  --ek-warning: #E89B1C;
  --ek-warning-50: #FCF2DF;
  --ek-danger:  #E5351C;        /* aligns with brand vermillion */
  --ek-danger-50: #FFF1EE;
  --ek-info:    #2A6FDB;        /* trustworthy blue, distinct from brand */
  --ek-info-50: #EAF1FC;

  /* ---- Semantic aliases ---- */
  --color-brand: var(--ek-vermillion);
  --color-brand-hover: var(--ek-vermillion-600);
  --color-brand-active: var(--ek-vermillion-700);

  --bg-page: var(--ek-gray-50);
  --surface-card: var(--ek-white);
  --surface-sunken: var(--ek-gray-50);
  --surface-inverse: var(--ek-gray-900);

  --text-primary: var(--ek-gray-900);
  --text-secondary: var(--ek-gray-600);
  --text-muted: var(--ek-gray-400);
  --text-on-brand: var(--ek-white);
  --text-link: var(--ek-vermillion-600);

  --border-subtle: var(--ek-gray-200);
  --border-default: var(--ek-gray-300);
  --border-strong: var(--ek-gray-400);
  --border-focus: var(--ek-vermillion);

  --focus-ring: 0 0 0 3px rgba(248, 70, 45, 0.32);
}


/* ===== tokens/typography.css ===== */
/* EtlKit — Typography tokens
   Space Grotesk for everything UI; IBM Plex Mono for figures/IDs/code. */

:root {
  --font-sans: 'Space Grotesk', system-ui, 'Segoe UI', Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* Weights */
  --fw-regular: 400; /* @kind font */
  --fw-medium: 500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold: 700; /* @kind font */

  /* Type scale (rem, 16px base) */
  --fs-display: 3.5rem;   /* 56 — hero */
  --fs-h1: 2.5rem;        /* 40 */
  --fs-h2: 2rem;          /* 32 */
  --fs-h3: 1.5rem;        /* 24 */
  --fs-h4: 1.25rem;       /* 20 */
  --fs-lg: 1.125rem;      /* 18 */
  --fs-body: 1rem;        /* 16 */
  --fs-sm: 0.875rem;      /* 14 */
  --fs-xs: 0.75rem;       /* 12 */

  /* Line heights */
  --lh-tight: 1.05; /* @kind font */
  --lh-heading: 1.15; /* @kind font */
  --lh-snug: 1.35; /* @kind font */
  --lh-body: 1.55; /* @kind font */

  /* Letter spacing */
  --ls-tight: -0.03em; /* @kind font */
  --ls-normal: 0; /* @kind font */
  --ls-wide: 0.04em; /* @kind font */
  --ls-caps: 0.14em; /* @kind font */

  /* Semantic text styles */
  --text-display: var(--fw-bold) var(--fs-display)/var(--lh-tight) var(--font-sans);
  --text-h1: var(--fw-bold) var(--fs-h1)/var(--lh-heading) var(--font-sans);
  --text-h2: var(--fw-semibold) var(--fs-h2)/var(--lh-heading) var(--font-sans);
  --text-h3: var(--fw-semibold) var(--fs-h3)/var(--lh-snug) var(--font-sans);
  --text-body: var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font-sans);
  --text-label: var(--fw-medium) var(--fs-sm)/var(--lh-snug) var(--font-sans);
}


/* ===== tokens/spacing.css ===== */
/* EtlKit — Spacing, radius, shadow, layout, motion tokens
   A calm 4px-based rhythm. Friendly-but-precise radii. Soft neutral shadows. */

:root {
  /* Spacing scale — 4px base */
  --space-0: 0;
  --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;
  --space-24: 96px;

  /* Radius */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* Border widths */
  --border-width: 1px; /* @kind spacing */
  --border-width-thick: 2px; /* @kind spacing */

  /* Elevation — soft, neutral shadows */
  --shadow-xs: 0 1px 2px rgba(22, 22, 26, 0.06);
  --shadow-sm: 0 1px 3px rgba(22, 22, 26, 0.08), 0 1px 2px rgba(22, 22, 26, 0.06);
  --shadow-md: 0 4px 12px rgba(22, 22, 26, 0.08), 0 2px 4px rgba(22, 22, 26, 0.05);
  --shadow-lg: 0 12px 32px rgba(22, 22, 26, 0.12), 0 4px 8px rgba(22, 22, 26, 0.06);
  --shadow-focus: var(--focus-ring);

  /* Motion — quick, no bounce */
  --ease-standard: cubic-bezier(0.2, 0, 0.2, 1); /* @kind other */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur-base: 180ms; /* @kind other */
  --dur-slow: 280ms; /* @kind other */

  /* Layout */
  --container-max: 1200px; /* @kind spacing */
  --sidebar-width: 248px; /* @kind spacing */
  --header-height: 64px; /* @kind spacing */
}


/* ===== tokens/base.css ===== */
/* EtlKit — base element styles & helpers.
   Opt-in resets that keep specimens consistent without being heavy-handed. */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font: var(--text-body);
  color: var(--text-primary);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 { margin: 0; color: var(--text-primary); }
p { margin: 0; }
a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; }

::selection { background: var(--ek-vermillion-100); color: var(--ek-vermillion-700); }

/* Wordmark: Etl (ink) + Kit (vermillion), set in Space Grotesk */
.ek-wordmark {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  color: var(--text-primary);
}
.ek-wordmark > b { color: var(--ek-vermillion); font-weight: var(--fw-bold); }

/* Utility text styles */
.ek-eyebrow {
  font: var(--fw-medium) var(--fs-xs)/1 var(--font-sans);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}
.ek-mono { font-family: var(--font-mono); }