/* VibDesk — design tokens */

:root {
  color-scheme: light;

  /* Typography */
  --font-sans: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Light theme — clean paper with blue accents */
  --bg: #F5F7FB;
  --bg-elev: #FBFCFF;
  --bg-sunken: #EAF0F8;
  --surface: #FFFFFF;
  --fg: #0E1113;
  --fg-muted: #5A5E64;
  --fg-subtle: #8A8E94;
  --border: #D9E2EF;
  --border-strong: #B9C9DE;
  --hairline: #E5ECF6;

  /* Accents — single system accent */
  --accent: #1D5FA8;
  --accent-fg: #FFFFFF;
  --accent-weak: #DCEBFA;
  --accent-border: #93B7DF;

  /* Status — classic, colorblind-safe via shape */
  --ok: oklch(0.58 0.14 150);
  --ok-weak: oklch(0.93 0.04 150);
  --ok-border: oklch(0.82 0.09 150);

  --warn: oklch(0.70 0.15 75);
  --warn-weak: oklch(0.95 0.05 85);
  --warn-border: oklch(0.85 0.10 80);

  --alarm: oklch(0.56 0.21 25);
  --alarm-weak: oklch(0.94 0.04 25);
  --alarm-border: oklch(0.82 0.12 25);

  /* Radii — tight */
  --r-sm: 2px;
  --r-md: 4px;
  --r-lg: 6px;

  /* Shadows — almost none */
  --shadow-pop: 0 1px 2px rgba(14,17,19,0.04), 0 4px 12px rgba(14,17,19,0.06);

  /* Grid */
  --unit: 4px;
}

:root.theme-graphite,
:root[data-theme="graphite"],
.theme-graphite {
  color-scheme: dark;
  --bg: #111111;
  --bg-elev: #1B1B1B;
  --bg-sunken: #080808;
  --surface: #262626;
  --fg: #F2EEE6;
  --fg-muted: #B7AEA1;
  --fg-subtle: #837A70;
  --border: #3B3B3B;
  --border-strong: #5B5144;
  --hairline: #2D2D2D;
  --accent: #F0B84D;
  --accent-fg: #15100A;
  --accent-weak: #3F2D0D;
  --accent-border: #9E7222;
  --ok: oklch(0.75 0.16 150);
  --ok-weak: oklch(0.22 0.05 150);
  --ok-border: oklch(0.35 0.10 150);
  --warn: oklch(0.80 0.15 75);
  --warn-weak: oklch(0.25 0.06 75);
  --warn-border: oklch(0.39 0.10 75);
  --alarm: oklch(0.70 0.21 25);
  --alarm-weak: oklch(0.25 0.08 25);
  --alarm-border: oklch(0.40 0.14 25);
  --shadow-pop: 0 1px 2px rgba(0,0,0,0.34), 0 10px 30px rgba(0,0,0,0.45);
}

:root.theme-diagpom,
:root[data-theme="diagpom"],
.theme-diagpom {
  color-scheme: light;
  --bg: #FFF0ED;
  --bg-elev: #FFE2DB;
  --bg-sunken: #FFD0C5;
  --surface: #FFFDFC;
  --fg: #1F1110;
  --fg-muted: #70403B;
  --fg-subtle: #A06B64;
  --border: #EEB2A6;
  --border-strong: #D17A6A;
  --hairline: #F5C9C1;
  --accent: #B42318;
  --accent-fg: #FFFFFF;
  --accent-weak: #FFD6CF;
  --accent-border: #E68D80;
  --shadow-pop: 0 1px 2px rgba(84,18,12,0.08), 0 10px 28px rgba(84,18,12,0.15);
}

:root.theme-sage,
:root[data-theme="sage"],
.theme-sage {
  color-scheme: light;
  --bg: #EFE2CF;
  --bg-elev: #F7EEE0;
  --bg-sunken: #DFCEB7;
  --surface: #FFF7EC;
  --fg: #151A13;
  --fg-muted: #53604A;
  --fg-subtle: #7B856E;
  --border: #C9B9A1;
  --border-strong: #9EA586;
  --hairline: #E4D6C2;
  --accent: #667556;
  --accent-fg: #FFFFFF;
  --accent-weak: #DCE6D3;
  --accent-border: #A6B894;
  --shadow-pop: 0 1px 2px rgba(43,50,35,0.08), 0 10px 28px rgba(43,50,35,0.14);
}

