/* ==========================================================================
   THEME SYSTEM — Interior On Call
   This file is the exact prototype of the /theme.css route that Laravel will
   generate from the `themes` + `site_settings` tables.

   Colours are stored as RGB TRIPLETS (e.g. "11 31 58") so that Tailwind-style
   alpha modifiers work:  bg-primary/20  ->  rgb(var(--c-primary) / 0.2)

   HOW IT WORKS
   1. :root            -> active theme, LIGHT mode
   2. .dark            -> active theme, DARK mode
   3. [data-module=..] -> per-module override (Interior / Jehez)
   4. combos           -> cascade handles all 4 module x mode combinations
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. LIGHT MODE — DEFAULT (Premium Navy + Gold)
   -------------------------------------------------------------------------- */
:root {
  color-scheme: light;

  --c-primary: 11 31 58;          /* #0B1F3A  deep navy   */
  --c-primary-soft: 236 240 246;  /* 12% tint              */
  --c-primary-deep: 8 22 41;      /* hover / deep          */
  --c-primary-ink: 255 255 255;   /* text on primary       */

  --c-accent: 200 162 74;         /* #C8A24A  gold        */
  --c-accent-soft: 246 240 226;   /* 14% tint              */
  --c-accent-deep: 154 123 46;    /* hover                 */
  --c-accent-ink: 26 20 4;        /* text on gold          */

  --c-bg: 250 248 244;            /* #FAF8F4  cream       */
  --c-surface: 255 255 255;       /* #FFFFFF  white        */
  --c-surface-alt: 245 243 238;   /* subtle alt surface    */
  --c-ink: 26 26 26;              /* #1A1A1A               */
  --c-ink-invert: 255 255 255;
  --c-muted: 107 114 128;         /* #6B7280               */
  --c-line: 232 228 220;          /* #E8E4DC               */
  --c-line-strong: 205 199 188;

  --c-success: 46 125 87;
  --c-success-soft: 232 245 238;
  --c-error: 179 38 30;
  --c-error-soft: 253 236 234;
  --c-info: 37 99 235;
  --c-star: 201 162 74;

  /* non-colour tokens (from theme config) */
  --font-heading: "Playfair Display", "Georgia", "Times New Roman", serif;
  --font-body: "Inter", "Segoe UI", -apple-system, "Helvetica Neue", sans-serif;
  --font-scale: 1;
  --radius: 4px;
  --radius-lg: 6px;
  --radius-pill: 999px;
  --btn-style: solid; /* solid | outline | gradient */
  --container: 1280px;

  --shadow-sm: 0 1px 2px rgba(11, 31, 58, 0.05);
  --shadow: 0 4px 24px rgba(11, 31, 58, 0.06);
  --shadow-md: 0 10px 40px rgba(11, 31, 58, 0.09);
  --shadow-lg: 0 24px 64px rgba(11, 31, 58, 0.14);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 0.28s;
}

/* --------------------------------------------------------------------------
   2. DARK MODE
   -------------------------------------------------------------------------- */
.dark {
  color-scheme: dark;

  --c-primary: 226 236 249;      /* inverted to stay legible on dark */
  --c-primary-soft: 26 39 62;
  --c-primary-deep: 245 249 255;
  --c-primary-ink: 11 20 35;

  --c-accent: 227 199 123;        /* #E3C77B */
  --c-accent-soft: 46 40 22;
  --c-accent-deep: 240 219 160;
  --c-accent-ink: 26 20 4;

  --c-bg: 9 13 24;                /* #090D18 */
  --c-surface: 17 23 38;
  --c-surface-alt: 24 31 48;
  --c-ink: 240 242 247;
  --c-ink-invert: 9 13 24;
  --c-muted: 156 163 175;
  --c-line: 37 45 65;
  --c-line-strong: 56 66 90;

  --c-success: 74 168 118;
  --c-success-soft: 17 38 28;
  --c-error: 240 120 110;
  --c-error-soft: 45 22 20;
  --c-info: 120 160 255;
  --c-star: 227 199 123;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 10px 40px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.6);
}

