/* ============================================================================
   Damasio Academy — brand design tokens (the shared visual contract)
   Extends Enrique Damasio's existing brand for continuity.
   Every portal imports this: <link rel="stylesheet" href="/css/tokens.css">
============================================================================ */
:root {
  /* --- palette --- */
  --da-cream:        #f6efe1; /* parchment background */
  --da-cream-2:      #efe6d3;
  --da-forest:       #0e2417; /* deep forest green (primary/ink) */
  --da-forest-2:     #163a26;
  --da-terracotta:   #b04a3a; /* accent / CTA */
  --da-terracotta-2: #943c2e;
  --da-yellow:       #FCD116; /* Venezuelan-yellow accent */
  --da-ink:          #1c1a15; /* body text on cream */
  --da-muted:        #6b6455;
  --da-line:         #d8ccb4;
  --da-white:        #ffffff;

  /* semantic */
  --da-bg:        var(--da-cream);
  --da-surface:   var(--da-white);
  --da-text:      var(--da-ink);
  --da-heading:   var(--da-forest);
  --da-primary:   var(--da-forest);
  --da-accent:    var(--da-terracotta);
  --da-highlight: var(--da-yellow);

  /* --- type --- */
  --da-font-display: "Playfair Display", Georgia, serif;   /* headlines */
  --da-font-serif:   "Cormorant Garamond", Georgia, serif; /* subheads / quotes */
  --da-font-body:    "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  /* --- scale / radius / shadow --- */
  --da-radius:    14px;
  --da-radius-sm: 8px;
  --da-shadow:    0 10px 30px rgba(14, 36, 23, 0.10);
  --da-shadow-sm: 0 2px 8px rgba(14, 36, 23, 0.08);
  --da-maxw:      1180px;
  --da-space:     clamp(16px, 4vw, 40px);
}

/* Fonts: load once per page (Google Fonts) —
   <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700&family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"> */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--da-bg);
  color: var(--da-text);
  font-family: var(--da-font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--da-font-display); color: var(--da-heading); line-height: 1.15; margin: 0 0 .5em; }
h1 { font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 700; }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.4rem); font-weight: 600; }
a { color: var(--da-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.da-container { max-width: var(--da-maxw); margin: 0 auto; padding: 0 var(--da-space); }

.da-btn {
  display: inline-flex; align-items: center; gap: .5em;
  background: var(--da-forest); color: var(--da-white);
  padding: .8em 1.4em; border-radius: var(--da-radius-sm);
  font-weight: 600; border: 0; cursor: pointer; font-family: var(--da-font-body);
  transition: transform .12s ease, background .2s ease;
}
.da-btn:hover { background: var(--da-forest-2); text-decoration: none; transform: translateY(-1px); }
.da-btn--accent { background: var(--da-terracotta); }
.da-btn--accent:hover { background: var(--da-terracotta-2); }
.da-btn--ghost { background: transparent; color: var(--da-forest); border: 1.5px solid var(--da-forest); }

.da-card {
  background: var(--da-surface); border: 1px solid var(--da-line);
  border-radius: var(--da-radius); box-shadow: var(--da-shadow-sm); padding: var(--da-space);
}
/* Plain uppercase label — NO pills anywhere (see CLAUDE.md). */
.da-badge {
  display: inline-block; background: none; padding: 0; border-radius: 0;
  color: var(--da-gold, #a8842c);
  font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}
.m-hero .da-badge { color: #ecdcae; }
img { max-width: 100%; height: auto; display: block; }