/* =========================================================================
   Colour themes ("phong cách giao diện"), chosen per partner and for the
   owner dashboard. Apply with data-theme="<name>" on <html> (whole page) or
   on a single element such as a dashboard partner card.

   Each theme sets neutrals (light mode only; dark mode keeps the shared dark
   neutrals), the default accent pair, hero, background blobs, heading font
   and its own 7-colour partner palette.

   Palette rules come in two forms:
     [data-theme=x] .c-k                 element inside a themed page
     .c-k[data-theme=x][data-theme]      element carrying its own theme —
                                         the doubled attribute makes it beat
                                         an outer page theme.
   ========================================================================= */


/* ---- Aurora: the original violet / pink look --------------------------- */
[data-theme="aurora"] {
  --c1: #7c3aed; --c2: #ec4899; --accent: var(--c1);
  --hero-bg: linear-gradient(135deg, #2e1065, #6d28d9 45%, #db2777);
  --blob1: #a78bfa; --blob2: #f472b6; --blob3: #60a5fa;
  --font-head: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
@media (prefers-color-scheme: light) {
  [data-theme="aurora"] {
    --bg: #f5f4fb; --surface: #ffffff; --surface-2: #f8f7fc; --surface-3: #efedf8;
    --text: #1d1a33; --muted: #6c6884; --border: #e7e4f2; --border-strong: #d6d2e8;
  }
}
[data-theme="aurora"] .c-violet, .c-violet[data-theme="aurora"][data-theme] { --c1: #7c3aed; --c2: #ec4899; --accent: var(--c1); }
[data-theme="aurora"] .c-blue, .c-blue[data-theme="aurora"][data-theme] { --c1: #2563eb; --c2: #06b6d4; --accent: var(--c1); }
[data-theme="aurora"] .c-teal, .c-teal[data-theme="aurora"][data-theme] { --c1: #0d9488; --c2: #22c55e; --accent: var(--c1); }
[data-theme="aurora"] .c-green, .c-green[data-theme="aurora"][data-theme] { --c1: #15803d; --c2: #a3e635; --accent: var(--c1); }
[data-theme="aurora"] .c-amber, .c-amber[data-theme="aurora"][data-theme] { --c1: #ea580c; --c2: #facc15; --accent: var(--c1); }
[data-theme="aurora"] .c-rose, .c-rose[data-theme="aurora"][data-theme] { --c1: #e11d48; --c2: #fb923c; --accent: var(--c1); }
[data-theme="aurora"] .c-slate, .c-slate[data-theme="aurora"][data-theme] { --c1: #1e293b; --c2: #6366f1; --accent: var(--c1); }

/* ---- Studio: warm paper, charcoal, terracotta (architecture studio) ---- */
[data-theme="studio"] {
  --c1: #b4532a; --c2: #d0743c; --accent: var(--c1);
  --hero-bg: linear-gradient(135deg, #1f1b17, #3b322a 60%, #5a4232);
  --blob1: #e8b98f; --blob2: #d6c2a8; --blob3: #b9a48a;
  --font-head: 'Lora', Georgia, serif;
}
@media (prefers-color-scheme: light) {
  [data-theme="studio"] {
    --bg: #f5f1ea; --surface: #fffdf9; --surface-2: #faf6ef; --surface-3: #efe8dc;
    --text: #221d18; --muted: #7d7366; --border: #e8dfd1; --border-strong: #d8ccba;
  }
}
[data-theme="studio"] .c-violet, .c-violet[data-theme="studio"][data-theme] { --c1: #b4532a; --c2: #d0743c; --accent: var(--c1); }
[data-theme="studio"] .c-blue, .c-blue[data-theme="studio"][data-theme] { --c1: #3e5c76; --c2: #5b7a94; --accent: var(--c1); }
[data-theme="studio"] .c-teal, .c-teal[data-theme="studio"][data-theme] { --c1: #4f6f5e; --c2: #6f8f7a; --accent: var(--c1); }
[data-theme="studio"] .c-green, .c-green[data-theme="studio"][data-theme] { --c1: #6b7a3a; --c2: #8c9a52; --accent: var(--c1); }
[data-theme="studio"] .c-amber, .c-amber[data-theme="studio"][data-theme] { --c1: #a8742a; --c2: #c99545; --accent: var(--c1); }
[data-theme="studio"] .c-rose, .c-rose[data-theme="studio"][data-theme] { --c1: #9c4a4a; --c2: #b86a62; --accent: var(--c1); }
[data-theme="studio"] .c-slate, .c-slate[data-theme="studio"][data-theme] { --c1: #2d2a26; --c2: #514a42; --accent: var(--c1); }

/* ---- Sage: calm moss green and cream ----------------------------------- */
[data-theme="sage"] {
  --c1: #3f6b52; --c2: #5f8f6c; --accent: var(--c1);
  --hero-bg: linear-gradient(135deg, #17301f, #2f5540 55%, #5f8f6c);
  --blob1: #a7c4a0; --blob2: #d9cfa8; --blob3: #9cc2b4;
  --font-head: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
@media (prefers-color-scheme: light) {
  [data-theme="sage"] {
    --bg: #f2f4ee; --surface: #ffffff; --surface-2: #f6f8f3; --surface-3: #e7ece2;
    --text: #1b2a20; --muted: #6a7a6e; --border: #dfe6da; --border-strong: #cbd6c5;
  }
}
[data-theme="sage"] .c-violet, .c-violet[data-theme="sage"][data-theme] { --c1: #3f6b52; --c2: #5f8f6c; --accent: var(--c1); }
[data-theme="sage"] .c-blue, .c-blue[data-theme="sage"][data-theme] { --c1: #3a6475; --c2: #5a8a96; --accent: var(--c1); }
[data-theme="sage"] .c-teal, .c-teal[data-theme="sage"][data-theme] { --c1: #2f6f68; --c2: #4f948a; --accent: var(--c1); }
[data-theme="sage"] .c-green, .c-green[data-theme="sage"][data-theme] { --c1: #5b7a2e; --c2: #86a04a; --accent: var(--c1); }
[data-theme="sage"] .c-amber, .c-amber[data-theme="sage"][data-theme] { --c1: #a07a2c; --c2: #c4a052; --accent: var(--c1); }
[data-theme="sage"] .c-rose, .c-rose[data-theme="sage"][data-theme] { --c1: #a35a4a; --c2: #c27e66; --accent: var(--c1); }
[data-theme="sage"] .c-slate, .c-slate[data-theme="sage"][data-theme] { --c1: #2f3a33; --c2: #55625a; --accent: var(--c1); }

/* ---- Navy & Gold: corporate, premium ----------------------------------- */
[data-theme="navy"] {
  --c1: #1c3557; --c2: #2b4f7e; --accent: var(--c1);
  --hero-bg: radial-gradient(circle at 85% 0%, rgba(201, 162, 39, .35), transparent 45%), linear-gradient(135deg, #0b1626, #1c3557);
  --blob1: #8fa8c8; --blob2: #d8c27a; --blob3: #b8c7da;
  --font-head: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
@media (prefers-color-scheme: light) {
  [data-theme="navy"] {
    --bg: #f4f5f8; --surface: #ffffff; --surface-2: #f7f8fb; --surface-3: #e9edf3;
    --text: #0f1b2d; --muted: #66728a; --border: #e1e6ee; --border-strong: #cdd5e1;
  }
}
[data-theme="navy"] .c-violet, .c-violet[data-theme="navy"][data-theme] { --c1: #1c3557; --c2: #2b4f7e; --accent: var(--c1); }
[data-theme="navy"] .c-blue, .c-blue[data-theme="navy"][data-theme] { --c1: #1d4e89; --c2: #2f6db3; --accent: var(--c1); }
[data-theme="navy"] .c-teal, .c-teal[data-theme="navy"][data-theme] { --c1: #145a5a; --c2: #1f7a78; --accent: var(--c1); }
[data-theme="navy"] .c-green, .c-green[data-theme="navy"][data-theme] { --c1: #1f5132; --c2: #2f6e47; --accent: var(--c1); }
[data-theme="navy"] .c-amber, .c-amber[data-theme="navy"][data-theme] { --c1: #8a6a12; --c2: #b38b22; --accent: var(--c1); }
[data-theme="navy"] .c-rose, .c-rose[data-theme="navy"][data-theme] { --c1: #7a1f33; --c2: #9e2f48; --accent: var(--c1); }
[data-theme="navy"] .c-slate, .c-slate[data-theme="navy"][data-theme] { --c1: #1f2733; --c2: #3a4658; --accent: var(--c1); }

/* ---- Mono: black & white minimal, colour only for status --------------- */
[data-theme="mono"] {
  --c1: #111111; --c2: #3a3a3a; --accent: var(--c1);
  --hero-bg: #111111;
  --blob1: #d4d4d4; --blob2: #e5e5e5; --blob3: #bdbdbd;
  --font-head: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
@media (prefers-color-scheme: light) {
  [data-theme="mono"] {
    --bg: #fafafa; --surface: #ffffff; --surface-2: #f7f7f7; --surface-3: #efefef;
    --text: #0a0a0a; --muted: #737373; --border: #e7e7e7; --border-strong: #d4d4d4;
  }
}
[data-theme="mono"] .c-violet, .c-violet[data-theme="mono"][data-theme] { --c1: #111111; --c2: #333333; --accent: var(--c1); }
[data-theme="mono"] .c-blue, .c-blue[data-theme="mono"][data-theme] { --c1: #111111; --c2: #333333; --accent: var(--c1); }
[data-theme="mono"] .c-teal, .c-teal[data-theme="mono"][data-theme] { --c1: #111111; --c2: #333333; --accent: var(--c1); }
[data-theme="mono"] .c-green, .c-green[data-theme="mono"][data-theme] { --c1: #111111; --c2: #333333; --accent: var(--c1); }
[data-theme="mono"] .c-amber, .c-amber[data-theme="mono"][data-theme] { --c1: #111111; --c2: #333333; --accent: var(--c1); }
[data-theme="mono"] .c-rose, .c-rose[data-theme="mono"][data-theme] { --c1: #111111; --c2: #333333; --accent: var(--c1); }
[data-theme="mono"] .c-slate, .c-slate[data-theme="mono"][data-theme] { --c1: #111111; --c2: #333333; --accent: var(--c1); }

/* ---- Ocean: fresh blue / teal ------------------------------------------ */
[data-theme="ocean"] {
  --c1: #0369a1; --c2: #0891b2; --accent: var(--c1);
  --hero-bg: linear-gradient(135deg, #082f49, #0c4a6e 50%, #0e7490);
  --blob1: #7dd3fc; --blob2: #67e8f9; --blob3: #a5b4fc;
  --font-head: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
@media (prefers-color-scheme: light) {
  [data-theme="ocean"] {
    --bg: #f1f6f9; --surface: #ffffff; --surface-2: #f5f9fb; --surface-3: #e5eef3;
    --text: #0b2233; --muted: #5f7686; --border: #dde8ef; --border-strong: #c8d8e2;
  }
}
[data-theme="ocean"] .c-violet, .c-violet[data-theme="ocean"][data-theme] { --c1: #1d4ed8; --c2: #0ea5e9; --accent: var(--c1); }
[data-theme="ocean"] .c-blue, .c-blue[data-theme="ocean"][data-theme] { --c1: #0369a1; --c2: #0891b2; --accent: var(--c1); }
[data-theme="ocean"] .c-teal, .c-teal[data-theme="ocean"][data-theme] { --c1: #0f766e; --c2: #14b8a6; --accent: var(--c1); }
[data-theme="ocean"] .c-green, .c-green[data-theme="ocean"][data-theme] { --c1: #15803d; --c2: #22c55e; --accent: var(--c1); }
[data-theme="ocean"] .c-amber, .c-amber[data-theme="ocean"][data-theme] { --c1: #c2410c; --c2: #f59e0b; --accent: var(--c1); }
[data-theme="ocean"] .c-rose, .c-rose[data-theme="ocean"][data-theme] { --c1: #be123c; --c2: #f43f5e; --accent: var(--c1); }
[data-theme="ocean"] .c-slate, .c-slate[data-theme="ocean"][data-theme] { --c1: #1e293b; --c2: #475569; --accent: var(--c1); }

/* ---- Theme-specific touches ------------------------------------------- */
[data-theme="navy"] .tab.active,
[data-theme="navy"] .btn.primary { box-shadow: inset 0 -2px 0 #c9a227, 0 6px 16px -8px var(--c1); }
[data-theme="navy"] .progress i { background: linear-gradient(90deg, var(--c1), #c9a227); }

[data-theme="mono"] { --radius: 12px; }
[data-theme="mono"] .dash-hero .blobs { display: none; }
[data-theme="mono"] .space-hero .ring span { color: #fff; }
@media (prefers-color-scheme: dark) {
  [data-theme="mono"], [data-theme="mono"] [class*=" c-"], [data-theme="mono"][class*=" c-"] {
    --c1: #f2f2f2; --c2: #cfcfcf; --hero-bg: #1c1c1c;
  }
  [data-theme="mono"] .btn.primary, [data-theme="mono"] .tab.active { color: #0a0a0a; }
}