/* ============================================================
   Advera Labs — Design Tokens v1.1
   ============================================================
   Canonical values for the entire brand system.
   DO NOT define colours, spacings, or typography outside this file.
   If you need a value that isn't here, update the brand system first
   (see BRAND.md and /docs/brand/), then add it here.

   v1.1 changes (May 2026):
   - Added two slate chrome tokens for Project Providence operating mode
   - Added one alpha-derived focus ring for dark chrome
   - Added the .providence-app scoped block for product-only aliases
   - All v1.0 tokens are unchanged
   ============================================================ */

:root {
  /* ─── PRIMARY BRAND ─── */
  --cobalt:       #1450C7;
  --cobalt-deep:  #0E3A99;
  --cobalt-soft:  #4A7BD5;
  --cobalt-tint:  #E8EFFB;

  /* ─── SUPPORTING PALETTE (charts & diagrams only) ─── */
  /* Use in order: cobalt → teal → rust → ochre → plum → moss */
  --teal:        #2A8A8C;   --teal-tint:   #DBEAEA;
  --rust:        #B85C3A;   --rust-tint:   #F4E2D9;
  --ochre:       #C99A3D;   --ochre-tint:  #F5EBD3;
  --plum:        #6B3F7A;   --plum-tint:   #E9DDED;
  --moss:        #5C7A4A;   --moss-tint:   #E2EBD9;

  /* ─── SURFACES ─── */
  --cream:       #FBFAF6;   /* default page background */
  --paper:       #F4F2EB;   /* alternate section background */
  --line:        #E8E5DC;   /* borders, dividers */
  --line-soft:   #F0EDE5;   /* subtle dividers */

  /* ─── INK SCALE ─── */
  --ink:         #1A1A1A;   /* body text, headers */
  --ink-soft:    #4A4A4A;   /* secondary text */
  --ink-mute:    #8A8A8A;   /* metadata, captions */
  --ink-light:   #C8C5BC;   /* dividers in dark mode */

  /* ─── SEMANTIC ─── */
  --success:     #2D7A3E;
  --warning:     #C68A2E;
  --error:       #B43A3A;

  /* ─── PROVIDENCE OPERATING MODE — CHROME (v1.1) ─── */
  /* These tokens are permitted ONLY on the top app bar and the left sidebar
     within Providence. Never on content surfaces, modals, drawers, table
     headers, or filter bars. See Operating Mode section in BRAND.md. */
  --chrome-top:        #1F2733;   /* Top app bar — slightly cooler than ink */
  --chrome-side:       #2A3142;   /* Left sidebar — slightly lifted from top */
  --focus-ring-dark:   rgba(74, 123, 213, 0.4);   /* cobalt-soft @ 40% — for inputs on chrome */

  /* ─── TYPOGRAPHY FAMILIES ─── */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'Source Serif 4', Georgia, serif;
  --font-ui:      'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;

  /* ─── TYPE SCALE ─── */
  --t-display:   72px;   /* Hero headlines, H1 */
  --t-h1:        56px;   /* Page titles */
  --t-h2:        42px;   /* Section titles */
  --t-h3:        26px;   /* Subsection titles */
  --t-h4:        18px;   /* Card titles */
  --t-body-lg:   18px;   /* Editorial lede */
  --t-body:      16px;   /* Default body */
  --t-body-sm:   14px;   /* UI body */
  --t-caption:   13px;   /* Bylines, captions */
  --t-mono:      11px;   /* Eyebrows, metadata */

  /* Operating-mode type scale (Providence) */
  --t-app-page:    22px;   /* Page titles in product */
  --t-app-panel:   16px;   /* Panel titles in product */
  --t-app-body:    13px;   /* Body, labels, helper in product */
  --t-app-stat:    22px;   /* Numeric stat values */
  --t-app-mono:    10px;   /* Eyebrows, table headers in product */

  /* ─── LINE HEIGHTS ─── */
  --lh-display:  1.05;
  --lh-heading:  1.15;
  --lh-body:     1.65;
  --lh-ui:       1.5;

  /* ─── SPACING SCALE (4px base) ─── */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;

  /* ─── RADII ─── */
  --r-sm:  4px;   /* tags, small inputs */
  --r-md:  8px;   /* buttons, form inputs */
  --r-lg:  12px;  /* cards, panels */
  --r-xl:  16px;  /* modals, large surfaces */

  /* ─── LAYOUT ─── */
  --max-reading:  720px;   /* prose line length */
  --max-editorial: 880px;  /* with pull quotes */
  --max-page:    1280px;   /* page container */

  /* ─── TRANSITIONS ─── */
  --t-fast:  150ms ease;
  --t-base:  200ms ease;
}

/* ============================================================
   PROVIDENCE OPERATING MODE — scoped aliases (v1.1)
   ============================================================
   Wrap the entire Providence app shell in <div class="providence-app">
   so these aliases are available to every component below it.

   Why scoped: keeps Providence-specific tokens out of the marketing
   site's namespace. If a component below the wrapper needs an "active"
   colour, it uses var(--app-active) and cannot accidentally drift to
   a hardcoded hex.
   ============================================================ */

