/*
 * Optional color theme overrides for the Una theme.
 *
 * Each palette re-themes the sky-* accent and the full neutral gray
 * scale used for backgrounds, borders, text, and prose.
 *
 * Colors are stored as space-separated RGB triplets so they can be
 * used with or without an alpha channel: rgb(var(--n-0));
 *                                        rgb(var(--n-0) / 0.9);
 */

/* ── Default (original sky + gray) ─────────────────────────── */

body.theme-default {
  --n-0: 255 255 255;
  --n-50: 249 250 251;
  --n-100: 243 244 246;
  --n-200: 229 231 235;
  --n-300: 209 213 219;
  --n-400: 156 163 175;
  --n-500: 107 114 128;
  --n-600: 75 85 99;
  --n-700: 55 65 81;
  --n-800: 31 41 55;
  --n-900: 17 24 39;

  --primary-200: 186 230 253;
  --primary-300: 125 211 252;
  --primary-400: 56 189 248;
  --primary-500: 14 165 233;
  --primary-600: 2 132 199;
  --primary-700: 3 105 161;
}

/* ── Desert (warm sand and clay) ────────────────────────────── */

body.theme-desert {
  --n-0: 250 245 235;
  --n-50: 243 237 226;
  --n-100: 232 224 209;
  --n-200: 211 200 180;
  --n-300: 181 165 138;
  --n-400: 145 127 102;
  --n-500: 114 98 77;
  --n-600: 91 78 61;
  --n-700: 74 63 50;
  --n-800: 61 52 42;
  --n-900: 52 44 36;

  --primary-200: 230 205 170;
  --primary-300: 210 170 120;
  --primary-400: 190 135 85;
  --primary-500: 150 95 55;
  --primary-600: 100 58 32;
  --primary-700: 80 45 25;
}

/* ── Sage & Stone (muted earth tones) ──────────────────────── */

body.theme-sage {
  --n-0: 251 252 250;
  --n-50: 243 246 241;
  --n-100: 230 235 226;
  --n-200: 210 219 202;
  --n-300: 181 194 171;
  --n-400: 147 159 138;
  --n-500: 116 127 107;
  --n-600: 92 102 83;
  --n-700: 75 83 68;
  --n-800: 62 69 57;
  --n-900: 52 59 47;

  --primary-200: 219 232 208;
  --primary-300: 185 209 168;
  --primary-400: 140 168 118;
  --primary-500: 111 143 85;
  --primary-600: 94 122 78;
  --primary-700: 63 86 52;
}

/* ── Cobalt Ink (deep, calm blue) ──────────────────────────── */

body.theme-cobalt {
  --n-0: 248 250 252;
  --n-50: 241 245 249;
  --n-100: 226 232 240;
  --n-200: 203 213 225;
  --n-300: 174 188 207;
  --n-400: 138 155 179;
  --n-500: 107 127 153;
  --n-600: 85 102 122;
  --n-700: 69 82 99;
  --n-800: 58 69 84;
  --n-900: 48 57 71;

  --primary-200: 199 216 240;
  --primary-300: 147 188 229;
  --primary-400: 91 155 227;
  --primary-500: 44 111 201;
  --primary-600: 30 77 140;
  --primary-700: 22 58 107;
}

/* ── Terracotta (warm clay and cream) ──────────────────────── */

body.theme-terracotta {
  --n-0: 252 251 249;
  --n-50: 247 244 241;
  --n-100: 239 233 227;
  --n-200: 226 213 203;
  --n-300: 209 185 171;
  --n-400: 182 151 135;
  --n-500: 149 117 104;
  --n-600: 119 93 83;
  --n-700: 97 76 69;
  --n-800: 81 64 58;
  --n-900: 69 55 48;

  --primary-200: 240 214 201;
  --primary-300: 224 173 149;
  --primary-400: 217 139 108;
  --primary-500: 184 94 59;
  --primary-600: 156 75 44;
  --primary-700: 122 58 34;
}

