@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Syne:wght@400;600;700&display=swap');

:root {
  /* ── Primitive colors ──────────────────────────────────────── */
  --color-black-100: #0e0e10;
  --color-black-200: #141416;
  --color-black-300: #1a1a1e;
  --color-black-400: #2a2a2e;

  --color-stone-100: #3a3a3e;
  --color-stone-200: #6b6a65;
  --color-stone-300: #8a8882;
  --color-stone-400: #b0aea8;
  --color-stone-500: #c8c5be;
  --color-stone-600: #e8e6e0;
  --color-stone-700: #f0ede8;

  --color-green-100: #5DCAA5;
  --color-green-200: #9FE1CB;

  --color-purple-100: #AFA9EC;

  --color-gold-100: #FAC775;
  --color-gold-200: #f0c060;

  --color-red-100: #F0997B;
  --color-red-200: #e05c5c;

  /* ── Semantic: backgrounds ─────────────────────────────────── */
  --bg-base:    var(--color-black-100);
  --bg-raised:  var(--color-black-200);
  --bg-surface: var(--color-black-300);
  --bg-overlay: var(--color-black-400);

  /* ── Semantic: text ────────────────────────────────────────── */
  --text-primary:   var(--color-stone-700);
  --text-body:      var(--color-stone-600);
  --text-secondary: var(--color-stone-500);
  --text-muted:     var(--color-stone-400);
  --text-subtle:    var(--color-stone-200);
  --text-ghost:     var(--color-stone-100);

  /* ── Semantic: accents ─────────────────────────────────────── */
  --accent-primary:       var(--color-green-100);
  --accent-primary-light: var(--color-green-200);
  --accent-ai:            var(--color-purple-100);
  --accent-warning:       var(--color-gold-100);
  --accent-master:        var(--color-gold-200);

  /* ── Semantic: states ──────────────────────────────────────── */
  --positive:       var(--color-green-100);
  --negative:       var(--color-red-100);
  --negative-hard:  var(--color-red-200);

  /* ── Borders ───────────────────────────────────────────────── */
  --border-faint:   rgba(255, 255, 255, 0.05);
  --border-subtle:  rgba(255, 255, 255, 0.08);
  --border-default: rgba(255, 255, 255, 0.12);
  --border-strong:  rgba(255, 255, 255, 0.15);

  /* ── Spacing ───────────────────────────────────────────────── */
  --space-1:  4px;
  --space-2:  6px;
  --space-3:  8px;
  --space-4:  10px;
  --space-5:  12px;
  --space-6:  14px;
  --space-7:  16px;
  --space-8:  1.25rem;
  --space-9:  1.5rem;
  --space-10: 2rem;

  /* ── Border radius ─────────────────────────────────────────── */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   10px;
  --radius-xl:   12px;
  --radius-2xl:  16px;
  --radius-pill: 20px;

  /* ── Typography ────────────────────────────────────────────── */
  --font-ui:   'Syne', sans-serif;
  --font-data: 'DM Mono', monospace;

  --text-2xs: 9px;
  --text-xs:  10px;
  --text-sm:  11px;
  --text-base: 12px;
  --text-md:  13px;
  --text-lg:  14px;
  --text-xl:  15px;
  --text-2xl: 16px;
  --text-3xl: 18px;
  --text-4xl: 20px;
  --text-5xl: 22px;
  --text-6xl: 24px;

  /* ── Shadows ───────────────────────────────────────────────── */
  --shadow-modal:  0 16px 60px rgba(0, 0, 0, 0.6);
  --shadow-panel:  0 8px 40px rgba(0, 0, 0, 0.5);
  --shadow-float:  0 16px 60px rgba(0, 0, 0, 0.7);

  /* ── Transitions ───────────────────────────────────────────── */
  --transition-fast: all 0.15s;
  --transition-base: all 0.2s;

  /* ── Breakpoints (for reference — use in @media queries) ───── */
  /* --bp-mobile:  560px  */
  /* --bp-tablet:  900px  */
  /* --bp-grid-sm: 600px  */
  /* --bp-grid-md: 640px  */
}

/* Fluid content width — overrides per-page inline max-width: 960px on body.
   92% gives natural side breathing room; 1600px caps on ultra-wide screens. */
body {
  width: min(92%, 1600px) !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body.light-theme {
  --bg-base:    #F5F3EF;
  --bg-raised:  #EDEAE4;
  --bg-surface: #E4E1DA;
  --bg-overlay: #D8D4CC;
  --text-primary:   #1a1a1e;
  --text-body:      #2a2a2e;
  --text-secondary: #4a4a4e;
  --text-muted:     #5c5b56;
  --text-subtle:    #6e6d68;
  --text-ghost:     #8f8d87;
  --border-faint:   rgba(0,0,0,0.05);
  --border-subtle:  rgba(0,0,0,0.08);
  --border-default: rgba(0,0,0,0.12);
  --border-strong:  rgba(0,0,0,0.18);

  /* Deeper accents for contrast on light backgrounds */
  --accent-primary:       #1A9B73;
  --accent-primary-light: #D4F0E8;
  --accent-ai:            #6355C7;
  --accent-warning:       #D4860A;
  --accent-master:        #B8860B;
  --positive:             #1A9B73;
  --negative:             #C94A1A;
  --negative-hard:        #B91C1C;
}

body.accent-orange {
  --accent-primary:       #E8854A;
  --accent-primary-light: #F0A876;
  --positive:             #E8854A;
}

body.accent-violet {
  --accent-primary:       #AFA9EC;
  --accent-primary-light: #CBC7F3;
  --positive:             #AFA9EC;
}

body.accent-gold {
  --accent-primary:       #FAC775;
  --accent-primary-light: #FCD99A;
  --positive:             #FAC775;
}