/*
 * Glue Theme System
 *
 * One token set, thirteen identities. Pages must not invent their own chrome.
 *
 *   Graphite   — true black, violet accent
 *   Daylight   — paper white, indigo accent
 *   Midnight   — navy, electric blue accent
 *   Nord       — polar night, frost teal accent
 *   Ember      — warm charcoal, copper
 *   Umber      — warm charcoal, dusty brass
 *   Wick       — Graphite contrast, flame accent
 *   Wick Flat  — Graphite contrast, red-orange accent
 *   Pine       — forest floor, moss gold
 *   Wine       — burgundy night, rose
 *   Voltage    — true black, acid lime
 *   Solar      — cream paper, terracotta
 *   Ink        — cool newsprint, crimson
 *
 * Gray variables are space-separated RGB for Tailwind alpha modifiers.
 * On dark themes, gray-50 is the brightest text and gray-950 is the canvas.
 * Daylight inverts that so existing bg-gray-950 / text-gray-100 classes work.
 */

/* ================================================================
   THEME PALETTES
   ================================================================ */

:root,
[data-theme="graphite"] {
  /* True black canvas. Cards lift off it. Text stays near-white. */
  --gray-50:  248 248 250;
  --gray-100: 228 228 232;
  --gray-200: 196 196 202;
  --gray-300: 168 168 176;
  --gray-400: 138 138 148;
  --gray-500: 108 108 118;
  --gray-600: 58 58 64;
  --gray-700: 36 36 40;
  --gray-800: 18 18 20;
  --gray-900: 8 8 9;
  --gray-950: 0 0 0;

  --accent: 139 92 246;
  --accent-text: #c4b5fd;
  --accent-strong: #a78bfa;
  --theme-name: "Graphite";
  --theme-desc: "True black, violet";
  color-scheme: dark;
}

[data-theme="daylight"] {
  --gray-50:  17 17 19;
  --gray-100: 28 28 32;
  --gray-200: 55 55 62;
  --gray-300: 82 82 90;
  --gray-400: 112 112 120;
  --gray-500: 140 140 148;
  --gray-600: 198 198 204;
  --gray-700: 226 226 230;
  --gray-800: 240 240 243;
  --gray-900: 248 248 250;
  --gray-950: 255 255 255;

  --accent: 79 70 229;
  --accent-text: #4338ca;
  --accent-strong: #4f46e5;
  --theme-name: "Daylight";
  --theme-desc: "Paper, indigo";
  color-scheme: light;
}

[data-theme="midnight"] {
  /* Navy you can actually see, not a black with a rumor of blue. */
  --gray-50:  236 240 255;
  --gray-100: 210 218 248;
  --gray-200: 174 186 230;
  --gray-300: 140 154 210;
  --gray-400: 112 126 180;
  --gray-500: 88 100 150;
  --gray-600: 48 58 102;
  --gray-700: 32 40 78;
  --gray-800: 18 24 52;
  --gray-900: 10 14 34;
  --gray-950: 5 8 22;

  --accent: 91 140 255;
  --accent-text: #93b4ff;
  --accent-strong: #6b9aff;
  --theme-name: "Midnight";
  --theme-desc: "Navy, electric blue";
  color-scheme: dark;
}

[data-theme="nord"] {
  /* Polar Night + Frost. Not GitHub dark. */
  --gray-50:  236 239 244;
  --gray-100: 216 222 233;
  --gray-200: 180 190 210;
  --gray-300: 148 160 184;
  --gray-400: 118 130 154;
  --gray-500: 94 106 128;
  --gray-600: 67 76 94;
  --gray-700: 59 66 82;
  --gray-800: 46 52 64;
  --gray-900: 36 41 51;
  --gray-950: 24 28 36;

  --accent: 136 192 208;
  --accent-text: #88c0d0;
  --accent-strong: #8fbcbb;
  --theme-name: "Nord";
  --theme-desc: "Polar night, frost";
  color-scheme: dark;
}