.providence-app {
  /* Surfaces */
  --app-bg:           var(--paper);
  --app-panel:        var(--cream);
  --app-panel-white:  white;
  --app-border:       var(--line);
  --app-border-soft:  var(--line-soft);

  /* Chrome — top bar and sidebar only */
  --app-chrome-top:        var(--chrome-top);
  --app-chrome-side:       var(--chrome-side);
  --app-chrome-text:       var(--cream);
  --app-chrome-text-mute:  rgba(251, 250, 246, 0.7);
  --app-chrome-text-faint: rgba(251, 250, 246, 0.5);
  --app-chrome-divider:    rgba(251, 250, 246, 0.18);
  --app-chrome-accent:     var(--cobalt-soft);
  --app-chrome-active-bg:  rgba(74, 123, 213, 0.18);

  /* Functional cobalt — see "max 3 visible per pane" rule in BRAND.md */
  --app-active:       var(--cobalt);
  --app-active-bg:    var(--cobalt-tint);
  --app-protagonist:  var(--cobalt);
  --app-focus-ring:   var(--cobalt-tint);
  --app-focus-ring-dark: var(--focus-ring-dark);

  /* Inter as default body family for product surfaces (v1.1.0a).
     BRAND.md Operating Mode: "all headings, panel titles, table headers,
     body text, form labels, and helper text use Inter." Brand-moment
     surfaces opt back into Fraunces via .brand-moment headings below. */
  font-family: var(--font-ui);

  /* Apply tabular numerals across the whole app */
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   BASE TYPOGRAPHY
   ============================================================ */

body {
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--ink-soft);
  background: var(--cream);
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 400;
}

h1 { font-size: var(--t-h1); line-height: var(--lh-display); letter-spacing: -1.4px; }
h2 { font-size: var(--t-h2); line-height: var(--lh-heading); letter-spacing: -0.8px; }
h3 { font-size: var(--t-h3); line-height: var(--lh-heading); letter-spacing: -0.4px; font-weight: 500; }
h4 { font-size: var(--t-h4); line-height: var(--lh-heading); font-weight: 600; }

/* Within Providence, the default heading family flips to Inter — Fraunces
   is reserved for brand-moment surfaces (see BRAND.md). */
.providence-app h1,
.providence-app h2,
.providence-app h3,
.providence-app h4 {
  font-family: var(--font-ui);
  font-weight: 500;
  letter-spacing: -0.3px;
}

.providence-app h1 { font-size: var(--t-app-page); letter-spacing: -0.4px; }
.providence-app h2 { font-size: var(--t-app-panel); }
.providence-app h3 { font-size: var(--t-app-panel); }
.providence-app h4 { font-size: var(--t-app-body); font-weight: 600; }

/* Brand-moment surfaces inside the app explicitly opt back into Fraunces. */
.providence-app .brand-moment h1,
.providence-app .brand-moment h2,
.providence-app .brand-moment h3 {
  font-family: var(--font-display);
  font-weight: 400;
}

/* ============================================================
   SIGNATURE PATTERN: italic-cobalt emphasis
   Reserve for the word that carries meaning.
   ============================================================ */

.emphasis,
em.brand,
h1 em, h2 em, h3 em {
  font-style: italic;
  color: var(--cobalt);
  font-weight: inherit;
}

/* In product context, italic-cobalt only appears on brand-moment surfaces. */

/* ============================================================
   COMPONENT PRIMITIVES
   ============================================================ */

/* Buttons */
.btn {
  font-family: var(--font-ui);
  font-size: var(--t-body-sm);
  font-weight: 500;
  padding: 11px 24px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--t-fast);
  letter-spacing: 0.2px;
}
.btn-primary   { background: var(--ink);    color: var(--cream); }
.btn-secondary { background: var(--cream);  color: var(--ink);   border-color: var(--line); }
.btn-accent    { background: var(--cobalt); color: var(--cream); }
.btn-ghost     { background: transparent;   color: var(--cobalt); text-decoration: underline; }

/* Cards */
.card {
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-5);
}

/* Form inputs */
.input {
  font-family: var(--font-ui);
  font-size: var(--t-body-sm);
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: white;
  color: var(--ink);
  transition: all var(--t-fast);
}
.input:focus {
  outline: none;
  border-color: var(--cobalt);
  box-shadow: 0 0 0 3px var(--cobalt-tint);
}

/* Inputs on dark chrome use the dark focus ring */
.providence-app .app-chrome .input:focus,
.providence-app input.on-chrome:focus {
  box-shadow: 0 0 0 3px var(--focus-ring-dark);
}

/* Eyebrows (mono uppercase labels) */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--cobalt);
}

/* Tags */
.tag {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 4px 10px;
  border-radius: var(--r-sm);
  background: var(--paper);
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.tag-accent { background: var(--cobalt-tint); color: var(--cobalt); }

/* Tabular utility — apply to any numeric span where alignment matters.
   In Providence, this is already inherited from .providence-app, but the
   utility class is available everywhere. */
.tabular { font-variant-numeric: tabular-nums; }