:root.theme-rust,
:root[data-theme="rust"],
.theme-rust {
  color-scheme: light;
  --bg: #EAE0C8;
  --bg-elev: #F5EAD2;
  --bg-sunken: #D9C59E;
  --surface: #FFF7E7;
  --fg: #1F120B;
  --fg-muted: #684331;
  --fg-subtle: #987665;
  --border: #CDB895;
  --border-strong: #A86643;
  --hairline: #E6D7BA;
  --accent: #8B3103;
  --accent-fg: #FFFFFF;
  --accent-weak: #F1D4C0;
  --accent-border: #C77748;
  --shadow-pop: 0 1px 2px rgba(69,27,6,0.10), 0 10px 28px rgba(69,27,6,0.18);
}

:root.theme-navy,
:root[data-theme="navy"],
.theme-navy {
  color-scheme: dark;
  --bg: #101826;
  --bg-elev: #16243A;
  --bg-sunken: #0A101A;
  --surface: #1E3B63;
  --fg: #F4F1EA;
  --fg-muted: #B9C2CF;
  --fg-subtle: #7F8DA1;
  --border: #2B4A75;
  --border-strong: #426797;
  --hairline: #1A2B45;
  --accent: #E5E0D8;
  --accent-fg: #0E1725;
  --accent-weak: #2A405F;
  --accent-border: #7790B3;
  --ok: oklch(0.75 0.16 150);
  --ok-weak: oklch(0.22 0.05 150);
  --ok-border: oklch(0.35 0.10 150);
  --warn: oklch(0.80 0.15 75);
  --warn-weak: oklch(0.25 0.06 75);
  --warn-border: oklch(0.39 0.10 75);
  --alarm: oklch(0.70 0.21 25);
  --alarm-weak: oklch(0.25 0.08 25);
  --alarm-border: oklch(0.40 0.14 25);
  --shadow-pop: 0 1px 2px rgba(0,0,0,0.32), 0 10px 30px rgba(0,0,0,0.42);
}

:root.theme-ice,
:root[data-theme="ice"],
.theme-ice {
  color-scheme: light;
  --bg: #E3F1FA;
  --bg-elev: #F3FAFE;
  --bg-sunken: #CCDEE9;
  --surface: #FAFDFF;
  --fg: #111923;
  --fg-muted: #4F5F70;
  --fg-subtle: #7F90A0;
  --border: #B7CAD8;
  --border-strong: #8197AA;
  --hairline: #D8E8F2;
  --accent: #566474;
  --accent-fg: #FFFFFF;
  --accent-weak: #D4E1EA;
  --accent-border: #9AAABA;
  --shadow-pop: 0 1px 2px rgba(27,44,59,0.08), 0 10px 28px rgba(27,44,59,0.13);
}

:root.theme-jungle,
:root[data-theme="jungle"],
.theme-jungle {
  color-scheme: light;
  --bg: #FFF4CC;
  --bg-elev: #FFF9E1;
  --bg-sunken: #F1DFA6;
  --surface: #FFFCED;
  --fg: #132219;
  --fg-muted: #415747;
  --fg-subtle: #728170;
  --border: #D8C98F;
  --border-strong: #8BA27E;
  --hairline: #F2E5B7;
  --accent: #1A4731;
  --accent-fg: #FFFFFF;
  --accent-weak: #D5E5D4;
  --accent-border: #79A085;
  --shadow-pop: 0 1px 2px rgba(22,55,39,0.08), 0 10px 28px rgba(22,55,39,0.16);
}