[data-theme="ember"] {
  --gray-50:  248 236 220;
  --gray-100: 240 228 212;
  --gray-200: 212 192 168;
  --gray-300: 184 160 132;
  --gray-400: 168 144 120;
  --gray-500: 128 108 88;
  --gray-600: 72 52 36;
  --gray-700: 52 36 24;
  --gray-800: 36 24 16;
  --gray-900: 26 18 12;
  --gray-950: 18 12 8;

  --accent: 224 138 60;
  --accent-text: #f0b060;
  --accent-strong: #f0b060;
  --theme-name: "Ember";
  --theme-desc: "Warm charcoal, copper";
  color-scheme: dark;
}

[data-theme="umber"] {
  --gray-50:  244 240 232;
  --gray-100: 232 228 220;
  --gray-200: 200 196 184;
  --gray-300: 168 164 152;
  --gray-400: 144 136 120;
  --gray-500: 112 104 92;
  --gray-600: 64 58 50;
  --gray-700: 44 40 36;
  --gray-800: 32 28 24;
  --gray-900: 24 22 20;
  --gray-950: 18 17 15;

  --accent: 196 168 130;
  --accent-text: #d4c4a0;
  --accent-strong: #d4c4a0;
  --theme-name: "Umber";
  --theme-desc: "Warm charcoal, dusty brass";
  color-scheme: dark;
}

[data-theme="wick"] {
  /* Graphite’s gray ladder. Flame on chrome. Type stays near-white. */
  --gray-50:  248 248 250;
  --gray-100: 228 228 232;
  --gray-200: 196 196 202;
  --gray-300: 168 168 176;
  --gray-400: 138 138 148;
  --gray-500: 108 108 118;
  --gray-600: 58 58 64;
  --gray-700: 36 36 40;
  --gray-800: 18 18 22;
  --gray-900: 8 8 10;
  --gray-950: 0 0 0;

  --accent: 224 112 40;
  --accent-text: #e4e4e8;
  --accent-strong: #d4482c;
  --theme-name: "Wick";
  --theme-desc: "True black, flame";
  color-scheme: dark;
}

[data-theme="wick-flat"] {
  --gray-50:  248 248 250;
  --gray-100: 228 228 232;
  --gray-200: 196 196 202;
  --gray-300: 168 168 176;
  --gray-400: 138 138 148;
  --gray-500: 108 108 118;
  --gray-600: 58 58 64;
  --gray-700: 36 36 40;
  --gray-800: 18 18 22;
  --gray-900: 8 8 10;
  --gray-950: 0 0 0;

  --accent: 212 72 44;
  --accent-text: #e4e4e8;
  --accent-strong: #e07028;
  --theme-name: "Wick Flat";
  --theme-desc: "True black, red-orange";
  color-scheme: dark;
}

[data-theme="pine"] {
  --gray-50:  236 242 236;
  --gray-100: 228 238 228;
  --gray-200: 180 200 184;
  --gray-300: 148 172 152;
  --gray-400: 122 148 128;
  --gray-500: 90 112 96;
  --gray-600: 48 64 52;
  --gray-700: 36 48 38;
  --gray-800: 24 32 24;
  --gray-900: 16 24 16;
  --gray-950: 10 18 12;

  --accent: 196 179 90;
  --accent-text: #d4c878;
  --accent-strong: #d4c878;
  --theme-name: "Pine";
  --theme-desc: "Forest floor, moss gold";
  color-scheme: dark;
}

[data-theme="wine"] {
  --gray-50:  248 232 236;
  --gray-100: 244 228 232;
  --gray-200: 210 170 182;
  --gray-300: 186 140 156;
  --gray-400: 176 128 144;
  --gray-500: 130 88 102;
  --gray-600: 72 36 48;
  --gray-700: 56 28 38;
  --gray-800: 40 16 24;
  --gray-900: 28 12 18;
  --gray-950: 20 8 12;

  --accent: 232 90 122;
  --accent-text: #f090a4;
  --accent-strong: #f090a4;
  --theme-name: "Wine";
  --theme-desc: "Burgundy night, rose";
  color-scheme: dark;
}

[data-theme="voltage"] {
  --gray-50:  248 248 244;
  --gray-100: 244 244 240;
  --gray-200: 196 196 188;
  --gray-300: 168 168 160;
  --gray-400: 138 138 128;
  --gray-500: 108 108 100;
  --gray-600: 58 58 54;
  --gray-700: 36 36 36;
  --gray-800: 20 20 20;
  --gray-900: 10 10 10;
  --gray-950: 0 0 0;

  --accent: 200 240 0;
  --accent-text: #d8ff40;
  --accent-strong: #d8ff40;
  --theme-name: "Voltage";
  --theme-desc: "True black, acid lime";
  color-scheme: dark;
}

