/* Dalo design tokens — v0.1.1 (provisional, 2026-10-27)
   Import:  <link rel="stylesheet" href="dalo-tokens.css">
   Fonts load from Google Fonts; for offline PDF rendering, wait for fonts before printing. */
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@500;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600&display=swap");

:root {
  /* surfaces */
  --dalo-paper:        #FAFCFA; /* page background */
  --dalo-white:        #FFFFFF; /* cards, raised surfaces */
  --dalo-mint:         #E6F4EC; /* hero bands, title slides */
  --dalo-mint-2:       #E3F2EA; /* chips, callout blocks, diagram node fill */
  --dalo-leaf-200:     #C9E8D7; /* decorative shapes, emphasis fills */
  --dalo-line:         #DDE9E2; /* borders, dividers, gridlines */

  /* text */
  --dalo-ink:          #10241D; /* all primary text — green-black, never #000 */
  --dalo-muted:        #566B63; /* secondary text, captions */

  /* brand */
  --dalo-fern:         #1F6B52; /* primary: buttons, links, key shapes */
  --dalo-on-fern:      #FFFFFF;
  --dalo-rose:         #CC3D5A; /* accent: AA on paper/white at any size; white text on it passes */
  --dalo-on-rose:      #FFFFFF;
  --dalo-blush:        #FBE0E4; /* accent tint: tag backgrounds, highlight fills; the only pink allowed on fern */

  /* type */
  --dalo-font-display: "Manrope", system-ui, sans-serif;  /* weight 800, tracking -0.035em */
  --dalo-font-body:    "Inter", system-ui, sans-serif;    /* weight 400–600 */
  --dalo-font-mono:    "JetBrains Mono", ui-monospace, monospace; /* eyebrows, code, data labels */
  --dalo-display-weight: 800;
  --dalo-display-tracking: -0.035em;

  /* type scale (web; slides scale ×1.5–2) */
  --dalo-text-xs:   12px;
  --dalo-text-sm:   14px;
  --dalo-text-base: 17px;
  --dalo-text-lg:   20px;
  --dalo-text-xl:   28px;
  --dalo-text-2xl:  40px;
  --dalo-text-3xl:  56px;

  /* shape & space */
  --dalo-radius:      8px;
  --dalo-radius-pill: 999px;
  --dalo-space-1: 4px;  --dalo-space-2: 8px;  --dalo-space-3: 12px; --dalo-space-4: 16px;
  --dalo-space-6: 24px; --dalo-space-8: 32px; --dalo-space-12: 48px; --dalo-space-16: 64px;
  --dalo-shadow: 0 1px 2px rgba(16,36,29,.06), 0 8px 24px rgba(16,36,29,.06);
}

/* sensible defaults when a doc opts in with <body class="dalo"> */
.dalo { background: var(--dalo-paper); color: var(--dalo-ink); font: 400 var(--dalo-text-base)/1.6 var(--dalo-font-body); }
.dalo h1, .dalo h2, .dalo h3 { font-family: var(--dalo-font-display); font-weight: var(--dalo-display-weight); letter-spacing: var(--dalo-display-tracking); line-height: 1.1; }
.dalo a { color: var(--dalo-fern); }
.dalo .eyebrow { font: 600 var(--dalo-text-xs)/1 var(--dalo-font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dalo-rose); }
.dalo .accent { color: var(--dalo-rose); }
.dalo .tag { display: inline-block; font: 700 11px/1 var(--dalo-font-body); letter-spacing: .08em; text-transform: uppercase; padding: 5px 10px; border-radius: var(--dalo-radius-pill); background: var(--dalo-blush); color: var(--dalo-ink); }
.dalo .btn { display: inline-block; padding: 12px 22px; border-radius: var(--dalo-radius); font-weight: 600; background: var(--dalo-fern); color: var(--dalo-on-fern); text-decoration: none; }

@media print {
  .dalo { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}