/* ───────────────────────────────────────────────────────────────
   Architecture of Things — Design System
   colors_and_type.css

   The single source of truth for color and type tokens. Mirrors
   the tokens declared in styles.css (the brand's working CSS) and
   adds derived design-system tokens (spacing, radii, shadows,
   semantic semantic colors).

   Type pairs Helvetica Neue UltraLight (the working brand face)
   with Inter as a web fallback that ships UltraLight (100) +
   ExtraLight (200), so the wordmark holds its delicate weight
   off-Mac. Mono is JetBrains Mono.
   ─────────────────────────────────────────────────────────────── */

@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500&display=swap");

/* ── Inter (brand fallback for Helvetica Neue) — local variable font ── */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/Inter-VariableFont_opsz_wght.ttf") format("truetype-variations"),
       url("fonts/Inter-VariableFont_opsz_wght.ttf") format("truetype");
  font-named-instance: "Regular";
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/Inter-Italic-VariableFont_opsz_wght.ttf") format("truetype-variations"),
       url("fonts/Inter-Italic-VariableFont_opsz_wght.ttf") format("truetype");
  font-named-instance: "Italic";
}

:root {
  /* ── Paper (warm neutral surfaces) ────────────────────────── */
  --paper:    #F7F2EA;   /* primary background */
  --paper-2:  #EFE7DA;   /* secondary panels */
  --paper-3:  #E5D9C5;   /* dividers, edges */

  /* ── Ink (warm near-black + text steps) ───────────────────── */
  --ink:      #1A1814;   /* primary text + mark */
  --ink-2:    #4A453D;   /* body text */
  --ink-3:    #8C8579;   /* meta */

  /* ── Terracotta (accent — Anthropic-adjacent warm) ────────── */
  --terracotta:   #C95F3A;   /* primary accent */
  --terracotta-2: #A14A2C;   /* deep accent */

  /* ── Clay (tertiary warm) ─────────────────────────────────── */
  --clay:     #DCAE82;

  /* ── Hairline (rgba ink for borders on paper) ─────────────── */
  --hairline: #1a181422;

  /* ── Semantic (used inside product UI, not brand collateral) */
  --success:        #5B8C50;
  --warning:        #C99445;
  --danger:         #B33C28;
  --info:           #4A6E8A;
  --success-tint:   #E5ECDB;
  --warning-tint:   #F4E6C8;
  --danger-tint:    #EFD3CB;
  --info-tint:      #DCE5EB;

  /* ── Type families ────────────────────────────────────────── */
  --font-display: "Helvetica Neue", "HelveticaNeue", "Inter", system-ui, -apple-system, sans-serif;
  --font-body:    "Helvetica Neue", "HelveticaNeue", "Inter", system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ── Type scale (anchored on 14px body, the brand's default) ─ */
  --fs-xs:    10px;   /* meta dot, tiny labels */
  --fs-sm:    11px;   /* eyebrow / meta */
  --fs-base:  14px;   /* body */
  --fs-md:    16px;
  --fs-lg:    18px;
  --fs-xl:    22px;
  --fs-2xl:   28px;
  --fs-3xl:   36px;   /* .section-title */
  --fs-4xl:   52px;
  --fs-5xl:   72px;
  --fs-6xl:   96px;   /* hero display */

  /* ── Line heights ─────────────────────────────────────────── */
  --lh-tight:  1.0;
  --lh-snug:   1.15;
  --lh-normal: 1.4;
  --lh-loose:  1.6;

  /* ── Letter spacing (the brand runs tight, with one wide meta) */
  --tracking-eyebrow: 0.18em;    /* uppercase eyebrows */
  --tracking-meta:    0.12em;    /* meta labels */
  --tracking-tight:   -0.015em;  /* display headings */
  --tracking-wordmark: -0.005em; /* wordmark default */
  --tracking-normal:  0.01em;    /* body default */

  /* ── Radii (modest, almost square) ────────────────────────── */
  --r-xs:  2px;
  --r-sm:  4px;
  --r-md:  6px;
  --r-lg:  12px;
  --r-xl:  22px;     /* app icons: 22% of side */
  --r-full: 999px;

  /* ── Shadows (warm, low contrast — printed-paper feel) ────── */
  --shadow-1: 0 1px 0 rgba(26, 24, 20, 0.04), 0 1px 2px rgba(26, 24, 20, 0.06);
  --shadow-2: 0 2px 14px rgba(26, 24, 20, 0.08), 0 0 0 1px var(--paper-3);
  --shadow-3: 0 6px 28px rgba(26, 24, 20, 0.10), 0 0 0 1px var(--paper-3);
  --shadow-inset: inset 0 0 0 1px rgba(0, 0, 0, 0.06);

  /* ── Spacing (4px base) ───────────────────────────────────── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-10: 128px;
}

/* ───────────────────────────────────────────────────────────────
   Brand-utility classes (mirror the originals in styles.css, kept
   here so the design-system import alone is enough to render the
   brand voice anywhere).
   ─────────────────────────────────────────────────────────────── */

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 400;
}

.section-title {
  font-family: var(--font-display);
  font-weight: 100;
  font-size: var(--fs-3xl);
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}

.body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-loose);
  color: var(--ink-2);
  font-weight: 300;
}

.meta {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 400;
}

.wordmark {
  font-family: var(--font-display);
  font-weight: 100;
  letter-spacing: var(--tracking-wordmark);
  color: var(--ink);
  white-space: nowrap;
  line-height: 1;
}

.lede {
  font-family: var(--font-display);
  font-weight: 200;
  font-size: var(--fs-xl);
  line-height: var(--lh-normal);
  color: var(--ink);
  letter-spacing: 0.005em;
}

.rule {
  background: currentColor;
  height: 0.72px;        /* matches the mark's stroke weight */
}

a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: color 200ms ease, border-color 200ms ease;
}
a:hover {
  color: var(--terracotta);
  border-bottom-color: var(--terracotta);
}

::selection {
  background: var(--terracotta);
  color: var(--paper);
}