/* ─────────────────────────────────────────────
   Moku — Design Tokens
   Surgical minimalism. One accent. No noise.
   ───────────────────────────────────────────── */

:root {
  /* Backgrounds — near-black, layered by elevation */
  --bg-void:      #080808;
  --bg-base:      #0c0c0c;
  --bg-surface:   #101010;
  --bg-raised:    #151515;
  --bg-overlay:   #1a1a1a;
  --bg-subtle:    #202020;

  /* Borders */
  --border-dim:    #1c1c1c;
  --border-base:   #242424;
  --border-strong: #2e2e2e;
  --border-focus:  #4a5c4a;

  /* Text — cold whites, readable hierarchy */
  --text-primary:   #f0efec;
  --text-secondary: #c8c6c0;  /* bumped up slightly from b8b6b0 for readability */
  --text-muted:     #8a8880;  /* bumped up slightly from 6e6c67 */
  --text-faint:     #4e4d4a;  /* bumped up slightly from 3e3d3a */
  --text-disabled:  #2a2a28;

  /* Accent — desaturated sage green */
  --accent:         #6b8f6b;
  --accent-dim:     #2a3d2a;
  --accent-muted:   #1a251a;
  --accent-fg:      #a8c4a8;
  --accent-bright:  #8fb88f;

  /* Semantic */
  --color-error:    #c47a7a;
  --color-error-bg: #1f1212;
  --color-success:  #7aab7a;
  --color-info:     #7a9ec4;
  --color-info-bg:  #121a1f;
  --color-read:     #2e2e2c;

  /* Status dots */
  --dot-active:   var(--accent);
  --dot-inactive: var(--text-faint);

  /* Typography */
  --font-ui:      "DM Mono", "Fira Mono", ui-monospace, monospace;
  --font-sans:    "DM Sans", ui-sans-serif, system-ui, sans-serif;

  /* Type scale */
  --text-2xs: 10px;
  --text-xs:  11px;
  --text-sm:  12px;
  --text-base: 13px;
  --text-md:  14px;
  --text-lg:  15px;
  --text-xl:  17px;
  --text-2xl: 20px;
  --text-3xl: 24px;

  /* Weight */
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semi:   600;

  /* Leading */
  --leading-none:  1;
  --leading-tight: 1.3;
  --leading-snug:  1.45;
  --leading-base:  1.6;

  /* Tracking */
  --tracking-tight:  -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.06em;
  --tracking-wider:   0.1em;

  /* Spacing */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;

  /* Radius */
  --radius-sm:   3px;
  --radius-md:   5px;
  --radius-lg:   7px;
  --radius-xl:   10px;
  --radius-2xl:  14px;
  --radius-full: 9999px;

  /* Sidebar */
  --sidebar-width: 52px;

  /* Z-index */
  --z-reader:   50;
  --z-modal:    100;
  --z-settings: 150;

  /* Transitions */
  --t-fast: 0.08s ease;
  --t-base: 0.14s ease;
  --t-slow: 0.22s ease;
}

/* ─────────────────────────────────────────────
   Themes
   Applied via data-theme on <html>.
   "dark" = default (no overrides needed, inherits :root).
   ───────────────────────────────────────────── */

/* ── High Contrast (dark base, sharper text) ── */
[data-theme="high-contrast"] {
  --bg-void:      #000000;
  --bg-base:      #080808;
  --bg-surface:   #0d0d0d;
  --bg-raised:    #111111;
  --bg-overlay:   #171717;
  --bg-subtle:    #1e1e1e;

  --border-dim:    #252525;
  --border-base:   #303030;
  --border-strong: #3e3e3e;
  --border-focus:  #5a7a5a;

  /* Text bumped up significantly for contrast */
  --text-primary:   #ffffff;
  --text-secondary: #e8e6e0;
  --text-muted:     #b0aea8;
  --text-faint:     #6e6c68;
  --text-disabled:  #303030;

  --accent:         #7aaa7a;
  --accent-dim:     #2e4a2e;
  --accent-muted:   #1e2e1e;
  --accent-fg:      #bcd8bc;
  --accent-bright:  #9fcf9f;
}