[data-theme="solar"] {
  --gray-50:  42 32 24;
  --gray-100: 42 32 24;
  --gray-200: 80 64 48;
  --gray-300: 100 84 68;
  --gray-400: 122 106 88;
  --gray-500: 160 144 120;
  --gray-600: 198 182 158;
  --gray-700: 226 214 196;
  --gray-800: 232 220 200;
  --gray-900: 239 230 212;
  --gray-950: 246 240 228;

  --accent: 196 92 42;
  --accent-text: #a44820;
  --accent-strong: #c45c2a;
  --theme-name: "Solar";
  --theme-desc: "Cream paper, terracotta";
  color-scheme: light;
}

[data-theme="ink"] {
  --gray-50:  26 32 36;
  --gray-100: 26 32 36;
  --gray-200: 55 64 70;
  --gray-300: 70 82 90;
  --gray-400: 90 104 112;
  --gray-500: 140 152 160;
  --gray-600: 198 206 210;
  --gray-700: 214 222 226;
  --gray-800: 220 228 232;
  --gray-900: 228 234 238;
  --gray-950: 238 242 244;

  --accent: 180 35 24;
  --accent-text: #8f1c14;
  --accent-strong: #b42318;
  --theme-name: "Ink";
  --theme-desc: "Cool newsprint, crimson";
  color-scheme: light;
}


/* ================================================================
   TYPOGRAPHY
   ================================================================ */

body {
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-feature-settings: 'cv01' on, 'ss03' on, 'zero' on;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 480;
  letter-spacing: -0.009em;
  font-size: 14px;
  line-height: 1.5;
  color: rgb(var(--gray-100));
}

/* Light themes: default smoothing so glyphs stay full, not etched */
[data-theme="daylight"] body,
[data-theme="solar"] body,
[data-theme="ink"] body {
  -webkit-font-smoothing: auto;
  font-weight: 450;
}

h1, h2, h3, h4,
.text-2xl, .text-xl, .text-lg,
.font-bold, .font-semibold {
  font-weight: 560 !important;
  letter-spacing: -0.02em;
}

h1 {
  color: rgb(var(--gray-50));
}

.text-xs {
  font-size: 12px !important;
  letter-spacing: 0 !important;
  line-height: 1.4;
}

.text-sm {
  font-size: 13px !important;
  letter-spacing: -0.006em;
  line-height: 1.5;
}

.text-base {
  font-size: 14px !important;
  letter-spacing: -0.009em;
}

.text-lg {
  font-size: 16px !important;
  letter-spacing: -0.014em;
}

.text-xl {
  font-size: 18px !important;
  letter-spacing: -0.016em;
}

.text-2xl {
  font-size: 22px !important;
  letter-spacing: -0.02em;
}

.text-3xl {
  font-size: 28px !important;
  letter-spacing: -0.024em;
}

.uppercase {
  letter-spacing: 0.05em !important;
  font-weight: 550 !important;
  font-size: 11px !important;
}

code, pre, .font-mono {
  font-family: 'JetBrains Mono', 'Berkeley Mono', ui-monospace, monospace;
  font-feature-settings: normal;
  letter-spacing: 0;
}

/* Page titles are product chrome, not a per-page hue */
#feature-content h1 {
  color: rgb(var(--gray-50));
}


/* ================================================================
   DENSITY
   ================================================================ */

.p-8   { padding: 20px !important; }
.p-6   { padding: 16px !important; }
.p-5   { padding: 14px !important; }

.px-8  { padding-left: 20px !important; padding-right: 20px !important; }
.px-6  { padding-left: 16px !important; padding-right: 16px !important; }
.px-4  { padding-left: 12px !important; padding-right: 12px !important; }

.py-3  { padding-top: 8px !important;  padding-bottom: 8px !important; }
.py-2\.5 { padding-top: 7px !important; padding-bottom: 7px !important; }

.space-y-4 > * + * { margin-top: 12px !important; }
.space-y-3 > * + * { margin-top: 8px !important; }
.space-y-2 > * + * { margin-top: 6px !important; }