/* --------------------------------------------------------------------------
   3. THEME PRESETS  (applied via [data-theme="slug"] on <html>)
   Each preset is what the client picks in Admin > Theme Studio.
   -------------------------------------------------------------------------- */

/* --- Festive Maroon + Gold --- */
[data-theme="festive-maroon"] {
  --c-primary: 90 12 28;          /* #5A0C1C */
  --c-primary-soft: 249 236 239;
  --c-primary-deep: 64 8 20;
  --c-primary-ink: 255 255 255;
  --c-accent: 212 169 74;         /* #D4A94A */
  --c-accent-soft: 249 242 227;
  --c-accent-deep: 165 130 55;
  --c-accent-ink: 32 24 4;
}
[data-theme="festive-maroon"].dark {
  --c-primary: 255 214 224;
  --c-primary-soft: 56 20 30;
  --c-primary-deep: 255 232 238;
  --c-primary-ink: 48 8 18;
  --c-accent: 236 203 130;
  --c-accent-soft: 58 46 20;
  --c-accent-deep: 247 224 172;
}

/* --- Modern Charcoal + Beige --- */
[data-theme="modern-charcoal"] {
  --c-primary: 43 43 43;          /* #2B2B2B */
  --c-primary-soft: 240 240 239;
  --c-primary-deep: 25 25 25;
  --c-primary-ink: 255 255 255;
  --c-accent: 176 141 87;         /* #B08D57 */
  --c-accent-soft: 246 242 236;
  --c-accent-deep: 133 106 64;
  --c-accent-ink: 26 22 16;
  --c-bg: 250 249 246;
  --c-line: 231 228 222;
}
[data-theme="modern-charcoal"].dark {
  --c-primary: 240 240 238;
  --c-primary-soft: 40 40 40;
  --c-primary-deep: 250 250 249;
  --c-primary-ink: 25 25 25;
  --c-accent: 200 170 122;
  --c-accent-soft: 48 40 28;
  --c-accent-deep: 222 200 165;
}

/* --- Bold Coral + Teal --- */
[data-theme="bold-coral"] {
  --c-primary: 232 93 74;         /* #E85D4A */
  --c-primary-soft: 254 238 235;
  --c-primary-deep: 199 70 53;
  --c-primary-ink: 255 255 255;
  --c-accent: 18 133 127;         /* #12857F */
  --c-accent-soft: 229 246 245;
  --c-accent-deep: 10 104 99;
  --c-accent-ink: 255 255 255;
  --c-bg: 253 250 249;
  --c-line: 240 231 228;
}
[data-theme="bold-coral"].dark {
  --c-primary: 255 158 143;
  --c-primary-soft: 62 27 21;
  --c-primary-deep: 255 200 192;
  --c-primary-ink: 70 16 9;
  --c-accent: 90 208 201;
  --c-accent-soft: 8 48 46;
  --c-accent-deep: 150 228 223;
  --c-accent-ink: 2 30 29;
}

/* --- Royal Purple + Silver --- */
[data-theme="royal-purple"] {
  --c-primary: 59 42 90;          /* #3B2A5A */
  --c-primary-soft: 241 238 248;
  --c-primary-deep: 42 29 66;
  --c-primary-ink: 255 255 255;
  --c-accent: 160 160 172;        /* silver */
  --c-accent-soft: 245 245 248;
  --c-accent-deep: 118 118 132;
  --c-accent-ink: 24 24 30;
  --c-bg: 250 249 252;
  --c-line: 233 231 238;
}
[data-theme="royal-purple"].dark {
  --c-primary: 219 210 240;
  --c-primary-soft: 34 26 52;
  --c-primary-deep: 235 229 248;
  --c-primary-ink: 26 18 44;
  --c-accent: 200 200 212;
  --c-accent-soft: 38 38 48;
  --c-accent-deep: 226 226 236;
}

