/* ─────────────────────────────────────────────────────────────
   SAMSAARA CAPITAL — Design tokens
   Paste into any HTML head. All web surfaces inherit from here.
   ───────────────────────────────────────────────────────────── */

/* Web stack: Source Serif 4 (display) + Inter (sans, 400/500/600/700) + JetBrains Mono.
   Deck stack: scoped override in ui_kits/document/document.css swaps display + sans
   tokens to Helvetica Neue / Arial so PPTX export round-trips cleanly to MS Office. */
@import url("https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600;8..60,700&family=Spectral:wght@300;400;500;600;700&family=Cormorant+Garamond:wght@400;500;600;700&family=Fraunces:opsz,wght,SOFT@9..144,400..700,30..100&family=Newsreader:opsz,wght@6..72,400;6..72,500;6..72,600;6..72,700&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* ── PALETTE ──────────────────────────────────────────────── */
  /* ── PALETTE — finalised May 2026 ─────────────────────────
     Three brand families (cobalt / burgundy / teal) at six stops each,
     one ink ramp, two data-signal hues. No additional hues. */

  /* COBALT — warm cobalt. Primary brand colour.
     Slightly warmer (more red undertone) than a pure royal blue
     so it reads institutional rather than tech-startup. */
  --color-cobalt-700: #1A2868;      /* deepest — large fills */
  --color-cobalt-600: #243474;      /* hover / pressed link */
  --color-cobalt-500: #2D3E8C;      /* PRIMARY — links, titles, accents */
  --color-cobalt-400: #4C5BAA;      /* lighter — chart fills, illustrations */
  --color-cobalt-100: #E6E8F2;      /* tint — subject-column wash, selection */
  --color-cobalt-50:  #F3F4F9;      /* whisper — page region highlight */

  /* BURGUNDY — callout / risk / single emphasis.
     One burgundy element per page maximum. Never structural. */
  --color-burgundy-700: #481620;
  --color-burgundy-600: #5E222B;    /* pressed callout type */
  --color-burgundy-500: #722F37;    /* PRIMARY — Falsifier, risk callouts */
  --color-burgundy-400: #95485A;
  --color-burgundy-100: #F1E5E7;    /* burgundy callout background */
  --color-burgundy-50:  #F8F2F3;

  /* TEAL — subject / focus highlight in tables and charts.
     Third brand accent. Distinct from cobalt (brand) and burgundy (risk). */
  --color-teal-700: #0E3D3A;
  --color-teal-600: #155752;        /* deeper teal — body type on tint */
  --color-teal-500: #1F6B66;        /* PRIMARY — subject column, focus highlights */
  --color-teal-400: #3F8783;
  --color-teal-100: #E1EEED;        /* very pale teal — wash */
  --color-teal-50:  #F2F7F6;

  /* INK RAMP — semantic neutrals. Never #000. */
  --color-ink:      #1A2238;        /* headlines, wordmark, slide titles */
  --color-body:     #3E4654;        /* narrative copy */
  --color-subtle:   #5A6170;        /* secondary text */
  --color-muted:    #8A8F98;        /* footers, metadata, subtitles */
  --color-disabled: #B5B8BE;        /* disabled controls */
  --color-hairline: #E2E0DA;        /* dividers, table borders */
  --color-card:     #F4F4F0;        /* card fills, callout backgrounds */
  --color-stage:    #F1EFEA;        /* page region behind cards */
  --color-page:     #FFFFFF;        /* paper-white background */

  /* DATA SIGNALS — actual gain/loss in tables and chart deltas.
     Not brand colours. Reserved for numerical signal. */
  --color-gain-500: #1F8A5B;
  --color-gain-100: #E4F1EB;
  --color-loss-500: #B53A2D;
  --color-loss-100: #F6E5E1;

  /* Semantic aliases (use these in components, not the raw hex) */
  --fg-strong: var(--color-ink);
  --fg-body: var(--color-body);
  --fg-muted: var(--color-muted);
  --fg-link: var(--color-cobalt-500);
  --fg-link-hover: var(--color-cobalt-600);
  --bg-page: var(--color-page);
  --bg-card: var(--color-card);
  --rule-hairline: var(--color-hairline);
  --accent-primary: var(--color-cobalt-500);
  --accent-callout: var(--color-burgundy-500);

  /* ── TYPE FAMILIES ────────────────────────────────────────── */
  /* Display / wordmark — Source Serif 4 (Adobe, variable: opsz 60, weight 400–700).
     Picked for institutional restraint: classical proportions, neutral terminals,
     reads as a serious investment publication rather than editorial / lifestyle.
     Fallbacks: Charter, Georgia for systems without webfonts. */
  --font-display: "Source Serif 4", "Charter", "Iowan Old Style", "Georgia", "Times New Roman", serif;
  --font-display-settings: "opsz" 60;
  --font-sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "JetBrains Mono", "Consolas", "SF Mono", ui-monospace, monospace;

  /* ── TYPE SCALE — WEB (px) ─────────────────────────────────
     Locked at six steps. Hero is the only oversized step. */
  --fs-hero: 72px;      /* Homepage hero only */
  --fs-display: 48px;   /* Section openers */
  --fs-h1: 32px;        /* Page H1 */
  --fs-h2: 22px;        /* Section H */
  --fs-h3: 16px;        /* Subsection */
  --fs-body: 16px;      /* Default reading size */
  --fs-small: 14px;     /* Secondary copy */
  --fs-label: 11px;     /* SECTION LABELS — small caps, letter-spaced */
  --fs-footer: 12px;    /* Footers, legal */

  /* ── TYPE SCALE — DOCUMENT (pt → rem-equivalent for HTML mocks)
     Match Brand System slide 5 exactly. */
  --doc-fs-hero: 52pt; /* @kind font */
  --doc-fs-title: 28pt; /* @kind font */
  --doc-fs-sectionH: 18pt; /* @kind font */
  --doc-fs-body: 13pt; /* @kind font */
  --doc-fs-label: 10pt; /* @kind font */
  --doc-fs-footer: 9pt; /* @kind font */

  /* ── LINE HEIGHTS ─────────────────────────────────────────── */
  --lh-hero: 0.98; /* @kind font */
  --lh-tight: 1.1; /* @kind font */
  --lh-snug: 1.25; /* @kind font */
  --lh-normal: 1.45; /* @kind font */
  --lh-loose: 1.6; /* @kind font */

  /* ── LETTER SPACING ───────────────────────────────────────── */
  --tracking-tight: -0.02em; /* @kind font */   /* hero, display */
  --tracking-normal: 0; /* @kind font */
  --tracking-label: 0.12em; /* @kind font */    /* SECTION LABELS */
  --tracking-wide: 0.04em; /* @kind font */

  /* ── SPACE SCALE (4px base) ───────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-32: 128px;

  /* ── RADII ─ structural elements are always square. ──────── */
  --radius-0: 0px;       /* default — cards, tables, sections */
  --radius-pill: 999px;  /* inline status pills only */

  /* ── HAIRLINES & RULES ────────────────────────────────────── */
  --rule-1: 1px solid var(--color-hairline); /* @kind other */
  --rule-cobalt-short: 2px solid var(--color-cobalt-500); /* @kind other */   /* the ~1.2in document rule */

  /* ── MOTION ────────────────────────────────────────────────
     Motion is allowed for: hero value rotator, link/hover transitions,
     page scroll. Forbidden for: anything inside a document, any
     decorative ornament, infinite loops. */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1); /* @kind other */     /* default */
  --ease-entrance: cubic-bezier(0.0, 0, 0.2, 1); /* @kind other */   /* enter only */
  --ease-exit:     cubic-bezier(0.4, 0, 1, 1); /* @kind other */     /* exit only */
  --dur-instant: 80ms; /* @kind other */
  --dur-fast: 160ms; /* @kind other */
  --dur-base: 240ms; /* @kind other */
  --dur-slow: 400ms; /* @kind other */
  --dur-rotator: 2000ms; /* @kind other */       /* hero typer — dwell once term fully typed */
  --dur-type-char: 45ms; /* @kind other */       /* hero typer — per character typed */
  --dur-type-erase: 25ms; /* @kind other */      /* hero typer — per character erased */

  /* ── LAYOUT ────────────────────────────────────────────────
     Web grid: 12-col, 80px gutters max, 1240px content width.
     Slide grid: 1280×720 design res (standard PPT widescreen, 13.33"×7.5");
     64px outer margin l/r, 30px top, 26px bottom. */
  --maxw-content: 1240px; /* @kind spacing */
  --maxw-prose: 720px; /* @kind spacing */
  --gutter: 24px; /* @kind spacing */
  --pad-page: 96px; /* @kind spacing */
  --pad-page-md: 48px; /* @kind spacing */
  --pad-page-sm: 24px; /* @kind spacing */
  --bp-sm: 640px; /* @kind spacing */
  --bp-md: 960px; /* @kind spacing */
  --bp-lg: 1280px; /* @kind spacing */
}