/* ── Berry (soft blush with a bold accent) ─────────────────── */

body.theme-berry {
  --n-0: 252 251 251;
  --n-50: 248 245 247;
  --n-100: 240 234 237;
  --n-200: 228 219 224;
  --n-300: 212 199 206;
  --n-400: 182 165 175;
  --n-500: 150 132 142;
  --n-600: 120 104 113;
  --n-700: 97 84 91;
  --n-800: 81 70 75;
  --n-900: 68 59 63;

  --primary-200: 237 210 224;
  --primary-300: 219 171 212;
  --primary-400: 200 134 184;
  --primary-500: 181 96 157;
  --primary-600: 162 57 130;
  --primary-700: 122 31 76;
}

/* ── Stone (warm, stony earth) ─────────────────────────────── */

body.theme-stone {
  --n-0: 250 248 245;
  --n-50: 243 240 236;
  --n-100: 233 228 222;
  --n-200: 214 207 197;
  --n-300: 183 174 161;
  --n-400: 150 139 126;
  --n-500: 120 109 97;
  --n-600: 95 85 75;
  --n-700: 76 67 59;
  --n-800: 63 55 48;
  --n-900: 53 47 41;

  --primary-200: 230 219 201;
  --primary-300: 206 188 158;
  --primary-400: 176 149 107;
  --primary-500: 147 115 72;
  --primary-600: 120 90 50;
  --primary-700: 95 70 37;
}

/* ── Moss (deep, earthy green) ─────────────────────────────── */

body.theme-moss {
  --n-0: 247 246 241;
  --n-50: 239 236 229;
  --n-100: 226 221 210;
  --n-200: 205 198 184;
  --n-300: 174 164 146;
  --n-400: 139 127 108;
  --n-500: 109 98 82;
  --n-600: 85 76 63;
  --n-700: 69 61 51;
  --n-800: 57 50 42;
  --n-900: 48 42 35;

  --primary-200: 214 222 190;
  --primary-300: 183 196 145;
  --primary-400: 147 165 99;
  --primary-500: 113 134 70;
  --primary-600: 84 103 44;
  --primary-700: 64 78 33;
}

/* ── Shared theme overrides ────────────────────────────────── */

body[class*="theme-"] { background-color: rgb(var(--n-0)); }

/* Page base and backgrounds */
body[class*="theme-"] .bg-white { background-color: rgb(var(--n-0)); }
body[class*="theme-"] .bg-white\/90 { background-color: rgb(var(--n-0) / 0.9); }
body[class*="theme-"] .bg-gray-50 { background-color: rgb(var(--n-50)); }
body[class*="theme-"] .bg-gray-100 { background-color: rgb(var(--n-100)); }

/* Gradient backgrounds */
body[class*="theme-"] .from-gray-50 {
  --tw-gradient-from: rgb(var(--n-50)) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--n-50) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