:root.theme-burgundy,
:root[data-theme="burgundy"],
.theme-burgundy {
  color-scheme: dark;
  --bg: #071A1D;
  --bg-elev: #0D2529;
  --bg-sunken: #031012;
  --surface: #0E4F56;
  --fg: #F5F1E8;
  --fg-muted: #B8CCC7;
  --fg-subtle: #779692;
  --border: #1C626A;
  --border-strong: #4C9498;
  --hairline: #12363A;
  --accent: #9FD3C7;
  --accent-fg: #061416;
  --accent-weak: #14383C;
  --accent-border: #5EA79F;
  --ok: oklch(0.75 0.15 150);
  --ok-weak: oklch(0.23 0.05 150);
  --ok-border: oklch(0.36 0.09 150);
  --warn: oklch(0.80 0.15 75);
  --warn-weak: oklch(0.25 0.06 75);
  --warn-border: oklch(0.39 0.10 75);
  --alarm: oklch(0.72 0.21 25);
  --alarm-weak: oklch(0.27 0.08 25);
  --alarm-border: oklch(0.43 0.14 25);
  --shadow-pop: 0 1px 2px rgba(0,0,0,0.34), 0 10px 30px rgba(0,0,0,0.46);
}

:root.theme-copper,
:root[data-theme="copper"],
.theme-copper {
  color-scheme: light;
  --bg: #F3EFFA;
  --bg-elev: #FAF7FF;
  --bg-sunken: #E4DDF1;
  --surface: #FFFFFF;
  --fg: #161421;
  --fg-muted: #5E5870;
  --fg-subtle: #8A829C;
  --border: #D7CDEC;
  --border-strong: #9B8BC2;
  --hairline: #E8E1F3;
  --accent: #5A4A8A;
  --accent-fg: #FFFFFF;
  --accent-weak: #E1D8F3;
  --accent-border: #B3A3D7;
  --shadow-pop: 0 1px 2px rgba(54,42,82,0.08), 0 10px 28px rgba(54,42,82,0.14);
}

:root.theme-archive,
:root[data-theme="archive"],
.theme-archive {
  color-scheme: dark;
  --bg: #111113;
  --bg-elev: #1B191D;
  --bg-sunken: #08080A;
  --surface: #242124;
  --fg: #F6F1EA;
  --fg-muted: #C9C0B8;
  --fg-subtle: #8F8780;
  --border: #3A363A;
  --border-strong: #5E575D;
  --hairline: #2B282C;
  --accent: #F8F4EC;
  --accent-fg: #111113;
  --accent-weak: #343035;
  --accent-border: #7A7277;
  --ok: oklch(0.75 0.16 150);
  --ok-weak: oklch(0.22 0.05 150);
  --ok-border: oklch(0.35 0.10 150);
  --warn: oklch(0.80 0.15 75);
  --warn-weak: oklch(0.25 0.06 75);
  --warn-border: oklch(0.39 0.10 75);
  --alarm: oklch(0.70 0.21 25);
  --alarm-weak: oklch(0.25 0.08 25);
  --alarm-border: oklch(0.40 0.14 25);
  --shadow-pop: 0 1px 2px rgba(0,0,0,0.34), 0 10px 30px rgba(0,0,0,0.46);
}

:root.theme-plum,
:root[data-theme="plum"],
.theme-plum {
  color-scheme: light;
  --bg: #FFFAFA;
  --bg-elev: #FFFFFF;
  --bg-sunken: #F2EAF0;
  --surface: #FFFFFF;
  --fg: #171215;
  --fg-muted: #62505B;
  --fg-subtle: #8D7885;
  --border: #DDCBD6;
  --border-strong: #B58CA5;
  --hairline: #EFE2EA;
  --accent: #8E6080;
  --accent-fg: #FFFFFF;
  --accent-weak: #EBDDE7;
  --accent-border: #C4A0B7;
  --shadow-pop: 0 1px 2px rgba(69,44,60,0.08), 0 10px 28px rgba(69,44,60,0.14);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.45;
  font-feature-settings: "ss01", "cv11", "tnum";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

#root { min-height: 100vh; }

::selection { background: var(--accent); color: var(--accent-fg); }

/* Scrollbar — subtle */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }

/* Utility */
.mono { font-family: var(--font-mono); font-feature-settings: "tnum", "zero"; }
.num { font-variant-numeric: tabular-nums; }
.tight { letter-spacing: -0.01em; }
.tighter { letter-spacing: -0.02em; }
.uppercase-label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 10px;
  font-weight: 600;
  color: var(--fg-muted);
}

button { font-family: inherit; }
input, textarea, select { font-family: inherit; color: inherit; }