/* ─────────────────────────────────────────────────────────────
   SEMANTIC ELEMENT STYLES
   Use these as base; components override locally.
   ───────────────────────────────────────────────────────────── */
html, body {
  background: var(--bg-page);
  color: var(--fg-body);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.s-hero {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  line-height: var(--lh-hero);
  letter-spacing: var(--tracking-tight);
  font-weight: 600;
  color: var(--fg-strong);
}

.s-display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 600;
  color: var(--fg-strong);
}

.s-h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
  font-weight: 600;
  color: var(--fg-strong);
}

.s-h2 {
  font-family: var(--font-sans);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  font-weight: 600;
  color: var(--fg-strong);
}

.s-h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: var(--lh-snug);
  color: var(--fg-strong);
}

.s-body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  color: var(--fg-body);
}

.s-small {
  font-size: var(--fs-small);
  line-height: var(--lh-normal);
  color: var(--fg-body);
}

.s-label {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--accent-primary);
}

.s-footer {
  font-family: var(--font-sans);
  font-size: var(--fs-footer);
  color: var(--fg-muted);
}

/* Numerals — sans with tabular lining figures. Use this everywhere
   a number sits in a table, KPI strip, metric, or chart label.
   Mono is reserved for code, hex values, raw timestamps. */
.s-num,
.num {
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  letter-spacing: -0.005em;
}

