/* =========================================================================
   AMORCE — Colors & Type
   -------------------------------------------------------------------------
   Sober, editorial B2B palette with a single warm accent.
   Reference mood: WIST (whitespace, serif + sans pairing), iamrob.in
   (sobriety, structural UI), Empower (peach warmth, but dialled down).
   ========================================================================= */

/* ---------- Fonts (self-hosted, see fonts/README.md) ----------
   No third-party font host: visitors' IPs are never sent to Google Fonts.
   - Domine:         display serif
   - Inter:          body, UI
   - JetBrains Mono: code, IDs, metrics
*/
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-VariableFont_opsz_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-Italic-VariableFont_opsz_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Domine';
  src: url('fonts/Domine-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/JetBrainsMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/JetBrainsMono-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* =====================================================================
     COLOR — Neutrals (the workhorse; ~90% of every surface)
     ===================================================================== */
  --ink:           #0E0E0C;   /* near-black, warm undertone */
  --ink-2:         #1F1E1B;   /* raised ink — headings on paper */
  --graphite:     #33322E;   /* body copy, heavy */
  --slate:         #5C5A53;   /* secondary text */
  --stone:         #6E6C65;   /* tertiary text, icon — ≥ 4.5:1 on paper, milk and bone (WCAG AA) */
  --dust:          #BDBAB1;   /* hairlines, disabled */
  --chalk:         #E6E2D8;   /* hairline borders on paper */
  --bone:          #F3EEE3;   /* elevated paper — warm, subtle */
  --paper:         #FFFDF7;   /* page background — milk-white, warm undertone */
  --milk:          #FFFFFF;   /* elevated card on paper — pure white */
  --white:         #FFFFFF;   /* pure white, used in inputs */

  /* =====================================================================
     COLOR — Warm accent (Peach / Coral — from Empower, dialled down)
     Used sparingly: pull-quotes, active states, one-word emphasis,
     sticker call-outs, background blocks for section breaks.
     ===================================================================== */
  --peach-50:      #FDF2EA;
  --peach-100:     #FADFCB;
  --peach-200:     #F6C6A4;
  --peach-300:     #F1A97A;
  --peach-400:     #EC8C54;   /* brand coral — primary accent */
  --peach-500:     #D96F35;   /* on-hover / press */
  --peach-600:     #B55727;

  /* =====================================================================
     COLOR — Supporting pastels (Empower-derived, very restrained)
     Use at MOST one per screen, as a block background or a sticker.
     Never combine more than two.
     ===================================================================== */
  --lilac:         #DDD9F2;   /* cool counterpoint */
  --lilac-ink:     #3B3566;
  --mint:          #CFE3D6;   /* quiet confirmation */
  --mint-ink:      #2C4A36;
  --butter:        #F3E4A8;   /* highlight marker */
  --butter-ink:    #5A4A14;

  /* =====================================================================
     COLOR — Semantic
     ===================================================================== */
  --success:       #3F7A52;
  --success-bg:    #E4EFE6;
  --warning:       #B07A1E;
  --warning-bg:    #F6E9CD;
  --danger:        #B03A2E;
  --danger-bg:     #F4DDD9;
  --info:          #3A5B8A;
  --info-bg:       #DDE6F1;

  /* =====================================================================
     SEMANTIC TOKENS — use these in components, not raw colors
     ===================================================================== */
  --bg:            var(--paper);      /* app background — near-white #FBF8F1 */
  --bg-elevated:   var(--milk);       /* cards on paper */
  --bg-sunken:     var(--bone);       /* wells, code blocks */
  --bg-invert:     var(--ink);        /* footers, hero bands */

  --fg:            var(--ink);        /* primary text */
  --fg-2:          var(--graphite);   /* body */
  --fg-3:          var(--slate);      /* secondary */
  --fg-4:          var(--stone);      /* tertiary, captions */
  --fg-disabled:   var(--dust);
  --fg-invert:     var(--paper);      /* text on --bg-invert */

  --border:        var(--chalk);      /* default hairline */
  --border-strong: var(--dust);       /* emphasized divider */
  --border-ink:    var(--ink);        /* 1px framing on cards */

  --accent:        var(--peach-400);
  --accent-hover:  var(--peach-500);
  --accent-press:  var(--peach-600);
  --accent-bg:     var(--peach-50);
  --accent-fg:     var(--ink);        /* text ON a peach surface */

  /* =====================================================================
     TYPE — Families
     ===================================================================== */
  --font-serif:    'Domine', 'GT Alpina', Georgia, 'Times New Roman', serif;
  --font-sans:     'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-tight:    'Inter', ui-sans-serif, system-ui, sans-serif;   /* variable axis handles tight tracking */
  --font-mono:     'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* =====================================================================
     TYPE — Scale (modular, warm)
     Editorial hierarchy: serif display, sans body, sparing caps labels.
     ===================================================================== */
  --fs-hero:       clamp(56px, 8vw, 112px);  /* landing H1 */
  --fs-display:    clamp(44px, 5.5vw, 72px); /* page H1 */
  --fs-h1:         40px;
  --fs-h2:         32px;
  --fs-h3:         24px;
  --fs-h4:         20px;
  --fs-lead:       20px;   /* lede paragraph */
  --fs-body:       16px;
  --fs-sm:         14px;
  --fs-xs:         12px;

  --lh-tight:      1.06;
  --lh-heading:    1.14;
  --lh-body:       1.55;
  --lh-loose:      1.7;

  --tracking-hero:   -0.025em;
  --tracking-tight:  -0.015em;
  --tracking-normal: 0em;
  --tracking-label:  0.08em;   /* uppercase eyebrow labels */
  --tracking-mono:   -0.005em;

  /* =====================================================================
     SPACING (4px base, slightly generous — editorial feel)
     ===================================================================== */
  --space-0:  0;
  --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;
  --space-11: 192px;

  /* =====================================================================
     RADII — very restrained. Most UI is 0px or 4px.
     Pills (capsules) for CTAs only.
     ===================================================================== */
  --radius-0:   0px;
  --radius-xs:  2px;
  --radius-sm:  4px;    /* inputs, cards */
  --radius-md:  8px;    /* elevated cards, modals */
  --radius-lg:  16px;   /* hero blocks */
  --radius-pill: 999px;

  /* =====================================================================
     SHADOWS — soft, warm, never blue. Used minimally.
     ===================================================================== */
  --shadow-xs:  0 1px 0 rgba(14, 14, 12, 0.04);
  --shadow-sm:  0 1px 2px rgba(14, 14, 12, 0.06), 0 0 0 1px rgba(14, 14, 12, 0.04);
  --shadow-md:  0 6px 20px -8px rgba(14, 14, 12, 0.12), 0 1px 2px rgba(14, 14, 12, 0.06);
  --shadow-lg:  0 24px 48px -20px rgba(14, 14, 12, 0.18), 0 2px 6px rgba(14, 14, 12, 0.06);
  --shadow-inset: inset 0 0 0 1px var(--border);

  /* =====================================================================
     MOTION — restrained, editorial. Never bouncy.
     ===================================================================== */
  --ease-out:    cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:    120ms;
  --dur-base:    200ms;
  --dur-slow:    360ms;

  /* =====================================================================
     LAYOUT
     ===================================================================== */
  --container-sm: 640px;
  --container-md: 880px;
  --container-lg: 1120px;
  --container-xl: 1280px;
  --gutter:       clamp(20px, 4vw, 48px);
}

