/* ═══════════════════════════════════════════════════════════════════
   SECOND BRAIN — DESIGN SYSTEM TOKENS
   NEO-RETRO STUDY OS v1
   Single source of truth. Do not define tokens anywhere else.
   ═══════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* ── CANONICAL PALETTE ──────────────────────────────────────────── */
  --cream:    #FFF8F1;
  --ink:      #3A2A3F;
  --pink:     #D84C9B;
  --blue:     #4F7CFF;
  --green:    #B9E521;
  --yellow:   #FFCC4D;
  --purple:   #9B7CFF;

  /* ── SURFACE SCALE (derived from cream) ─────────────────────────── */
  --surface:   #FFFDF9;   /* card background */
  --surface-2: #F5EDE0;   /* inset / input bg */
  --border:    #E6D6C6;   /* default borders */
  --muted:     #EDD9C8;   /* muted fills */

  /* ── SEMANTIC ALIASES ───────────────────────────────────────────── */
  --bg:   var(--cream);
  --text: var(--ink);
  --dim:  #7C5F73;        /* muted text — keeps contrast on light surfaces */

  /* ── LEGACY ALIASES (backward-compat with JS inline styles) ─────── */
  --plum:       var(--pink);
  --chartreuse: var(--green);
  --personal:   var(--purple);
  --research:   var(--blue);
  --leadership: var(--green);
  --wellness:   var(--yellow);
  --clinical:   var(--pink);
  /* NOTE: --red kept as semantic exception for error/danger states only */
  --red:        #C86B5E;

  /* ── DOMAIN COLORS (calendar / section accents) ─────────────────── */
  --c-clinical:   var(--pink);
  --c-research:   var(--blue);
  --c-leadership: var(--green);
  --c-personal:   var(--purple);
  --c-wellness:   var(--yellow);

  /* ── TEXT-ON-FILL VARIANTS (for legible text on bright fills) ────── */
  --green-dark:  #3d5200;
  --yellow-dark: #6b4200;
  --blue-dark:   #1d2e6e;
  --pink-dark:   #7a1852;

  /* ── NEOBRUTALISM SHADOW SYSTEM ──────────────────────────────────── */
  --sh:    5px 5px 0 var(--ink);   /* primary cards */
  --sh-sm: 2px 2px 0 var(--ink);  /* secondary elements (-33%) */
  --sh-xs: 1px 1px 0 var(--ink);  /* tertiary / micro elements */

  /* ── TYPOGRAPHY ──────────────────────────────────────────────────── */
  --mono:  'Space Mono', 'Courier New', monospace;
  --serif: 'Instrument Serif', Georgia, serif;
  --sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  /* ── TYPE SCALE ──────────────────────────────────────────────────── */
  --text-xs:   12px;   /* minimum — small labels, timestamps, badges */
  --text-sm:   13px;   /* secondary text, meta, chips */
  --text-md:   14px;   /* card content, list items */
  --text-base: 16px;   /* body copy */
  --text-lg:   18px;   /* lead text, sub-headings */
  --text-xl:   22px;   /* section headings */
  --text-2xl:  28px;   /* large numerals */
  --text-3xl:  36px;   /* hero numbers */

  /* ── SPACING SCALE (8px base) ────────────────────────────────────── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-7:  28px;
  --sp-8:  32px;
}

/* ── BASE DOCUMENT ────────────────────────────────────────────────── */
body {
  background-color: var(--cream);
  background-image: radial-gradient(circle, rgba(58,42,63,0.09) 1px, transparent 1px);
  background-size: 22px 22px;
  font-family: var(--mono);
  color: var(--ink);
  font-size: var(--text-base);
  line-height: 1.5;
  min-height: 100vh;
}

a {
  color: var(--blue);
  text-decoration: none;
  transition: color .15s;
}
a:hover { color: var(--ink); }

main {
  width: min(1160px, calc(100% - 32px));
  margin: 0 auto;
  padding-bottom: 72px;
}