/* ═══════════════════════════════════════════════════════════════════════
   Prekio design settings, shared with the CRM (its static/css/theme.css).
   The token names and values are the CRM's on purpose: one look, two apps.

   Light is :root, dark is html[data-theme='dark'] further down. Only the
   customer portal and the admin set that attribute (static/js/theme.js);
   the public site is always light.

   New code reads a token (var(--sk-text)), never a hex. The dark block also
   remaps the Tailwind utilities the existing templates use (bg-white,
   text-ink/60, bg-red-50...) so they follow the theme without an edit.
   ═══════════════════════════════════════════════════════════════════════ */
:root {
    --brand-rgb: 0 95 184;
    /* The Prekio logo (_components/logo.html): blue P, mist layer, navy word */
    --logo-back: #005fb8;
    --logo-front: #dcebfa;
    --logo-word: #1d2b3f;
    --brand-primary: rgb(var(--brand-rgb));
    --brand-primary-hover: #004a9f;
    --brand-primary-active: #003f85;
    --brand-secondary: #0EA5E9;

    --sk-surface: #ffffff;
    --sk-surface-2: #f9fafb;
    --sk-border: #e3e6eb;
    --sk-field-border: #d5d9e0;
    --sk-hairline: #eef0f3;
    --sk-text: #111827;
    --sk-label: #374151;
    --sk-muted: #6b7280;
    --sk-hover: #f3f4f6;
    --sk-tint: #e6f0fa;
    --sk-tint-ink: #004c94;
    --sk-link: var(--brand-primary);
    --sk-focus: rgba(0, 95, 184, 0.15);
    --sk-error-ink: #b91c1c;
    --sk-error-border: #fecaca;
    --sk-error-tint: #fef2f2;
    --sk-warn-tint: #fff4e0;
    --sk-warn-ink: #9a5b00;
    --sk-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
    --sk-shadow-pop: 0 8px 24px -8px rgba(16, 24, 40, 0.18);

    --sk-btn-h: 36px;
    --sk-btn-h-sm: 32px;
    --sk-btn-h-xs: 26px;
    --sk-btn-h-lg: 40px;
    --sk-field-h: 38px;
    --sk-radius-lg: 12px;
    --sk-radius-md: 10px;
    --sk-radius: 8px;
    --sk-radius-pill: 999px;

    /* Tailwind's palette as variables (tailwind/theme.json reads these), so
       every utility, its opacity variants and hover states follow the theme.
       Light values are Tailwind's own; the brand scale is ours. */
    --c-slate-50: 248 250 252;
    --c-slate-100: 241 245 249;
    --c-slate-200: 226 232 240;
    --c-slate-300: 203 213 225;
    --c-slate-400: 148 163 184;
    --c-slate-500: 100 116 139;
    --c-slate-600: 71 85 105;
    --c-slate-700: 51 65 85;
    --c-slate-800: 30 41 59;
    --c-slate-900: 15 23 42;
    --c-red-50: 254 242 242;
    --c-red-100: 254 226 226;
    --c-red-200: 254 202 202;
    --c-red-300: 252 165 165;
    --c-red-400: 248 113 113;
    --c-red-500: 239 68 68;
    --c-red-600: 220 38 38;
    --c-red-700: 185 28 28;
    --c-red-800: 153 27 27;
    --c-red-900: 127 29 29;
    --c-amber-50: 255 251 235;
    --c-amber-100: 254 243 199;
    --c-amber-200: 253 230 138;
    --c-amber-300: 252 211 77;
    --c-amber-400: 251 191 36;
    --c-amber-500: 245 158 11;
    --c-amber-600: 217 119 6;
    --c-amber-700: 180 83 9;
    --c-amber-800: 146 64 14;
    --c-amber-900: 120 53 15;
    --c-emerald-50: 236 253 245;
    --c-emerald-100: 209 250 229;
    --c-emerald-200: 167 243 208;
    --c-emerald-300: 110 231 183;
    --c-emerald-400: 52 211 153;
    --c-emerald-500: 16 185 129;
    --c-emerald-600: 5 150 105;
    --c-emerald-700: 4 120 87;
    --c-emerald-800: 6 95 70;
    --c-emerald-900: 6 78 59;
    --c-sky-50: 240 249 255;
    --c-sky-100: 224 242 254;
    --c-sky-200: 186 230 253;
    --c-sky-300: 125 211 252;
    --c-sky-400: 56 189 248;
    --c-sky-500: 14 165 233;
    --c-sky-600: 2 132 199;
    --c-sky-700: 3 105 161;
    --c-sky-800: 7 89 133;
    --c-sky-900: 12 74 110;
    --c-orange-50: 255 247 237;
    --c-orange-100: 255 237 213;
    --c-orange-200: 254 215 170;
    --c-orange-300: 253 186 116;
    --c-orange-400: 251 146 60;
    --c-orange-500: 249 115 22;
    --c-orange-600: 234 88 12;
    --c-orange-700: 194 65 12;
    --c-orange-800: 154 52 18;
    --c-orange-900: 124 45 18;
    --c-violet-50: 245 243 255;
    --c-violet-100: 237 233 254;
    --c-violet-200: 221 214 254;
    --c-violet-300: 196 181 253;
    --c-violet-400: 167 139 250;
    --c-violet-500: 139 92 246;
    --c-violet-600: 124 58 237;
    --c-violet-700: 109 40 217;
    --c-violet-800: 91 33 182;
    --c-violet-900: 76 29 149;
    --c-brand-50: 238 246 255;
    --c-brand-100: 217 234 255;
    --c-brand-200: 188 220 255;
    --c-brand-300: 142 198 255;
    --c-brand-400: 89 166 255;
    --c-brand-500: 51 133 247;
    --c-brand-600: 0 95 184;
    --c-brand-700: 0 74 159;
    --c-brand-800: 0 63 133;
    --c-brand-900: 6 48 107;
    --c-ink: 11 27 51;
    --c-white-grad: 255 255 255;   /* the white end of a gradient (from-white, to-white) */
    --c-rose-50: 255 241 242;
    --c-rose-100: 255 228 230;
    --c-rose-200: 254 205 211;
    --c-rose-300: 253 164 175;
    --c-rose-400: 251 113 133;
    --c-rose-500: 244 63 94;
    --c-rose-600: 225 29 72;
    --c-rose-700: 190 18 60;
    --c-rose-800: 159 18 57;
    --c-rose-900: 136 19 55;
    --bg-brand-700: 0 74 159;   /* a brand button's hover fill */
}