/* --- Emerald + Gold --- */
[data-theme="emerald-gold"] {
  --c-primary: 15 76 58;          /* #0F4C3A */
  --c-primary-soft: 231 243 239;
  --c-primary-deep: 9 55 42;
  --c-primary-ink: 255 255 255;
  --c-accent: 200 162 74;
  --c-accent-soft: 246 240 226;
  --c-accent-deep: 154 123 46;
  --c-accent-ink: 26 20 4;
  --c-bg: 249 250 248;
  --c-line: 228 233 229;
}
[data-theme="emerald-gold"].dark {
  --c-primary: 190 240 220;
  --c-primary-soft: 12 40 31;
  --c-primary-deep: 214 250 236;
  --c-primary-ink: 4 28 21;
  --c-accent: 227 199 123;
  --c-accent-soft: 46 40 22;
  --c-accent-deep: 240 219 160;
}

/* --- Blush Rose + Champagne --- */
[data-theme="blush-rose"] {
  --c-primary: 140 74 94;         /* #8C4A5E */
  --c-primary-soft: 250 240 244;
  --c-primary-deep: 105 54 71;
  --c-primary-ink: 255 255 255;
  --c-accent: 232 201 160;        /* #E8C9A0 */
  --c-accent-soft: 253 248 241;
  --c-accent-deep: 190 158 116;
  --c-accent-ink: 40 30 16;
  --c-bg: 253 249 250;
  --c-line: 240 231 234;
}
[data-theme="blush-rose"].dark {
  --c-primary: 250 205 220;
  --c-primary-soft: 60 30 41;
  --c-primary-deep: 255 227 237;
  --c-primary-ink: 50 16 27;
  --c-accent: 245 224 195;
  --c-accent-soft: 55 45 32;
  --c-accent-deep: 252 240 224;
}

/* --- Pure Mono --- */
[data-theme="pure-mono"] {
  --c-primary: 17 17 17;          /* #111111 */
  --c-primary-soft: 240 240 240;
  --c-primary-deep: 0 0 0;
  --c-primary-ink: 255 255 255;
  --c-accent: 17 17 17;
  --c-accent-soft: 240 240 240;
  --c-accent-deep: 0 0 0;
  --c-accent-ink: 255 255 255;
  --c-bg: 255 255 255;
  --c-surface: 255 255 255;
  --c-bg-alt: 250 250 250;
  --c-ink: 17 17 17;
  --c-muted: 120 120 120;
  --c-line: 230 230 230;
  --c-star: 17 17 17;
}
[data-theme="pure-mono"].dark {
  --c-primary: 245 245 245;
  --c-primary-soft: 30 30 30;
  --c-primary-deep: 255 255 255;
  --c-primary-ink: 12 12 12;
  --c-accent: 245 245 245;
  --c-accent-soft: 30 30 30;
  --c-accent-deep: 255 255 255;
  --c-accent-ink: 12 12 12;
  --c-bg: 0 0 0;
  --c-surface: 14 14 14;
  --c-surface-alt: 22 22 22;
  --c-ink: 245 245 245;
  --c-muted: 150 150 150;
  --c-line: 40 40 40;
  --c-star: 245 245 245;
}

/* --------------------------------------------------------------------------
   4. PER-MODULE OVERRIDE  (Admin > Theme Studio > Module Theming)
   The default mapping is Interior = Premium Navy, Jehez = Festive Maroon.
   Applied with [data-module] on <body> — zero extra requests.
   -------------------------------------------------------------------------- */
[data-module="interior"] {
  --c-primary: 11 31 58;
  --c-primary-soft: 236 240 246;
  --c-primary-deep: 8 22 41;
  --c-primary-ink: 255 255 255;
  --c-accent: 200 162 74;
  --c-accent-soft: 246 240 226;
  --c-accent-deep: 154 123 46;
  --c-accent-ink: 26 20 4;
}
[data-module="interior"].dark,
.dark [data-module="interior"] {
  --c-primary: 226 236 249;
  --c-primary-soft: 26 39 62;
  --c-primary-deep: 245 249 255;
  --c-primary-ink: 11 20 35;
  --c-accent: 227 199 123;
  --c-accent-soft: 46 40 22;
  --c-accent-deep: 240 219 160;
}

