/* C&E Design System — colors_and_type.css
 * Single source of truth for color tokens and typography.
 * Load with:  <link rel="stylesheet" href="colors_and_type.css">
 */

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

:root {
  /* ── Brand ─────────────────────────────────── */
  --ce-orange:        #EE7026;   /* hero color, lifted from the logo */
  --ce-orange-press:  #D45E18;   /* darker hover/press */
  --ce-orange-tint:   #FCEADD;   /* 12% tint, backgrounds */
  --ce-orange-line:   #F4B98A;   /* outlines, dividers on tint */

  /* ── Ink (foregrounds) ─────────────────────── */
  --ce-ink:           #14110F;   /* near-black, warm */
  --ce-ink-2:         #2B2622;   /* secondary text */
  --ce-ink-3:         #6B645E;   /* tertiary, captions */
  --ce-ink-4:         #9C958E;   /* placeholder, disabled */

  /* ── Paper (backgrounds, warm neutrals) ───── */
  --ce-paper:         #F6F4F1;   /* page background, warm off-white */
  --ce-paper-2:       #EDEAE4;   /* card / panel surface */
  --ce-paper-3:       #DDD8D0;   /* subtle dividers */
  --ce-white:         #FFFFFF;   /* pure white, modals/overlays */

  /* ── Ink Mode (inverted / dark surfaces) ──── */
  --ce-ink-surface:   #1A1714;   /* dark cards, hero ribbons */
  --ce-ink-surface-2: #25201C;   /* dark card secondary */
  --ce-ink-on-dark:   #F6F4F1;   /* text on dark */

  /* ── Semantic (financial context) ─────────── */
  --ce-positive:      #2F7D4F;   /* gains, paid, complete */
  --ce-positive-tint: #E2EFE7;
  --ce-negative:      #B83D2E;   /* losses, due, error */
  --ce-negative-tint: #F6E1DC;
  --ce-caution:       #B57714;   /* pending, review */
  --ce-caution-tint:  #F6ECD4;

  /* ── Type Stacks ──────────────────────────── */
  --ce-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --ce-mono: "Geist Mono", ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;

  /* ── Type Scale (semantic) ────────────────── */
  --ce-display:    700 72px/0.98 var(--ce-sans);
  --ce-h1:         600 48px/1.04 var(--ce-sans);
  --ce-h2:         600 32px/1.10 var(--ce-sans);
  --ce-h3:         600 22px/1.20 var(--ce-sans);
  --ce-h4:         500 17px/1.30 var(--ce-sans);
  --ce-body:       400 16px/1.55 var(--ce-sans);
  --ce-body-sm:    400 14px/1.50 var(--ce-sans);
  --ce-caption:    400 12px/1.40 var(--ce-sans);
  --ce-overline:   500 11px/1.20 var(--ce-mono);
  --ce-mono-fig:   500 16px/1.30 var(--ce-mono);   /* tabular figures */
  --ce-mono-sm:    500 13px/1.30 var(--ce-mono);

  /* ── Spacing (4px base) ───────────────────── */
  --ce-s1:  4px;
  --ce-s2:  8px;
  --ce-s3:  12px;
  --ce-s4:  16px;
  --ce-s5:  24px;
  --ce-s6:  32px;
  --ce-s7:  48px;
  --ce-s8:  64px;
  --ce-s9:  96px;

  /* ── Radius ───────────────────────────────── */
  --ce-r-sm: 4px;
  --ce-r-md: 8px;
  --ce-r-lg: 14px;
  --ce-r-xl: 22px;
  --ce-r-pill: 999px;

  /* ── Borders / Shadows ────────────────────── */
  --ce-hairline: 1px solid var(--ce-paper-3);
  --ce-ink-line: 1px solid var(--ce-ink);
  --ce-shadow-1: 0 1px 0 rgba(20,17,15,0.04), 0 1px 3px rgba(20,17,15,0.06);
  --ce-shadow-2: 0 2px 4px rgba(20,17,15,0.05), 0 8px 24px rgba(20,17,15,0.08);
  --ce-shadow-pop: 0 12px 40px rgba(20,17,15,0.18);

  /* ── Motion ───────────────────────────────── */
  --ce-ease: cubic-bezier(.2,.7,.2,1);
  --ce-dur-fast: 120ms;
  --ce-dur: 200ms;
  --ce-dur-slow: 360ms;
}

/* ── Base ──────────────────────────────────── */
html, body {
  background: var(--ce-paper);
  color: var(--ce-ink);
  font: var(--ce-body);
  font-feature-settings: "ss01", "ss02", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── Semantic typography classes ──────────── */
.ce-display  { font: var(--ce-display);  letter-spacing: -0.035em; }
.ce-h1       { font: var(--ce-h1);       letter-spacing: -0.028em; }
.ce-h2       { font: var(--ce-h2);       letter-spacing: -0.022em; }
.ce-h3       { font: var(--ce-h3);       letter-spacing: -0.015em; }
.ce-h4       { font: var(--ce-h4);       letter-spacing: -0.008em; }
.ce-body     { font: var(--ce-body); }
.ce-body-sm  { font: var(--ce-body-sm);  color: var(--ce-ink-2); }
.ce-caption  { font: var(--ce-caption);  color: var(--ce-ink-3); }
.ce-overline { font: var(--ce-overline); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ce-ink-3); }
.ce-mono     { font: var(--ce-mono-fig); font-variant-numeric: tabular-nums; }
.ce-mono-sm  { font: var(--ce-mono-sm);  font-variant-numeric: tabular-nums; }

/* numeric data should always be tabular */
.ce-figure { font-family: var(--ce-mono); font-variant-numeric: tabular-nums; font-weight: 500; }