html[data-theme='dark'] {
    color-scheme: dark;
    --logo-back: #2b7ce6;
    --logo-front: #1f3a5e;
    --logo-word: #e6edf6;
    scrollbar-color: var(--sk-field-border) transparent;   /* quiet scrollbars on charcoal */
    --brand-rgb: 43 124 230;
    --brand-primary-hover: #2368c4;
    --brand-primary-active: #1d59a8;

    --sk-surface: #181b20;
    --sk-surface-2: #22252b;
    --sk-border: #30343b;
    --sk-field-border: hsl(220 14% 87% / 0.2);
    --sk-hairline: hsl(220 10% 21% / 0.7);
    --sk-text: #d9dce2;
    --sk-label: hsl(220 14% 87% / 0.8);
    --sk-muted: hsl(220 14% 87% / 0.6);
    --sk-hover: #22252b;
    --sk-tint: hsl(214 79% 56% / 0.16);
    --sk-tint-ink: hsl(214 90% 78%);
    --sk-link: hsl(214 90% 70%);
    --sk-focus: hsl(214 79% 56% / 0.3);
    --sk-error-ink: #f87171;
    --sk-error-border: rgba(248, 113, 113, 0.4);
    --sk-error-tint: rgba(248, 113, 113, 0.12);
    --sk-warn-tint: rgba(251, 191, 36, 0.15);
    --sk-warn-ink: #fbbf24;
    --sk-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    --sk-shadow-pop: 0 8px 24px -8px rgba(0, 0, 0, 0.6);

    /* Dark palette: neutrals are the CRM's charcoal, status colours become
       soft tints (50-300) with light ink (600-900), as in the CRM. */
    --c-slate-50: 29 32 37;
    --c-slate-100: 34 37 43;
    --c-slate-200: 48 52 59;
    --c-slate-300: 62 67 76;
    --c-slate-400: 123 130 144;
    --c-slate-500: 152 160 173;
    --c-slate-600: 179 186 197;
    --c-slate-700: 197 203 213;
    --c-slate-800: 217 220 226;
    --c-slate-900: 232 234 238;
    --c-red-50: 51 37 42;
    --c-red-100: 64 42 46;
    --c-red-200: 114 61 65;
    --c-red-300: 149 74 77;
    --c-red-400: 248 113 113;
    --c-red-500: 239 68 68;
    --c-red-600: 248 113 113;
    --c-red-700: 248 113 113;
    --c-red-800: 252 165 165;
    --c-red-900: 254 202 202;
    --c-amber-50: 51 46 32;
    --c-amber-100: 65 56 32;
    --c-amber-200: 115 93 34;
    --c-amber-300: 181 133 35;
    --c-amber-400: 251 191 36;
    --c-amber-500: 245 158 11;
    --c-amber-600: 251 191 36;
    --c-amber-700: 251 191 36;
    --c-amber-800: 252 211 77;
    --c-amber-900: 253 230 138;
    --c-emerald-50: 27 49 47;
    --c-emerald-100: 29 60 53;
    --c-emerald-200: 35 101 80;
    --c-emerald-300: 50 140 105;
    --c-emerald-400: 52 211 153;
    --c-emerald-500: 16 185 129;
    --c-emerald-600: 52 211 153;
    --c-emerald-700: 52 211 153;
    --c-emerald-800: 110 231 183;
    --c-emerald-900: 167 243 208;
    --c-sky-50: 28 46 58;
    --c-sky-100: 30 56 71;
    --c-sky-200: 37 92 118;
    --c-sky-300: 44 124 163;
    --c-sky-400: 56 189 248;
    --c-sky-500: 14 165 233;
    --c-sky-600: 56 189 248;
    --c-sky-700: 125 211 252;
    --c-sky-800: 186 230 253;
    --c-sky-900: 224 242 254;
    --c-orange-50: 51 41 35;
    --c-orange-100: 65 49 37;
    --c-orange-200: 115 74 43;
    --c-orange-300: 150 95 45;
    --c-orange-400: 251 146 60;
    --c-orange-500: 249 115 22;
    --c-orange-600: 251 146 60;
    --c-orange-700: 253 186 116;
    --c-orange-800: 254 215 170;
    --c-orange-900: 255 237 213;
    --c-violet-50: 41 40 58;
    --c-violet-100: 50 46 71;
    --c-violet-200: 81 73 119;
    --c-violet-300: 117 105 163;
    --c-violet-400: 167 139 250;
    --c-violet-500: 139 92 246;
    --c-violet-600: 167 139 250;
    --c-violet-700: 196 181 253;
    --c-violet-800: 221 214 254;
    --c-violet-900: 237 233 254;
    --c-brand-50: 29 44 64;
    --c-brand-100: 33 56 90;
    --c-brand-200: 40 72 118;
    --c-brand-300: 60 100 165;
    --c-brand-400: 80 145 240;
    --c-brand-500: 51 133 247;
    --c-brand-600: 43 124 230;
    --c-brand-700: 142 192 250;
    --c-brand-800: 173 210 252;
    --c-brand-900: 205 227 254;
    --c-ink: 217 220 226;
    --c-white-grad: 24 27 32;
    --c-rose-50: 51 37 44;
    --c-rose-100: 65 42 50;
    --c-rose-200: 115 62 73;
    --c-rose-300: 150 75 88;
    --c-rose-400: 251 113 133;
    --c-rose-500: 244 63 94;
    --c-rose-600: 251 113 133;
    --c-rose-700: 251 113 133;
    --c-rose-800: 253 164 175;
    --c-rose-900: 254 205 211;
    --bg-brand-700: 35 104 196;
}


