/* ============================================================
   OBVIOS DESIGN SYSTEM — colors_and_type.css
   Brand Identity Guide v1.0 · May 2026 · obvios.co
   Values extracted directly from the brand guide.
   ============================================================ */

/* Inter + Inter Tight — self-hosted brand fonts (variable). Inter Tight
   ExtraLight Italic is the wordmark face. opsz axis handled by
   font-optical-sizing: auto on the body. */
@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: 'Inter Tight';
  src: url('../fonts/InterTight-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter Tight';
  src: url('../fonts/InterTight-Italic-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 100 900; font-style: italic; font-display: swap;
}

:root {
  /* ---------- NAVY — Primary (authority, trust, headings, actions) ---------- */
  --navy-900: #1E2B3F;  /* dark backgrounds, primary text on light */
  --navy-800: #243351;
  --navy-700: #2B3F5C;  /* PRIMARY brand color — buttons, headings */
  --navy-600: #3A5272;
  --navy-500: #4A6280;
  --navy-400: #6B8BAD;
  --navy-300: #8DA2B9;  /* ⚠ fails AA as text on light */
  --navy-200: #B8CAD9;
  --navy-100: #DDE5ED;
  --navy-50:  #EEF2F7;

  /* ---------- COPPER — Accent (warmth, human connection — use sparingly) ---------- */
  --copper-900: #5C3818;
  --copper-800: #73461E;
  --copper-700: #8B5E34;  /* only shade AA-safe for body text on light */
  --copper-600: #A87040;
  --copper-500: #C4844A;  /* decorative only — fails AA as text on light */
  --copper-400: #D49E6C;
  --copper-300: #E0B88A;
  --copper-200: #EDD4B5;
  --copper-100: #F6EADB;
  --copper-50:  #FBF5EE;

  /* ---------- STONE — Neutral (warm-leaning grays; body, borders, bg) ---------- */
  --stone-900: #2C2C2A;  /* body text */
  --stone-800: #3B3B38;
  --stone-700: #4A4A47;
  --stone-600: #5E5E5B;
  --stone-500: #737370;  /* secondary text, captions — AA-safe */
  --stone-400: #929290;
  --stone-300: #B5B5B2;
  --stone-200: #D4D4D1;
  --stone-100: #E8E7E3;  /* default border */
  --stone-50:  #F2F1ED;

  /* ---------- SURFACES (warm off-white base, never sterile pure white) ---------- */
  --surface-primary:  #FAFAF8;  /* page background */
  --surface-secondary:#F4F2EC;  /* recessed / subtle sections */
  --surface-elevated: #FFFFFF;  /* cards, modals, elevated surfaces */

  /* ---------- SEMANTIC — CVD-safe status (Wong palette) ---------- */
  --success: #1A7A5C;  --success-bg: #E6F5F0;  /* teal green */
  --error:   #C04525;  --error-bg:   #FEF2EF;  /* vermillion */
  --warning: #946000;  --warning-bg: #FEF4E1;  /* deep amber */
  --info:    #2B6CB0;  --info-bg:    #E3EEF8;  /* mid blue */

  /* ---------- SEMANTIC ROLE TOKENS ---------- */
  --fg-1: var(--stone-900);   /* primary text */
  --fg-2: var(--stone-500);   /* secondary text */
  --fg-3: var(--stone-400);   /* tertiary / disabled */
  --fg-accent: var(--copper-700);
  --fg-brand: var(--navy-700);
  --fg-on-dark: var(--surface-primary);
  --bg-1: var(--surface-primary);
  --bg-2: var(--surface-secondary);
  --bg-elevated: var(--surface-elevated);
  --border: var(--stone-100);
  --border-strong: var(--stone-200);

  /* ============================================================
     TYPOGRAPHY — Inter is the sole typeface
     ============================================================ */
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-wordmark: 'Inter Tight', 'Inter', system-ui, sans-serif;
  --font-mono: 'Inter', ui-monospace, 'SF Mono', Menlo, monospace; /* with code features */

  /* OpenType feature presets — never mix brand + code on one element */
  --font-features-brand: "liga" 1, "calt" 1, "cv09" 1, "cv11" 1;            /* headings, wordmark, marketing */
  --font-features-data:  "liga" 1, "calt" 1, "tnum" 1, "zero" 1, "cv09" 1;  /* tables, metrics, prices */
  --font-features-code:  "liga" 0, "calt" 0, "ss02" 1, "tnum" 1, "zero" 1, "cv05" 1, "cv08" 1; /* code, API refs */
  --font-features-base:  "liga" 1, "calt" 1;                                /* body, general content */

  /* Type scale (px / weight / tracking) */
  --text-display: 300 64px/1.05 var(--font-sans);   --track-display: -0.02em;
  --text-h1: 600 44px/1.1 var(--font-sans);         --track-h1: -0.02em;
  --text-h2: 600 32px/1.15 var(--font-sans);        --track-h2: -0.015em;
  --text-h3: 600 24px/1.25 var(--font-sans);        --track-h3: -0.01em;
  --text-body: 400 17px/1.6 var(--font-sans);       --track-body: 0;
  --text-small: 400 15px/1.55 var(--font-sans);     --track-small: 0;
  --text-caption: 500 13px/1.4 var(--font-sans);    --track-caption: 0;
  --text-label: 600 12px/1.3 var(--font-sans);      --track-label: 0.08em;  /* UPPERCASE */

  /* ============================================================
     SPACING — 4px base grid
     ============================================================ */
  --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;

  /* ---------- RADII (8px is the workhorse) ---------- */
  --radius-sm: 4px;
  --radius-md: 8px;   /* default for buttons, inputs, cards */
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 999px;

  /* ---------- ELEVATION (soft, navy-tinted, never harsh black) ---------- */
  --shadow-subtle:   0 1px 2px rgba(30,43,63,0.05), 0 1px 1px rgba(30,43,63,0.04);
  --shadow-medium:   0 4px 12px rgba(30,43,63,0.08), 0 1px 3px rgba(30,43,63,0.05);
  --shadow-elevated: 0 12px 32px rgba(30,43,63,0.12), 0 4px 8px rgba(30,43,63,0.06);

  /* ---------- MOTION (quiet, certain, inevitable — no bounce) ---------- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;
}

/* ============================================================
   SEMANTIC ELEMENT DEFAULTS
   ============================================================ */
body {
  background: var(--bg-1);
  color: var(--fg-1);
  font: var(--text-body);
  letter-spacing: var(--track-body);
  font-family: var(--font-sans);
  font-feature-settings: var(--font-features-base);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* NOTE: the `font:` shorthand resets font-feature-settings to `normal`, so every
   rule that uses it MUST re-declare font-feature-settings AFTER the shorthand —
   otherwise the OpenType variants below are silently wiped. Keep this ordering. */
h1, h2, h3, .display { color: var(--navy-900); text-wrap: balance; }
.display { font: var(--text-display); letter-spacing: var(--track-display); font-feature-settings: var(--font-features-brand); }
h1 { font: var(--text-h1); letter-spacing: var(--track-h1); font-feature-settings: var(--font-features-brand); }
h2 { font: var(--text-h2); letter-spacing: var(--track-h2); font-feature-settings: var(--font-features-brand); }
h3 { font: var(--text-h3); letter-spacing: var(--track-h3); font-feature-settings: var(--font-features-brand); }
p  { font: var(--text-body); letter-spacing: var(--track-body); color: var(--fg-1); text-wrap: pretty; font-feature-settings: var(--font-features-base); }
small, .small { font: var(--text-small); font-feature-settings: var(--font-features-base); }
.caption { font: var(--text-caption); font-feature-settings: var(--font-features-base); }

.label {
  font: var(--text-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--copper-700);
  font-feature-settings: var(--font-features-base);
}

.num { font-feature-settings: var(--font-features-data); }
code, .code, pre {
  font-family: var(--font-mono);
  font-feature-settings: var(--font-features-code);
  font-size: 0.92em;
}

/* The spelling is always "Obvios" (wordmark). Taglines use real "obvious". */
.wordmark {
  font-family: var(--font-wordmark);
  font-weight: 200;
  font-style: italic;
  letter-spacing: -0.03em;
  font-feature-settings: var(--font-features-brand);
  color: var(--navy-900);
}