.s-mono {
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1, "lnum" 1;
  font-variant-numeric: tabular-nums lining-nums;
}

/* Wordmark — used in nav, footer, document headers.
   Always lowercase "samsaara"; the legal form "Samsaara Capital" lives
   only in footers / letterhead. */
.s-wordmark {
  font-family: var(--font-display);
  font-weight: 500;
  font-variation-settings: var(--font-display-settings);
  letter-spacing: -0.01em;
  color: var(--fg-strong);
  text-transform: lowercase;
}

/* Links — cobalt, underline on hover only */
a, .s-link {
  color: var(--fg-link);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-standard);
}
a:hover, .s-link:hover {
  color: var(--fg-link-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* The signature header rule — short cobalt + full hairline.
   Use under section labels & document body headers. */
.s-header-rule {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 12px 0 24px;
}
.s-header-rule::before {
  content: "";
  width: 80px;
  height: 2px;
  background: var(--accent-primary);
  flex: none;
}
.s-header-rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule-hairline);
}

/* Inline status pill — the ONLY pill in the system. */
.s-pill {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  border-radius: var(--radius-pill);
  background: var(--color-cobalt-100);
  color: var(--color-cobalt-600);
}
.s-pill--muted { background: var(--bg-card); color: var(--fg-muted); }
.s-pill--callout { background: var(--color-burgundy-100); color: var(--color-burgundy-500); }