.mb-8  { margin-bottom: 20px !important; }
.mb-6  { margin-bottom: 16px !important; }
.mb-4  { margin-bottom: 12px !important; }
.mt-8  { margin-top: 20px !important; }

.gap-6 { gap: 16px !important; }
.gap-4 { gap: 12px !important; }
.gap-3 { gap: 8px !important; }

.max-w-6xl { max-width: 1100px !important; }
.max-w-4xl { max-width: 860px !important; }


/* ================================================================
   BORDERS & DEPTH
   ================================================================ */

.border,
.border-r, .border-b, .border-t, .border-l {
  border-width: 0.5px !important;
}

.border-gray-800 {
  border-color: rgb(var(--gray-700) / 0.55) !important;
}
.border-gray-700 {
  border-color: rgb(var(--gray-600) / 0.55) !important;
}

.rounded-lg  { border-radius: 6px !important; }
.rounded-xl  { border-radius: 8px !important; }
.rounded-2xl { border-radius: 10px !important; }

.shadow-xl, .shadow-2xl, .shadow-lg {
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.24), 0 0 0 0.5px rgb(var(--gray-700) / 0.4) !important;
}

.bg-gray-900 { box-shadow: none; }

[data-theme="daylight"] .border-gray-800,
[data-theme="solar"] .border-gray-800,
[data-theme="ink"] .border-gray-800 {
  border-color: rgb(var(--gray-600) / 0.7) !important;
}
[data-theme="daylight"] .border-gray-700,
[data-theme="solar"] .border-gray-700,
[data-theme="ink"] .border-gray-700 {
  border-color: rgb(var(--gray-500) / 0.45) !important;
}
[data-theme="daylight"] .shadow-xl,
[data-theme="daylight"] .shadow-2xl,
[data-theme="solar"] .shadow-xl,
[data-theme="solar"] .shadow-2xl,
[data-theme="ink"] .shadow-xl,
[data-theme="ink"] .shadow-2xl {
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.06), 0 0 0 0.5px rgb(var(--gray-600) / 0.35) !important;
}


/* ================================================================
   MOTION
   ================================================================ */

:root {
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
}

button, a, [role="button"], .nav-item,
input, textarea, select {
  transition: background-color 120ms var(--ease-out),
              color 120ms var(--ease-out),
              border-color 120ms var(--ease-out),
              box-shadow 120ms var(--ease-out),
              opacity 120ms var(--ease-out),
              transform 80ms var(--ease-out);
}

button:active, a:active, [role="button"]:active, .nav-item:active {
  transform: scale(0.97);
}

@keyframes glue-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
#feature-content > *:first-child {
  animation: glue-fade-in 100ms ease-out both;
}

html.theme-transitioning,
html.theme-transitioning *,
html.theme-transitioning *::before,
html.theme-transitioning *::after {
  transition: background-color 200ms var(--ease-out),
              border-color 200ms var(--ease-out),
              color 200ms var(--ease-out),
              box-shadow 200ms var(--ease-out) !important;
}

#app-sidebar {
  transition: width 220ms var(--ease-out) !important;
}
#workspace-frame {
  transition: margin-left 220ms var(--ease-out) !important;
}

.htmx-indicator { opacity: 0; transition: opacity 150ms ease-in; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }


/* ================================================================
   FOCUS, SELECTION, SCROLLBAR
   ================================================================ */

:focus-visible {
  outline: 1.5px solid rgb(var(--accent) / 0.65);
  outline-offset: 1px;
}

::selection {
  background: rgb(var(--accent) / 0.28);
  color: inherit;
}

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgb(var(--gray-500) / 0.45);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgb(var(--gray-400) / 0.65);
}
* {
  scrollbar-width: thin;
  scrollbar-color: rgb(var(--gray-500) / 0.45) transparent;
}


/* ================================================================
   ONE ACCENT — chrome, links, primary buttons
   Status colors (green / red / amber) stay semantic.
   ================================================================ */

.text-orange-500, .text-orange-400,
.text-blue-400, .text-blue-300, .text-blue-500,
.text-indigo-400, .text-indigo-300, .text-indigo-500,
.text-sky-400, .text-cyan-400 {
  color: var(--accent-text) !important;
}

