/* Empracticat · C · Practical · design tokens (generated by source/build_tokens.py; do not edit by hand)
 * Empracticat is a fictional company made for Empractica demos.
 * Fonts: Archivo (variable, wdth 62-125), Chivo Mono, Saira Stencil One. All Google Fonts, SIL Open Font License.
 * Surfaces: paper (default), .ec-kraft, .ec-black. Mustard never sits on kraft. */
:root {
  /* core */
  --ec-kraft: #C29A68; /* oklch(71.2% 0.082 72.1) · The carton. The ground the brand never has to print. */
  --ec-black: #1F1C18; /* oklch(22.8% 0.009 75.2) · Type, drawings, carton markings, one-color print. */
  --ec-mustard-field: #CC9225; /* oklch(69.9% 0.135 77.7) · The box and the one thing worth pointing at. One per view. */
  --ec-paper: #F6F1E7; /* oklch(95.9% 0.014 84.6) · Pages, screens, documents. */
  --ec-mustard-ink: #8A6017; /* oklch(52.1% 0.100 75.9) · Mustard at text size on paper: links, step numbers, one word in a line. */
  --ec-mustard: #CC9225; /* short name for Mustard Field */
  --ec-white: #FFFFFF;
  /* scales (Adobe Leonardo against Paper; the step names the contrast with Paper: 700 = 4.5:1, 900 = 8.6:1) */
  --ec-neutral-100: #ECE7DD; /* 1.08:1 */
  --ec-neutral-200: #E1DCD3; /* 1.2:1 */
  --ec-neutral-300: #CFCAC1; /* 1.45:1 */
  --ec-neutral-400: #B5B1A7; /* 1.9:1 */
  --ec-neutral-500: #9B968D; /* 2.6:1 */
  --ec-neutral-600: #868279; /* 3.4:1 */
  --ec-neutral-700: #726E65; /* 4.5:1 */
  --ec-neutral-800: #5D5950; /* 6.2:1 */
  --ec-neutral-900: #48443C; /* 8.6:1 */
  --ec-neutral-1000: #322E26; /* 12:1 */
  --ec-neutral-1100: #1D1912; /* 15.5:1 */
  --ec-kraft-100: #F1E6DA; /* 1.08:1 */
  --ec-kraft-200: #EADBC9; /* 1.2:1 */
  --ec-kraft-300: #DDC6AB; /* 1.45:1 */
  --ec-kraft-400: #CDAB83; /* 1.9:1 */
  --ec-kraft-500: #B7905E; /* 2.6:1 */
  --ec-kraft-600: #A27B4A; /* 3.4:1 */
  --ec-kraft-700: #8D6736; /* 4.5:1 */
  --ec-kraft-800: #765220; /* 6.2:1 */
  --ec-kraft-900: #603D03; /* 8.6:1 */
  --ec-kraft-1000: #482600; /* 12:1 */
  --ec-kraft-1100: #301000; /* 15.5:1 */
  --ec-mustard-100: #F4E6D1; /* 1.08:1 */
  --ec-mustard-200: #EFDABC; /* 1.2:1 */
  --ec-mustard-300: #E5C595; /* 1.45:1 */
  --ec-mustard-400: #D8AA60; /* 1.9:1 */
  --ec-mustard-500: #C68C1B; /* 2.6:1 */
  --ec-mustard-600: #B07700; /* 3.4:1 */
  --ec-mustard-700: #9A6300; /* 4.5:1 */
  --ec-mustard-800: #824D00; /* 6.2:1 */
  --ec-mustard-900: #6B3600; /* 8.6:1 */
  --ec-mustard-1000: #521F00; /* 12:1 */
  --ec-mustard-1100: #3A0500; /* 15.5:1 */
  /* functional (interfaces only) */
  --ec-error: #A8321E;
  --ec-success: #2F6B3A;
  --ec-warning: #8A6017;
  --ec-info: #48443C;
  /* type */
  --ec-font-sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --ec-font-mono: "Chivo Mono", "Courier New", ui-monospace, monospace;
  --ec-font-stencil: "Saira Stencil One", "Archivo Black", Impact, sans-serif;
  --ec-size-display: clamp(2.875rem, 1.9rem + 4vw, 5.5rem); /* Display: 88/46 px · Home hero. One per page. Archivo Expanded ExtraBold. */
  --ec-size-headline: clamp(2.125rem, 1.614rem + 2.095vw, 3.5rem); /* Headline: 56/34 px · Page and section titles. */
  --ec-size-title: clamp(1.5rem, 1.361rem + 0.5714vw, 1.875rem); /* Title: 30/24 px · Card and panel titles. Normal width. */
  --ec-size-subtitle: clamp(1.188rem, 1.118rem + 0.2857vw, 1.375rem); /* Subtitle: 22/19 px · Small heads, the line under a headline. */
  --ec-size-body-lg: clamp(1.062rem, 1.016rem + 0.1905vw, 1.188rem); /* Body L: 19/17 px · Lead paragraphs. */
  --ec-size-body: 1rem; /* Body: 16/16 px · Default text, UI, email. */
  --ec-size-small: 0.875rem; /* Small: 14/14 px · Captions, footnotes, legal. */
  --ec-size-step: clamp(1.188rem, 1.118rem + 0.2857vw, 1.375rem); /* Step: 22/19 px · "Step 9." numbered steps; the number in Mustard ink. */
  --ec-size-spec: 0.8125rem; /* Spec: 13/13 px · Part numbers, dimensions, kickers, labels. */
  --ec-size-figure: 0.9375rem; /* Figure: 15/15 px · Figures in tables, prices on product pages. */
  --ec-size-stencil: clamp(1.75rem, 1.471rem + 1.143vw, 2.5rem); /* Stencil: 40/28 px · Cartons, crates and the booth only. Never on screens otherwise. */
  /* space (4 px base), radius, strokes, layout, motion */
  --ec-space-1: 0.25rem; /* 4px */
  --ec-space-2: 0.5rem; /* 8px */
  --ec-space-3: 0.75rem; /* 12px */
  --ec-space-4: 1rem; /* 16px */
  --ec-space-5: 1.5rem; /* 24px */
  --ec-space-6: 2rem; /* 32px */
  --ec-space-7: 3rem; /* 48px */
  --ec-space-8: 4rem; /* 64px */
  --ec-space-9: 6rem; /* 96px */
  --ec-space-10: 8rem; /* 128px */
  --ec-radius-none: 0px;
  --ec-radius-control: 2px;
  --ec-radius-card: 4px;
  --ec-rule: 2px; --ec-hair: 1px; --ec-frame: 3px;
  --ec-box-wall: 0.18em; /* the open-box frame: the logo carton wall relative to the type it holds */
  --ec-shell: 1240px;
  --ec-columns: 8;
  --ec-column-gap: 24px;
  --ec-page-gutter: clamp(16px, 4.5vw, 56px);
  --ec-section-y: clamp(56px, 8vw, 112px);
  --ec-prose: 62ch;
  --ec-header: 64px;
  --ec-fiction-bar: 36px;
  --ec-ease: cubic-bezier(.2, .7, .2, 1); --ec-dur-micro: 140ms; --ec-dur-reveal: 380ms; --ec-dur-flap: 260ms;
  /* semantic roles: paper surface (default) */
  --ec-surface: var(--ec-paper);
  --ec-surface-raised: #FFFFFF;
  --ec-surface-sunk: var(--ec-neutral-100);
  --ec-text: var(--ec-black);
  --ec-text-body: var(--ec-neutral-900);
  --ec-text-muted: var(--ec-neutral-700);
  --ec-line: var(--ec-neutral-300);
  --ec-line-strong: var(--ec-black);
  --ec-link: var(--ec-mustard-ink);
  --ec-link-hover: var(--ec-black);
  --ec-signal: var(--ec-mustard);
  --ec-signal-text: var(--ec-mustard-ink);
  --ec-action: var(--ec-black);
  --ec-action-text: var(--ec-paper);
  --ec-action-hover: var(--ec-neutral-900);
  --ec-box: var(--ec-mustard);
  --ec-focus: var(--ec-mustard-ink);
}
.ec-kraft {
  --ec-surface: var(--ec-kraft);
  --ec-surface-raised: var(--ec-paper);
  --ec-surface-sunk: var(--ec-kraft-500);
  --ec-text: var(--ec-black);
  --ec-text-body: var(--ec-black);
  --ec-text-muted: var(--ec-kraft-1000);
  --ec-line: rgba(31, 28, 24, .28);
  --ec-line-strong: var(--ec-black);
  --ec-link: var(--ec-black);
  --ec-link-hover: var(--ec-black);
  --ec-signal: var(--ec-black);
  --ec-signal-text: var(--ec-black);
  --ec-action: var(--ec-black);
  --ec-action-text: var(--ec-paper);
  --ec-action-hover: var(--ec-neutral-900);
  --ec-box: var(--ec-black);
  --ec-focus: var(--ec-black);
  background: var(--ec-surface); color: var(--ec-text);
}
.ec-black {
  --ec-surface: var(--ec-black);
  --ec-surface-raised: var(--ec-neutral-1000);
  --ec-surface-sunk: var(--ec-neutral-1100);
  --ec-text: var(--ec-paper);
  --ec-text-body: var(--ec-neutral-200);
  --ec-text-muted: var(--ec-neutral-400);
  --ec-line: rgba(246, 241, 231, .22);
  --ec-line-strong: var(--ec-paper);
  --ec-link: var(--ec-mustard);
  --ec-link-hover: var(--ec-paper);
  --ec-signal: var(--ec-mustard);
  --ec-signal-text: var(--ec-mustard);
  --ec-action: var(--ec-mustard);
  --ec-action-text: var(--ec-black);
  --ec-action-hover: var(--ec-mustard-400);
  --ec-box: var(--ec-mustard);
  --ec-focus: var(--ec-mustard);
  background: var(--ec-surface); color: var(--ec-text);
}
/* type roles */
.ec-display { font-family: var(--ec-font-sans); font-weight: 800; font-stretch: 125%; font-size: var(--ec-size-display); line-height: 0.96; letter-spacing: -0.02em; }
.ec-headline { font-family: var(--ec-font-sans); font-weight: 800; font-stretch: 125%; font-size: var(--ec-size-headline); line-height: 1.0; letter-spacing: -0.015em; }
.ec-title { font-family: var(--ec-font-sans); font-weight: 800; font-size: var(--ec-size-title); line-height: 1.12; letter-spacing: -0.01em; }
.ec-subtitle { font-family: var(--ec-font-sans); font-weight: 700; font-size: var(--ec-size-subtitle); line-height: 1.25; letter-spacing: -0.005em; }
.ec-body-lg { font-family: var(--ec-font-sans); font-weight: 400; font-size: var(--ec-size-body-lg); line-height: 1.5; letter-spacing: 0.0em; }
.ec-body { font-family: var(--ec-font-sans); font-weight: 400; font-size: var(--ec-size-body); line-height: 1.55; letter-spacing: 0.0em; }
.ec-small { font-family: var(--ec-font-sans); font-weight: 400; font-size: var(--ec-size-small); line-height: 1.45; letter-spacing: 0.0em; }
.ec-step { font-family: var(--ec-font-sans); font-weight: 800; font-size: var(--ec-size-step); line-height: 1.2; letter-spacing: -0.005em; }
.ec-spec { font-family: var(--ec-font-mono); font-weight: 500; font-size: var(--ec-size-spec); line-height: 1.45; letter-spacing: 0.02em; text-transform: uppercase; }
.ec-figure { font-family: var(--ec-font-mono); font-weight: 400; font-size: var(--ec-size-figure); line-height: 1.45; letter-spacing: 0.0em; }
.ec-stencil { font-family: var(--ec-font-stencil); font-weight: 400; font-size: var(--ec-size-stencil); line-height: 1.0; letter-spacing: 0.02em; text-transform: uppercase; }
.ec-figures { font-family: var(--ec-font-mono); font-variant-numeric: tabular-nums; }