/* ── NABU DESIGN TOKENS — Sprint 2 ───────────────────────────────────────────
 *
 * THE DESIGN SYSTEM (for Amani):
 *
 * This file defines every color, font, spacing value, and visual rule.
 * Think of it as the DNA of how Nabu looks — same pattern as Ma'at's main.css
 * variables. Change a color here, it changes everywhere.
 *
 * DYSLEXIA OPTIMIZATION:
 *   - Larger line-height (1.65+) helps track lines
 *   - Generous letter/word spacing prevents crowding
 *   - Sans-serif body font (Jost) for readability
 *   - Serif display font (Cormorant Garamond) for headlines only
 *   - Left-aligned text, never justified
 *   - Warm off-whites, never pure white on pure black (reduces glare)
 * ──────────────────────────────────────────────────────────────────────────── */

:root {
  /* ── Surfaces ─────────────────────────────────────────────────────────── */
  --bg:            #0A0908;
  --surface:       #0D0C0B;
  --surface-2:     #131210;
  --surface-3:     #1A1816;
  --surface-hover: #1E1C18;
  --border:        #1E1C19;
  --border-2:      #2A2722;
  --border-focus:  #C9A96E;

  /* ── Gold ──────────────────────────────────────────────────────────────── */
  --gold:          #C9A96E;
  --gold-dark:     #8A7248;
  --gold-light:    #F0D0A0;
  --gold-bg:       #1C1508;
  --gold-border:   #2A1C08;
  --gold-glow:     rgba(201, 169, 110, 0.12);

  /* ── Text ──────────────────────────────────────────────────────────────── */
  --text:          #E2DDD5;
  --text-2:        #C4BDB2;
  --text-3:        #9A9388;
  --text-muted:    #5A554E;
  --text-dim:      #3A3528;

  /* ── Status ────────────────────────────────────────────────────────────── */
  --green:         #3ECF8E;
  --green-bg:      #0D2018;
  --blue:          #6B8CFF;
  --blue-bg:       #0C1726;
  --red:           #F87171;
  --red-bg:        #200E0E;
  --amber:         #F5A623;
  --amber-bg:      #221A08;
  --purple:        #C084FC;

  /* ── Typography ────────────────────────────────────────────────────────── */
  --font-display:  'Cormorant Garamond', Georgia, serif;
  --font-body:     'Jost', -apple-system, sans-serif;

  --line-height:     1.65;
  --letter-space:    0.015em;
  --letter-space-ui: 0.03em;
  --word-space:      0.08em;

  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-lg:   20px;
  --text-xl:   26px;
  --text-2xl:  32px;

  /* ── Layout ────────────────────────────────────────────────────────────── */
  --radius:       8px;
  --radius-lg:    14px;
  --radius-full:  9999px;
  --content-max:  600px;
  --padding:      20px;
  --topbar-h:     52px;
  --bottomnav-h:  64px;

  /* ── Shadows & Motion ──────────────────────────────────────────────────── */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.3);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.4);
  --ease:       cubic-bezier(0.4, 0, 0.2, 1);
  --duration:   0.2s;
}

/* ── LIGHT THEME ─────────────────────────────────────────────────────────── */
[data-theme="light"] {
  --bg:            #F5F0E8;
  --surface:       #FFFFFF;
  --surface-2:     #FAF8F4;
  --surface-3:     #F0ECE4;
  --surface-hover: #EBE6DD;
  --border:        #E0D8CC;
  --border-2:      #D0C8BC;
  --border-focus:  #8A6028;
  --gold:          #8A6028;
  --gold-dark:     #6B4A1C;
  --gold-light:    #C9A96E;
  --gold-bg:       #FAF3E0;
  --gold-border:   #E8D8B8;
  --gold-glow:     rgba(138, 96, 40, 0.08);
  --text:          #1A1816;
  --text-2:        #3A3528;
  --text-3:        #6A6358;
  --text-muted:    #9A9388;
  --text-dim:      #C4BDB2;
  --green:         #1A8A5A;
  --green-bg:      #E8F5EE;
  --blue:          #3B5CCC;
  --blue-bg:       #E8EEF8;
  --red:           #CC3333;
  --red-bg:        #F8E8E8;
  --amber:         #B87A00;
  --amber-bg:      #FFF5E0;
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.1);
}