.hover\:text-blue-300:hover,
.hover\:text-indigo-300:hover,
.hover\:text-cyan-300:hover,
.hover\:text-orange-300:hover {
  color: var(--accent-strong) !important;
}

.bg-orange-500, .bg-orange-600,
.bg-blue-600, .bg-blue-500, .bg-blue-700,
.bg-indigo-600, .bg-indigo-500, .bg-indigo-700 {
  background-color: rgb(var(--accent)) !important;
  color: #fff !important;
}

.hover\:bg-orange-600:hover,
.hover\:bg-blue-700:hover,
.hover\:bg-blue-600:hover,
.hover\:bg-blue-500:hover,
.hover\:bg-indigo-700:hover,
.hover\:bg-indigo-600:hover {
  background-color: rgb(var(--accent) / 0.85) !important;
}

.border-orange-500, .border-blue-500, .border-indigo-500,
.border-b-2.border-blue-500 {
  border-color: rgb(var(--accent)) !important;
}

.focus\:ring-orange-500:focus,
.focus\:ring-orange-500\/50:focus,
.focus\:ring-blue-500:focus,
.focus\:ring-indigo-500:focus {
  --tw-ring-color: rgb(var(--accent) / 0.4) !important;
}
.focus\:border-orange-500:focus,
.focus\:border-blue-500:focus {
  border-color: rgb(var(--accent)) !important;
}

.animate-spin.border-blue-500,
.animate-spin.border-orange-500 {
  border-color: rgb(var(--accent) / 0.25);
  border-top-color: rgb(var(--accent));
}

input:focus, textarea:focus, select:focus {
  box-shadow: 0 0 0 2px rgb(var(--accent) / 0.18);
}

/* Sidebar: current page gets an accent rail */
#app-sidebar a.nav-item.bg-gray-800\/60,
#app-sidebar a.nav-item.text-gray-100 {
  box-shadow: inset 2px 0 0 rgb(var(--accent));
  color: rgb(var(--gray-50)) !important;
}

#app-sidebar .nav-item:hover .w-4,
#app-sidebar .nav-item.text-gray-100 .w-4 {
  color: var(--accent-text);
}


/* ================================================================
   THEME PICKER
   ================================================================ */

.theme-swatch {
  width: 100%;
  height: 72px;
  border-radius: 8px;
  border: 1.5px solid rgb(var(--gray-700) / 0.6);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  padding: 0;
  text-align: left;
  transition: border-color 120ms var(--ease-out),
              transform 120ms var(--ease-out),
              box-shadow 120ms var(--ease-out);
}
.theme-swatch:hover {
  transform: translateY(-1px);
  border-color: rgb(var(--accent) / 0.5);
}
.theme-swatch.active {
  border-color: var(--accent-text);
  box-shadow: 0 0 0 3px rgb(var(--accent) / 0.22);
}
.theme-swatch-preview {
  display: flex;
  height: 44px;
  width: 100%;
}
.theme-swatch-rail {
  width: 18px;
  flex-shrink: 0;
}
.theme-swatch-canvas {
  flex: 1;
  position: relative;
}
.theme-swatch-line {
  position: absolute;
  left: 8px;
  height: 3px;
  border-radius: 2px;
  opacity: 0.85;
}
.theme-swatch-chip {
  position: absolute;
  right: 8px;
  bottom: 7px;
  width: 18px;
  height: 8px;
  border-radius: 2px;
}
.theme-swatch-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 6px 8px 0;
}
.theme-swatch-name {
  font-size: 12px;
  font-weight: 550;
  color: rgb(var(--gray-100));
  letter-spacing: -0.01em;
}
.theme-swatch-desc {
  font-size: 10.5px;
  color: rgb(var(--gray-400));
}

.theme-swatch-dot {
  width: 22px;
  height: 16px;
  border-radius: 4px;
  border: 1.5px solid transparent;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  transition: border-color 120ms var(--ease-out),
              box-shadow 120ms var(--ease-out);
}
.theme-swatch-dot.active {
  border-color: var(--accent-text);
  box-shadow: 0 0 0 2px rgb(var(--accent) / 0.25);
}
.theme-swatch-dot-accent {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 5px;
}