/* =========================================================
   DirectCFO — Colors & Type
   Source of truth: uploads/brand-guidelines.md v1.0 (2026)
   ========================================================= */

/* Archivo + Inter Tight pulled from Google Fonts (no local files shipped).
   Space Grotesk + JetBrains Mono are self-hosted from fonts/ (user-provided). */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&family=Inter+Tight:wght@400;500;600&display=swap');

@font-face {
  font-family: 'Space Grotesk';
  src: url('fonts/SpaceGrotesk-VariableFont_wght.ttf') format('truetype-variations'),
       url('fonts/SpaceGrotesk-VariableFont_wght.ttf') format('truetype');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/JetBrainsMono-VariableFont_wght.ttf') format('truetype-variations'),
       url('fonts/JetBrainsMono-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Primary palette ---------- */
  --dcfo-ink:        #0A1628; /* Primary dark base, primary text */
  --dcfo-gold:       #C9A14A; /* Sole accent — emphasis, "CFO", key data */
  --dcfo-paper:      #F5F3EE; /* Primary light surface */
  --dcfo-white:      #FFFFFF; /* Hard contrast */

  /* ---------- Secondary palette ---------- */
  --dcfo-charcoal:   #1C1C1E; /* Alternate dark surface */
  --dcfo-graphite:   #2A2E35; /* Cards, panels on dark */
  --dcfo-slate:      #6B7280; /* Secondary text */
  --dcfo-mute:       #A1A6AE; /* Tertiary text on dark */
  --dcfo-rule:       #D9D5CC; /* Dividers on light */
  --dcfo-paper-dim:  #ECE8DF; /* Alt light surface */
  --dcfo-gold-deep:  #A78236; /* Pressed/hover gold */
  --dcfo-gold-light: #E4C77A; /* Data highlights only */

  /* ---------- Semantic foreground / background ---------- */
  --fg-1: var(--dcfo-ink);      /* primary text on light */
  --fg-2: var(--dcfo-slate);    /* secondary text on light */
  --fg-3: #8A8F98;              /* tertiary text on light */
  --fg-accent: var(--dcfo-gold-deep); /* accent text (AA on paper) */

  --fg-d1: var(--dcfo-white);   /* primary text on dark */
  --fg-d2: var(--dcfo-mute);    /* secondary text on dark */
  --fg-d3: #6B7280;             /* tertiary text on dark */

  --bg-1: var(--dcfo-paper);    /* primary light bg */
  --bg-2: var(--dcfo-paper-dim);/* alt light bg */
  --bg-3: var(--dcfo-white);    /* highest-contrast light */
  --bg-d1: var(--dcfo-ink);     /* primary dark bg */
  --bg-d2: var(--dcfo-charcoal);/* alt dark bg */
  --bg-d3: var(--dcfo-graphite);/* card on dark */

  --border-1: var(--dcfo-rule);
  --border-d1: #1F2937;

  /* ---------- Type families ---------- */
  --font-wordmark:  'Archivo', system-ui, sans-serif;
  --font-display:   'Space Grotesk', system-ui, sans-serif;
  --font-body:      'Inter Tight', system-ui, sans-serif;
  --font-mono:      'JetBrains Mono', ui-monospace, monospace;

  /* ---------- Spacing (base 8px) ---------- */
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 32px;
  --sp-6: 48px;
  --sp-9: 72px;
  --sp-12: 96px;
  --sp-15: 120px;

  /* ---------- Radii (minimal, institutional) ---------- */
  --radius-0: 0px;
  --radius-1: 2px;
  --radius-2: 4px;
  --radius-3: 8px;
  --radius-app-icon: 22%; /* for app tiles */

  /* ---------- Elevation / shadows (used sparingly) ---------- */
  --shadow-0: none;
  --shadow-1: 0 1px 2px rgba(10,22,40,0.06), 0 1px 1px rgba(10,22,40,0.04);
  --shadow-2: 0 4px 16px rgba(10,22,40,0.08);
  --shadow-3: 0 12px 40px rgba(10,22,40,0.12);
  --shadow-inset-rule: inset 0 -1px 0 var(--dcfo-rule);

  /* ---------- Motion ---------- */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-exit:     cubic-bezier(0.4, 0, 1, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
}

/* =========================================================
   Base / semantic type styles
   Matches Brand Guidelines §3.2 type scale
   ========================================================= */

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--fg-1);
  background: var(--bg-1);
}

/* Display — hero / cover */
.t-display {
  font-family: var(--font-display);
  font-size: 72px;
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.0;
}

/* Headings */
h1, .t-h1 {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 500;
  letter-spacing: -0.028em;
  line-height: 1.05;
  margin: 0;
}
h2, .t-h2 {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
}
h3, .t-h3 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin: 0;
}

/* Lead paragraph */
.t-lead {
  font-family: var(--font-body);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--fg-1);
}

/* Body */
p, .t-body {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  margin: 0 0 var(--sp-2);
  text-wrap: pretty;
}

.t-small {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--fg-2);
}

/* Mono / data */
.t-mono, code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}

/* Eyebrow — always uppercase, always mono */
.t-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--fg-2);
}

/* Wordmark — Archivo, tight tracking */
.t-wordmark {
  font-family: var(--font-wordmark);
  letter-spacing: -0.04em;
  line-height: 1;
}

/* Utility */
.num { font-variant-numeric: tabular-nums; font-family: var(--font-mono); }
.gold { color: var(--dcfo-gold); }
.gold-deep { color: var(--dcfo-gold-deep); }
.on-dark { color: var(--fg-d1); }