/* ── Light mode ── */
[data-theme="light"] {
  --bg-void:      #e8e6e2;
  --bg-base:      #eeece8;
  --bg-surface:   #f4f2ee;
  --bg-raised:    #faf8f4;
  --bg-overlay:   #ffffff;
  --bg-subtle:    #f0ede8;

  --border-dim:    #dedad4;
  --border-base:   #d0ccc6;
  --border-strong: #bbb6ae;
  --border-focus:  #5a7a5a;

  --text-primary:   #1a1916;
  --text-secondary: #2e2c28;
  --text-muted:     #5a5750;
  --text-faint:     #9a9890;
  --text-disabled:  #c8c4bc;

  --accent:         #4a724a;
  --accent-dim:     #c8dcc8;
  --accent-muted:   #deeade;
  --accent-fg:      #2a5a2a;
  --accent-bright:  #3a6a3a;

  --color-error:    #a03030;
  --color-error-bg: #fce8e8;
  --color-success:  #2a6a2a;
  --color-info:     #2a4a7a;
  --color-info-bg:  #e8eef8;
  --color-read:     #e8e4dc;
}

/* ── Light High Contrast ── */
[data-theme="light-contrast"] {
  --bg-void:      #d8d4ce;
  --bg-base:      #e2deda;
  --bg-surface:   #ece8e2;
  --bg-raised:    #f5f2ec;
  --bg-overlay:   #ffffff;
  --bg-subtle:    #e4e0d8;

  --border-dim:    #c4c0b8;
  --border-base:   #b0aca4;
  --border-strong: #989490;
  --border-focus:  #3a5a3a;

  --text-primary:   #080806;
  --text-secondary: #181612;
  --text-muted:     #38342e;
  --text-faint:     #706c64;
  --text-disabled:  #b0ac a4;

  --accent:         #2a5a2a;
  --accent-dim:     #b0ccb0;
  --accent-muted:   #c8dcc8;
  --accent-fg:      #183818;
  --accent-bright:  #1e4e1e;

  --color-error:    #8a1a1a;
  --color-error-bg: #f8e0e0;
  --color-read:     #e0dcd4;
}

/* ── Midnight (deep blue-black tint) ── */
[data-theme="midnight"] {
  --bg-void:      #050810;
  --bg-base:      #080c18;
  --bg-surface:   #0c1020;
  --bg-raised:    #101428;
  --bg-overlay:   #151a30;
  --bg-subtle:    #1a2038;

  --border-dim:    #1a2035;
  --border-base:   #222840;
  --border-strong: #2c3450;
  --border-focus:  #4a5c8a;

  --text-primary:   #eeeef8;
  --text-secondary: #c0c4d8;
  --text-muted:     #808498;
  --text-faint:     #404860;
  --text-disabled:  #202840;

  --accent:         #6a7ab8;
  --accent-dim:     #252d50;
  --accent-muted:   #181e38;
  --accent-fg:      #a8b4e8;
  --accent-bright:  #8896d0;
}

/* ── Warm (sepia / amber tinted) ── */
[data-theme="warm"] {
  --bg-void:      #0c0a06;
  --bg-base:      #100e08;
  --bg-surface:   #16130c;
  --bg-raised:    #1c1810;
  --bg-overlay:   #221e14;
  --bg-subtle:    #28241a;

  --border-dim:    #201c10;
  --border-base:   #2c2818;
  --border-strong: #3a3420;
  --border-focus:  #6a5a30;

  --text-primary:   #f5f0e0;
  --text-secondary: #d8d0b0;
  --text-muted:     #988c60;
  --text-faint:     #584e30;
  --text-disabled:  #302a18;

  --accent:         #c0902a;
  --accent-dim:     #3a2c10;
  --accent-muted:   #261e0c;
  --accent-fg:      #e0b860;
  --accent-bright:  #d0a040;
}