/* ============================================================================
   MomOps — Design Tokens: Colours & Type
   ----------------------------------------------------------------------------
   MomOps Research Atlas — muted feminist infrastructure documentation.
   Rigorous, not corporate. Warm, not soft. Documentary, not decorative.
   Editorial, not SaaS. Accessible for tired / interrupted readers.

   This is a MomOps RESEARCH PALETTE — care infrastructure, field notes,
   evidence, risk, and institutional legibility. (Not a generic "teal" palette.)

   Load order: link fonts/fonts.css, then this file.
   ========================================================================== */

@import url('fonts/fonts.css');

:root {
  /* ── Type families ──────────────────────────────────────────────────── */
  /* Display / headings — hero statements, framework headings, theory, slow reading */
  --font-display: 'Source Serif 4', Georgia, serif;
  /* Body / interface — body, captions, buttons, nav, labels, evidence cards, UI */
  --font-body:    'Atkinson Hyperlegible', system-ui, sans-serif;

  --font-size-base: 16px;

  /* ── PRIMARY INK ─────────────────────────────────────────────────────
     body text · dark panels · borders · institutional seriousness · system language */
  --momops-ink:        #2F4F4F;
  --momops-ink-soft:   #4A6B6B;
  --momops-ink-medium: #3D5B5B;
  --momops-ink-dark:   #1F3333;
  --momops-ink-deep:   #182727;   /* near-black editorial ink */
  --momops-cream-text: #FFF8EC;   /* cream text on dark ink panels */

  /* ── GROUND / PAPER ──────────────────────────────────────────────────
     page backgrounds · reading surfaces · cards · muted evidence panels */
  --momops-ground:      #F6F4F0;
  --momops-paper:       #FFFAF0;
  --momops-sand:        #F0E8DC;
  --momops-muted-sand:  #ECE7DF;
  --momops-border-sand: #D7D2C8;

  /* ── CARE / SYSTEM SIGNAL ────────────────────────────────────────────
     evidence · systems signal · care infrastructure · diagrams · subtle highlights */
  --momops-teal:      #4CA8A0;
  --momops-teal-soft: #9CCDC6;
  --momops-teal-deep: #2E6B66;

  /* ── RISK / PENALTY / FAILURE ────────────────────────────────────────
     motherhood penalty · attrition · failure points · warnings · emphasis numbers */
  --momops-coral:     #E75D42;
  --momops-terracotta:#EB5937;
  --momops-risk-dark: #9F321F;

  /* ── ATTENTION / ROUTE MARKER (sparingly) ────────────────────────────
     active nav · key markers · framework accents · small attention cues */
  --momops-gold: #F0BF3F;

  /* ── SECONDARY SCHOLARLY ACCENTS ─────────────────────────────────────
     bibliography categories · secondary tags · scholarly grouping ONLY.
     Never as low-contrast text backgrounds. */
  --momops-lavender: #C9B7E8;
  --momops-pink:     #E9B7C8;
  --momops-blue:     #9CC3E6;

  /* ── Hairline rules & field-note grid ────────────────────────────────── */
  --momops-rule:       rgba(24, 39, 39, 0.22);
  --momops-rule-soft:  rgba(24, 39, 39, 0.12);
  --grid-line-v:       rgba(24, 39, 39, 0.055);
  --grid-line-h:       rgba(24, 39, 39, 0.045);
  --grid-size:         72px;

  /* ── Semantic aliases ───────────────────────────────────────────────── */
  --background:           var(--momops-ground);
  --foreground:           var(--momops-ink);
  --card:                 #ffffff;
  --card-foreground:      var(--momops-ink);
  --primary:              var(--momops-ink);
  --primary-foreground:   var(--momops-ground);
  --muted:                var(--momops-muted-sand);
  --muted-foreground:     var(--momops-ink-soft);
  --accent:               var(--momops-teal);
  --destructive:          var(--momops-coral);
  --border:               rgba(47, 79, 79, 0.10);
  --ring:                 var(--momops-teal);

  /* ── Radii — square in editorial mode ───────────────────────────────── */
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* ── Shadows — the editorial signature is the hard offset ───────────── */
  --shadow-soft:        0 4px 6px -1px rgb(0 0 0 / 0.05), 0 2px 4px -2px rgb(0 0 0 / 0.05);
  --shadow-lift:        0 10px 25px -3px rgb(0 0 0 / 0.10);
  --shadow-block:        7px 7px 0 var(--momops-ink-deep);
  --shadow-block-hover: 10px 10px 0 var(--momops-ink-deep);
  --shadow-block-soft:   7px 7px 0 rgba(24, 39, 39, 0.22);

  /* ── Motion ─────────────────────────────────────────────────────────── */
  --ease-out:  cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-draw: cubic-bezier(0.4, 0, 0.1, 1);
  --dur-fast:  200ms;
  --dur-base:  300ms;
  --dur-slow:  500ms;

  /* ── LEGACY ALIASES (older preview cards / editorial.css) ────────────── */
  --teal-ink: var(--momops-ink);  --teal-ink-light: var(--momops-ink-soft);
  --teal-ink-medium: var(--momops-ink-medium); --teal-ink-dark: var(--momops-ink-dark);
  --ti-teal: var(--momops-teal); --ti-teal-light: var(--momops-teal-soft);
  --ti-teal-dark: var(--momops-teal-deep); --ti-teal-deep: var(--momops-teal-deep);
  --warm-sand: var(--momops-sand); --warm-sand-light: var(--momops-ground);
  --warm-sand-medium: var(--momops-muted-sand); --warm-sand-dark: var(--momops-border-sand);
  --sage: var(--momops-teal-soft); --amber: var(--momops-gold);
  --coral: var(--momops-terracotta); --terracotta: var(--momops-terracotta);
  --ink: var(--momops-ink-deep); --cream: var(--momops-paper); --cream-soft: var(--momops-cream-text);
  --gold: var(--momops-gold); --coral-editorial: var(--momops-coral);
  --rule: var(--momops-rule); --rule-soft: var(--momops-rule-soft);
  --font-mono: var(--font-body);  /* mono retired — labels render in Atkinson */
}

/* ============================================================================
   SEMANTIC TYPE SCALE
   Display: Source Serif 4  (400 soft · 600 headings · 700 strong · 900 rare emphasis)
   Body:    Atkinson Hyperlegible  (400 · 700)
   ========================================================================== */

.ds-h1, h1 {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--foreground);
  text-wrap: balance;
}
.ds-h2, h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--foreground);
  text-wrap: balance;
}
.ds-h3, h3 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--foreground);
}
.ds-h4 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.4;
  font-weight: 600;
  color: var(--foreground);
}

/* Rare framework emphasis — weight 900, used sparingly */
.ds-section-title {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 0.96;
  letter-spacing: 0;
  color: var(--momops-ink-deep);
}
.ds-display {
  font-family: var(--font-display);
  font-size: clamp(3rem, 6vw, 5rem);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.ds-lead {
  font-family: var(--font-body);
  font-size: 1.375rem;
  line-height: 1.6;
  color: var(--muted-foreground);
}
.ds-body, p {
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--muted-foreground);
  text-wrap: pretty;
}
.ds-small {
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.5;
}

/* Field-note label — Atkinson 700, uppercase, tracked. The annotation voice. */
.ds-label {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--momops-ink-soft);
}