/* =========================================================================
   BASE
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-feature-settings: 'ss01', 'cv11';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* =========================================================================
   SEMANTIC TYPE CLASSES
   ========================================================================= */
.t-hero {
  font-family: var(--font-serif);
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-hero);
  font-weight: 400;
  color: var(--fg);
}
.t-display {
  font-family: var(--font-serif);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-hero);
  font-weight: 400;
}
.t-h1 { font-family: var(--font-serif); font-size: var(--fs-h1); line-height: var(--lh-heading); letter-spacing: var(--tracking-tight); font-weight: 400; }
.t-h2 { font-family: var(--font-serif); font-size: var(--fs-h2); line-height: var(--lh-heading); letter-spacing: var(--tracking-tight); font-weight: 400; }
.t-h3 { font-family: var(--font-tight); font-size: var(--fs-h3); line-height: 1.25; letter-spacing: var(--tracking-tight); font-weight: 600; }
.t-h4 { font-family: var(--font-tight); font-size: var(--fs-h4); line-height: 1.3;  letter-spacing: var(--tracking-tight); font-weight: 600; }

.t-lead  { font-family: var(--font-sans); font-size: var(--fs-lead); line-height: var(--lh-body); color: var(--fg-2); }
.t-body  { font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg-2); }
.t-small { font-family: var(--font-sans); font-size: var(--fs-sm);   line-height: var(--lh-body); color: var(--fg-3); }
.t-caption { font-family: var(--font-sans); font-size: var(--fs-xs); line-height: 1.45; color: var(--fg-4); }

.t-eyebrow {
  font-family: var(--font-tight);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--fg-3);
}
.t-mono {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: var(--tracking-mono);
  color: var(--fg-2);
}

/* Editorial italic — used sparingly for one-word emphasis in serif headlines */
.t-italic { font-style: italic; }

/* Highlighter: soft peach background behind a span (Empower-inspired) */
.t-highlight {
  background: linear-gradient(180deg, transparent 0 55%, var(--hl, var(--peach-100)) 55% 92%, transparent 92%);
  padding: 0 0.08em;
}
.t-highlight--lilac  { --hl: var(--lilac); }
.t-highlight--mint   { --hl: var(--mint); }
.t-highlight--butter { --hl: var(--butter); }

/* Simple link style — underline with generous offset */
a, .t-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--dust);
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  transition: text-decoration-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
a:hover, .t-link:hover {
  text-decoration-color: var(--accent);
  color: var(--fg);
}

/* Selection */
::selection { background: var(--peach-200); color: var(--ink); }