/* ============================================================
   Mālama Labs Design System · canonical tokens
   Ported from the Claude Design handoff (colors_and_type.css),
   which is itself a direct port of the live site.css.
   THIS SUPERSEDES the earlier emerald/Playfair token set.

   Single source of truth for all styled outputs. Import this:
     <link rel="stylesheet" href="malama-tokens.css">

   Non-negotiable rules:
     - No em dashes anywhere. Comma, period, or restructure.
     - Newsreader for display headings; italic + accent for the emphasized clause.
     - Inter Tight for UI and body. JetBrains Mono for eyebrows, labels, data.
     - Accent lime (#c4f061) is the single hero color. The blue (#4a90e2)
       is reserved for the AI Compute product line only. Never two accents
       on one component.
     - Dark-first and dark-only. No drop shadows; elevation via surface steps
       and border color. Accent glow is rare and earned.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;0,6..72,500;0,6..72,600;0,6..72,700;1,6..72,300;1,6..72,400&family=JetBrains+Mono:wght@400;500;600&family=Inter+Tight:wght@300;400;500;600;700&display=swap');

:root {
  /* Surfaces (near-black, subtly green-tinted) */
  --bg:        #0a0e0a;   /* page background */
  --bg-elev:   #0f1410;   /* first elevated surface, cards, nav bg */
  --bg-card:   #131a14;   /* second elevated surface, inner cards */

  /* Ink */
  --ink:       #e8efe5;   /* primary text, never pure white */
  --ink-dim:   #9ba89a;   /* body copy, secondary */
  --ink-faint: #5f6c5f;   /* eyebrows, captions, metadata */

  /* Lines */
  --line:        #1f2a20; /* hairline divider */
  --line-bright: #2d3d2e; /* card borders, elevated edges */

  /* Accent */
  --accent:      #c4f061; /* signature lime, single hero color */
  --accent-dim:  #8aa845; /* quieter accent */
  --warn:        #f0a05a; /* amber, roadmap and partner statuses */
  --blue:        #4a90e2; /* AI Compute line only, use sparingly */

  /* Type families */
  --serif: 'Newsreader', Georgia, serif;                          /* display only */
  --sans:  'Inter Tight', system-ui, -apple-system, sans-serif; /* UI and body */
  --mono:  'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* Scale */
  --fs-mono-eyebrow: 11px; --fs-mono-micro: 10px; --fs-mono-tiny: 9px;
  --fs-body-lg: 19px; --fs-body: 16px; --fs-body-sm: 15px; --fs-body-xs: 14px; --fs-body-xxs: 13px;

  /* Letterspacing */
  --ls-mono: 0.1em; --ls-mono-hi: 0.15em; --ls-serif: -0.025em; --ls-display: -0.035em;

  /* Radius (squared-off, not pill) */
  --r-sm: 2px; --r-md: 4px; --r-lg: 6px; --r-pill: 100px;

  /* Elevation: border contrast + accent glow, no drop shadows */
  --glow-accent: 0 8px 24px rgba(196, 240, 97, 0.20);

  /* Spacing */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px;
  --space-6:24px; --space-7:32px; --space-8:40px; --space-9:56px; --space-10:80px; --space-11:120px;
}

/* Semantic type primitives */
.mlma-h1 { font-family: var(--serif); font-size: clamp(48px,7vw,96px); font-weight: 400; line-height: 0.95; letter-spacing: var(--ls-display); }
.mlma-h1 em { font-style: italic; color: var(--accent); font-weight: 300; }
.mlma-h2 { font-family: var(--serif); font-size: clamp(38px,5vw,64px); font-weight: 400; line-height: 1.05; letter-spacing: var(--ls-serif); }
.mlma-h2 em { font-style: italic; color: var(--accent); }
.mlma-h3 { font-family: var(--serif); font-size: 24px; font-weight: 400; line-height: 1.2; }
.mlma-lede { font-family: var(--sans); font-size: var(--fs-body-lg); line-height: 1.55; color: var(--ink-dim); }
.mlma-body { font-family: var(--sans); font-size: var(--fs-body); line-height: 1.65; color: var(--ink-dim); }
.mlma-eyebrow { font-family: var(--mono); font-size: var(--fs-mono-eyebrow); text-transform: uppercase; letter-spacing: var(--ls-mono-hi); color: var(--accent); display: inline-flex; align-items: center; gap: 12px; }
.mlma-section-num { font-family: var(--mono); font-size: var(--fs-mono-eyebrow); text-transform: uppercase; letter-spacing: var(--ls-mono-hi); color: var(--ink-faint); }
.mlma-stat-num { font-family: var(--serif); font-size: clamp(24px,3.6vw,48px); color: var(--accent); line-height: 1; letter-spacing: -0.02em; }
.mlma-mono-label { font-family: var(--mono); font-size: var(--fs-mono-micro); text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-faint); }
.mlma-quote { font-family: var(--serif); font-style: italic; font-size: 21px; color: var(--ink); border-left: 2px solid var(--accent); padding-left: 20px; }