body[class*="theme-"] .via-gray-50 {
  --tw-gradient-to: rgb(var(--n-50) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(var(--n-50)) var(--tw-gradient-via-position), var(--tw-gradient-to);
}

/* Hover backgrounds */
body[class*="theme-"] .hover\:bg-gray-50:hover { background-color: rgb(var(--n-50)); }
body[class*="theme-"] .hover\:bg-gray-100:hover { background-color: rgb(var(--n-100)); }

/* Borders */
body[class*="theme-"] .border-gray-50 { border-color: rgb(var(--n-50)); }
body[class*="theme-"] .border-gray-100 { border-color: rgb(var(--n-100)); }
body[class*="theme-"] .border-gray-200 { border-color: rgb(var(--n-200)); }
body[class*="theme-"] .border-gray-300 { border-color: rgb(var(--n-300)); }

/* Text colors */
body[class*="theme-"] .text-gray-400,
body[class*="theme-"] .placeholder-gray-400::placeholder,
body[class*="theme-"] .placeholder-gray-400::-moz-placeholder,
body[class*="theme-"] .\[\&_small\]\:text-gray-400 small { color: rgb(var(--n-400)); }
body[class*="theme-"] .text-gray-500 { color: rgb(var(--n-500)); }
body[class*="theme-"] .text-gray-600 { color: rgb(var(--n-600)); }
body[class*="theme-"] .text-gray-700 { color: rgb(var(--n-700)); }
body[class*="theme-"] .text-gray-900 { color: rgb(var(--n-900)); }

/* Hover text */
body[class*="theme-"] .hover\:text-gray-400:hover { color: rgb(var(--n-400)); }
body[class*="theme-"] .hover\:text-gray-500:hover { color: rgb(var(--n-500)); }
body[class*="theme-"] .hover\:text-gray-700:hover { color: rgb(var(--n-700)); }
body[class*="theme-"] .hover\:text-gray-900:hover { color: rgb(var(--n-900)); }
body[class*="theme-"] .group:hover .group-hover\:text-gray-600 { color: rgb(var(--n-600)); }

/* Primary / sky palette */
body[class*="theme-"] .border-sky-200 { border-color: rgb(var(--primary-200)); }
body[class*="theme-"] .bg-sky-600 { background-color: rgb(var(--primary-600)); }
body[class*="theme-"] .text-sky-600,
body[class*="theme-"] .\[\&_a\]\:text-sky-600 a,
body[class*="theme-"] .prose a { color: rgb(var(--primary-600)); }

body[class*="theme-"] .hover\:border-sky-300:hover { border-color: rgb(var(--primary-300)); }
body[class*="theme-"] .hover\:bg-sky-700:hover { background-color: rgb(var(--primary-700)); }
body[class*="theme-"] .hover\:text-sky-400:hover { color: rgb(var(--primary-400)); }
body[class*="theme-"] .hover\:text-sky-600:hover { color: rgb(var(--primary-600)); }

body[class*="theme-"] .focus\:border-sky-500:focus { border-color: rgb(var(--primary-500)); }
body[class*="theme-"] .focus\:ring-sky-500:focus { --tw-ring-color: rgb(var(--primary-500)); }

body[class*="theme-"] .group:hover .group-hover\:text-sky-400 { color: rgb(var(--primary-400)); }
body[class*="theme-"] .prose a:hover { color: rgb(var(--primary-400)); }
body[class*="theme-"] .\[\&_a\]\:hover\:text-sky-400:hover a { color: rgb(var(--primary-400)); }

/* Prose theme variables */
body[class*="theme-"] .prose {
  --tw-prose-body: rgb(var(--n-700));
  --tw-prose-headings: rgb(var(--n-900));
  --tw-prose-lead: rgb(var(--n-600));
  --tw-prose-links: rgb(var(--primary-600));
  --tw-prose-bold: rgb(var(--n-900));
  --tw-prose-counters: rgb(var(--n-500));
  --tw-prose-bullets: rgb(var(--n-300));
  --tw-prose-hr: rgb(var(--n-200));
  --tw-prose-quotes: rgb(var(--n-900));
  --tw-prose-quote-borders: rgb(var(--n-200));
  --tw-prose-captions: rgb(var(--n-500));
  --tw-prose-kbd: rgb(var(--n-900));
  --tw-prose-kbd-shadows: rgb(var(--n-900) / 10%);
  --tw-prose-code: rgb(var(--n-900));
  --tw-prose-pre-code: rgb(var(--n-200));
  --tw-prose-pre-bg: rgb(var(--n-800));
  --tw-prose-th-borders: rgb(var(--n-300));
  --tw-prose-td-borders: rgb(var(--n-200));
}

/* ── Sidebar docs menu (selected tab) ──────────────────────── */

body[class*="theme-"] .docs-menu li a {
  color: rgb(var(--n-500));
}

body[class*="theme-"] .docs-menu li a:hover {
  background-color: rgb(var(--n-100));
  color: rgb(var(--n-900));
}

body[class*="theme-"] .docs-menu li.current-menu-item > a {
  background-color: rgb(var(--n-0));
  color: rgb(var(--primary-600));
}