/* ── Dark: what the palette cannot express ─────────────────────────────── */
html[data-theme='dark'],
html[data-theme='dark'] body { background: var(--sk-surface); color: var(--sk-text); }
/* plain white surfaces; translucent whites (glass on dark bands) stay as drawn */
html[data-theme='dark'] .bg-white { background-color: var(--sk-surface); }
html[data-theme='dark'] .glass { background: hsl(220 13% 11% / 0.82); }
html[data-theme='dark'] .bg-white\/70,
html[data-theme='dark'] .bg-white\/80,
html[data-theme='dark'] .bg-white\/85,
html[data-theme='dark'] .bg-white\/95 { background-color: rgb(24 27 32 / 0.85); }
/* a white button on a brand-blue band stays white */
html[data-theme='dark'] .keep-light { background-color: #ffffff; color: #004a9f; }
html[data-theme='dark'] .keep-light:hover { background-color: #eef6ff; }
html[data-theme='dark'] .skeleton { background: var(--sk-border); }
html[data-theme='dark'] .shadow-card { box-shadow: var(--sk-shadow-pop); }
/* bg-ink is a dark band or a log box in both themes; as a button it is the brand */
html[data-theme='dark'] button.bg-ink { background-color: var(--brand-primary); }
html[data-theme='dark'] button.hover\:bg-ink\/85:hover { background-color: var(--brand-primary-hover); }
html[data-theme='dark'] [class*='bg-ink/'] { background-color: rgb(0 0 0 / 0.6); }
html[data-theme='dark'] dialog::backdrop { background: rgb(0 0 0 / 0.6); }
/* brand text on charcoal: the light-blue link colour */
html[data-theme='dark'] .text-brand-600,
html[data-theme='dark'] .hover\:text-brand-600:hover { color: var(--sk-link); }
/* fields */
html[data-theme='dark'] input:not([type='checkbox']):not([type='radio']),
html[data-theme='dark'] select,
html[data-theme='dark'] textarea { background-color: var(--sk-surface); color: var(--sk-text); }
html[data-theme='dark'] .focus\:bg-white:focus { background-color: var(--sk-surface); }
html[data-theme='dark'] ::placeholder { color: var(--sk-muted); }

/* marketing pages: the hero wash, the grid, the gradient word */
html[data-theme='dark'] .hero-bg {
    background:
        radial-gradient(1100px 520px at 78% -8%, rgba(14,165,233,.14), transparent 60%),
        radial-gradient(900px 520px at 8% 8%, rgba(43,124,230,.16), transparent 55%),
        linear-gradient(180deg, #181b20 0%, #14171b 100%);
}
html[data-theme='dark'] .grid-bg {
    background-image:
        linear-gradient(to right, rgba(217,220,226,.06) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(217,220,226,.06) 1px, transparent 1px);
}
html[data-theme='dark'] .gradient-text { background-image: linear-gradient(95deg, #5aa4f5 0%, #38bdf8 60%, #7dd3fc 100%); }
html[data-theme='dark'] :focus-visible { outline-color: #5aa4f5; }

/* the toggle button (portal menu, admin header) */
.theme-toggle [data-icon-dark] { display: none; }
html[data-theme='dark'] .theme-toggle [data-icon-light] { display: none; }
html[data-theme='dark'] .theme-toggle [data-icon-dark] { display: inline; }