[data-module="jehez"] {
  --c-primary: 90 12 28;
  --c-primary-soft: 249 236 239;
  --c-primary-deep: 64 8 20;
  --c-primary-ink: 255 255 255;
  --c-accent: 212 169 74;
  --c-accent-soft: 249 242 227;
  --c-accent-deep: 165 130 55;
  --c-accent-ink: 32 24 4;
}
[data-module="jehez"].dark,
.dark [data-module="jehez"] {
  --c-primary: 255 214 224;
  --c-primary-soft: 56 20 30;
  --c-primary-deep: 255 232 238;
  --c-primary-ink: 48 8 18;
  --c-accent: 236 203 130;
  --c-accent-soft: 58 46 20;
  --c-accent-deep: 247 224 172;
}

/* --------------------------------------------------------------------------
   5. DARK SURFACE UTILITY
   A container with a dark brand background inherits the palette's light-mode
   ink/accent so its content stays legible in BOTH light and dark mode.
   `data-module` on the same element scopes WHICH palette is used.
   -------------------------------------------------------------------------- */
.on-dark {
  --c-ink: 255 255 255;
  --c-muted: 240 235 232;
  --c-line: rgba(255, 255, 255, 0.16);
  --c-line-strong: rgba(255, 255, 255, 0.3);
  --c-primary: 255 255 255;
  --c-primary-ink: var(--darkband-ink, 11 31 58);
  --c-accent-soft: 255 255 255;
  --c-accent-ink: var(--darkband-accent, 11 31 58);
}
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4, .on-dark h5,
.on-dark .card-title, .on-dark .float-price { color: #fff; }
.on-dark p, .on-dark .muted, .on-dark .card-meta, .on-dark .price-from { color: rgba(255, 255, 255, 0.72); }
.on-dark .price-now { color: rgb(var(--c-accent)); }
.on-dark .card { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.14); }
.on-dark .card:hover { background: rgba(255, 255, 255, 0.09); border-color: rgba(255, 255, 255, 0.28); }

[data-module="interior"].on-dark { --darkband-ink: 8 22 41; --darkband-accent: 8 22 41; }
[data-module="jehez"].on-dark    { --darkband-ink: 40 6 14; --darkband-accent: 40 6 14; }

/* --------------------------------------------------------------------------
   6. BUTTON STYLE VARIANTS (Admin > Theme Studio > Layout)
   -------------------------------------------------------------------------- */
[data-btn-style="outline"] .btn-primary {
  background: transparent;
  color: rgb(var(--c-accent));
  border: 1.5px solid rgb(var(--c-accent));
}
[data-btn-style="outline"] .btn-primary:hover {
  background: rgb(var(--c-accent));
  color: rgb(var(--c-accent-ink));
}
[data-btn-style="outline"] .btn-dark {
  background: transparent;
  color: rgb(var(--c-primary));
  border: 1.5px solid rgb(var(--c-primary));
}

[data-btn-style="gradient"] .btn-primary {
  background: linear-gradient(
    135deg,
    rgb(var(--c-accent)) 0%,
    rgb(var(--c-accent-deep)) 100%
  );
  color: rgb(var(--c-accent-ink));
}

/* --------------------------------------------------------------------------
   7. FONT SCALE  (Admin > Theme Studio > Typography > base size)
   -------------------------------------------------------------------------- */
[data-font-scale="0.94"] { --font-scale: 0.94; }
[data-font-scale="1"]    { --font-scale: 1; }
[data-font-scale="1.06"] { --font-scale: 1.06; }
[data-font-scale="1.12"] { --font-scale: 1.12; }

/* --------------------------------------------------------------------------
   8. RADIUS  (Admin > Theme Studio > Layout)
   -------------------------------------------------------------------------- */
[data-radius="0"]  { --radius: 0px;   --radius-lg: 0px;  --radius-pill: 0px; }
[data-radius="4"]  { --radius: 4px;   --radius-lg: 6px;  --radius-pill: 999px; }
[data-radius="10"] { --radius: 10px;  --radius-lg: 14px; --radius-pill: 999px; }
[data-radius="18"] { --radius: 18px;  --radius-lg: 24px; --radius-pill: 999px; }

/* --------------------------------------------------------------------------
   9. CONTAINER WIDTH
   -------------------------------------------------------------------------- */
[data-container="1120"] { --container: 1120px; }
[data-container="1280"] { --container: 1280px; }
[data-container="1440"] { --container: 1440px; }