/* Tiny Design Shop — design tokens (source of truth for values) */

@font-face {
  font-family: "Hubot Sans";
  src:
    url("fonts/Hubot-Sans.woff2") format("woff2 supports variations"),
    url("fonts/Hubot-Sans.woff2") format("woff2-variations");
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-display: swap;
}

@font-face {
  font-family: "Mona Sans Mono";
  src:
    url("fonts/Mona-Sans-Mono.woff2") format("woff2 supports variations"),
    url("fonts/Mona-Sans-Mono.woff2") format("woff2-variations");
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-display: swap;
}

@font-face {
  font-family: "Geist Pixel";
  src: url("fonts/GeistPixel-Square.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* —— Color: foundation —— */
  --bg: #fafafa;
  --surface: #ffffff;
  --surface-soft: #f5f5f3;
  --surface-hover: #fdfdfb;
  --ink: #171717;
  --ink-2: #3f3f3f;
  --ink-3: #737373;
  --ink-4: #a3a3a3;
  --border: #e5e5e0;
  --border-strong: #d6d6cf;
  --accent: #2a7e3b;
  --accent-2: #bdee63;
  --accent-soft: #eef6d6;
  --accent-soft-home: #f8faf4;
  --on-ink: #ffffff;
  --on-ink-muted: rgba(255, 255, 255, 0.72);
  --on-ink-subtle: rgba(255, 255, 255, 0.76);
  --on-ink-border: rgba(255, 255, 255, 0.18);
  --on-ink-divider: rgba(255, 255, 255, 0.12);
  --shadow: 0 18px 46px rgba(24, 24, 20, 0.08);
  --nav-bg: rgba(250, 250, 250, 0.9);
  --body-gradient-top: rgba(255, 255, 255, 0.82);
  --body-gradient-bottom: rgba(250, 250, 250, 0);
  --button-primary-hover: #000000;
  --button-accent: var(--accent);
  --button-accent-hover: #236832;
  --button-accent-foreground: var(--on-ink);
  --radius: 8px;
  --radius-sm: 6px;
  --radius-xs: 4px;
  --radius-pill: 999px;
  --radius-chip: 5px;

  /* Semantic aliases (prefer in reusable UI) */
  --background: var(--bg);
  --foreground: var(--ink);
  --muted-foreground: var(--ink-3);
  --card: var(--surface);
  --secondary: var(--surface-soft);
  --primary: var(--ink);
  --primary-foreground: var(--on-ink);
  --accent-foreground: var(--accent);
  --ring: var(--accent-2);

  /* —— Typography: families —— */
  --font-sans: "Hubot Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-pixel: "Geist Pixel", "Mona Sans Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --font-mono: "Mona Sans Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* —— Typography: size scale —— */
  --fs-body: 16px;
  --fs-body-sm: 14px;
  --fs-intro: 18px;
  --fs-ui: 13px;
  --fs-ui-sm: 12px;
  --fs-ui-xs: 11px;
  --fs-logo: 19px;
  --fs-logo-mark: 12px;
  --fs-tool-number: 24px;
  --fs-tool-title: 22px;
  --fs-note-number: 18px;
  --fs-h1: clamp(52px, 8.2vw, 104px);
  --fs-h1-mobile: 50px;
  --fs-note-band: clamp(34px, 4vw, 52px);
  --lh-body: 1.6;
  --lh-intro: 1.7;
  --lh-tight: 1;
  --lh-heading: 0.9;
  --fw-ui: 520;
  --fw-button: 600;
  --fw-heading: 650;

  /* —— Spacing: base scale (4px grid + intentional off-scale steps) —— */
  --s-0: 0;
  --s-1: 2px;
  --s-2: 4px;
  --s-3: 6px;
  --s-4: 8px;
  --s-5: 10px;
  --s-6: 11px;
  --s-7: 12px;
  --s-8: 13px;
  --s-9: 14px;
  --s-10: 16px;
  --s-11: 18px;
  --s-12: 20px;
  --s-13: 24px;
  --s-14: 28px;
  --s-15: 34px;
  --s-16: 42px;
  --s-17: 54px;
  --s-18: 64px;
  --s-19: 70px;
  --s-20: 72px;

  /* —— Spacing: layout semantics —— */
  --layout-max-width: 1120px;
  --layout-gutter: 40px;
  --layout-gutter-mobile: 28px;
  --layout-gutter-home: clamp(24px, 4vw, 40px);
  --layout-nav-height: 64px;
  --layout-nav-gap: var(--s-12);
  --layout-nav-link-gap: var(--s-4);
  --layout-nav-link-pad-y: var(--s-4);
  --layout-nav-link-pad-x: var(--s-6);
  --layout-nav-link-min-h: 34px;
  --layout-hero-pad-top: var(--s-20);
  --layout-hero-pad-bottom: var(--s-15);
  --layout-hero-intro-mt: var(--s-13);
  --layout-section-mb: var(--s-19);
  --layout-list-mt: var(--s-12);
  --layout-card-pad: var(--s-13);
  --layout-card-pad-mobile: var(--s-11);
  --layout-card-gap: var(--s-12);
  --layout-card-col-number: 76px;
  --layout-note-band-pad: var(--s-14);
  --layout-note-band-pad-mobile: var(--s-12);
  --layout-note-band-gap: var(--s-13);
  --layout-footer-pad-top: var(--s-14);
  --layout-footer-pad-bottom: var(--s-16);
  --layout-footer-gap: var(--s-11);
  --layout-footer-links-gap: var(--s-9);
  --layout-button-min-h: 38px;
  --layout-button-pad-x: var(--s-9);
  --layout-chip-row-mt: var(--s-8);
  --layout-chip-gap: 7px;
  --layout-tool-head-gap: var(--s-5);
  --layout-tool-head-mb: var(--s-4);
  --layout-tool-features-mt: var(--s-9);
  --layout-tool-features-gap: var(--s-4) var(--s-11);
  --layout-tool-actions-min-w: 148px;
  --layout-tool-actions-gap: var(--s-4);
  --layout-eyebrow-mb: var(--s-9);
  --layout-logo-gap: var(--s-5);
  --layout-logo-mark: 26px;
  --layout-support-gap: 7px;
  --layout-support-pad-x: var(--s-9);
  --layout-support-min-h: 38px;

  /* Tool archetype spacing (see design.md) */
  --tool-hero-pad-canvas: var(--s-20) 0;
  --tool-hero-pad-structured: var(--s-20) 0 var(--s-17);
  --tool-shell-pad-y: var(--s-15) 0 60px;
  --tool-intro-mt-canvas: var(--s-10);
  --tool-intro-mt-structured: var(--s-11);
}