/* C-Lion, THE FEEDBACK REFRESH. 28 Sep 2026, from the NavAIgate feedback round on the sample.

   Rigo: "needs a sophisticated theme, right now there are a bunch of colors", "when I switched to
   dark theme the dashboard got worse colors, a funny green with black, and kept the same colors
   for the metrics", "more high level typography", "each client can customize their own dashboard
   with the brand colors". Fred: "feel inside of the beauty studio instead of an app".

   Celine's ruling, 28 Sep 2026: C-Lion's visual identity is the default. A client may pick another
   dashboard colour from a short list in Settings (studio-theme.js); nothing is guessed for them.

   What this file does, and only this:
   1. ONE hue. The three pastels (mint, powder blue, lemon) and cream become tints of one colour:
      C-Lion's mint and greens by default, or the colour the client picked.
   2. A NEUTRAL dark mode. The page was near black #0B120E under saturated Forest cards #1E4231
      with bright green edges. Dark is now a soft charcoal, one warm neutral per level, and every
      metric colour has its own dark value instead of the light pastel reused.
   3. TWO faces. Comfortaa stays for the brand, the room titles and the section titles. Body, labels
      and every number move to Hanken Grotesk (already embedded in fonts.css), with tabular
      figures so numbers line up.
   4. The sample banner loses its brown and becomes a quiet strip.

   It loads LAST so it governs, and it never changes layout, copy or what a room shows.
   Contrast was measured, not judged: see tools/contrast.js. */

/* ---------- 1. the studio's tokens, light ---------- */
:root {
  --studio-accent-c: var(--studio-accent, #CDEBDD);
  --studio-deep-c: var(--studio-deep, #2D6A4F);
  --studio-title-c: var(--studio-title, #1B4332);
  --studio-body-c: var(--studio-body, #4A4A4A);
  --studio-bg-c: var(--studio-bg, #F8F5F1);
  --studio-edge-c: var(--studio-edge, #E7E1D6);

  --forest: var(--studio-title-c);
  --p-mint:  color-mix(in srgb, var(--studio-accent-c) 55%, #FFFFFF);
  --p-blue:  color-mix(in srgb, var(--studio-accent-c) 38%, #FFFFFF);
  --p-lemon: color-mix(in srgb, var(--studio-accent-c) 75%, #FFFFFF);
  --p-cream: color-mix(in srgb, var(--studio-edge-c) 80%, #FFFFFF);
  --p-mint-deep:  color-mix(in srgb, var(--studio-deep-c) 70%, #FFFFFF);
  --p-blue-deep:  color-mix(in srgb, var(--studio-deep-c) 45%, #FFFFFF);
  --p-lemon-deep: var(--studio-deep-c);
}
[data-palette] {
  --accent: var(--studio-deep-c); --accent-ink: #FFFFFF; --accent-2: var(--p-lemon);
  --chip-bg: var(--p-blue); --chip-ink: var(--studio-title-c);
  --chart-2: var(--p-blue-deep); --chart-3: var(--p-lemon-deep); --chart-4: var(--p-mint-deep);
}
html[data-palette] {
  --bg: var(--studio-bg-c); --surface: #FFFFFF; --surface-2: color-mix(in srgb, var(--studio-bg-c) 60%, #FFFFFF);
  --ink: var(--studio-body-c); --ink-strong: var(--studio-title-c); --ink-muted: #6B6563;
  --border: var(--studio-edge-c); --card-edge: var(--studio-edge-c);
  --chrome-bg: #FFFFFF; --chrome-ink: var(--studio-title-c); --chrome-muted: #6B6563;
  --chrome-border: var(--studio-edge-c); --chrome-hover: var(--surface-2);
  --chrome-tagline: var(--studio-deep-c);
  --mark-edge: var(--studio-edge-c);
  --heat-ink: var(--studio-deep-rgb, 27,67,50);
  --chart-now: var(--studio-deep-c);
  --chart-prev: color-mix(in srgb, var(--studio-accent-c) 80%, #FFFFFF);
  --chart-prev-fill: var(--p-blue);
  --chart-prev-edge: var(--studio-accent-c);
  --chart-wash: color-mix(in srgb, var(--studio-accent-c) 35%, transparent);
  --shadow-1: 0 1px 2px rgba(40,30,34,.06), 0 1px 1px rgba(40,30,34,.04);
  --shadow-2: 0 8px 24px rgba(40,30,34,.08), 0 2px 6px rgba(40,30,34,.05);
}

/* ---------- 2. the neutral dark mode ----------
   Page #151314, card #1E1B1D, raised #262325, float #2E2A2C. Edges are warm greys, not green.
   Text on the card: ink 13.3:1, muted 7.9:1; every pair in tools/contrast.js passes 4.5:1. Metric colours get their own dark values. */
html[data-palette][data-mode="dark"]{
  --bg: #151314; --surface: #1E1B1D; --surface-2: #262325;
  --ink: #E8E2DF; --ink-strong: #FAF5F2; --ink-muted: #B8AFAB;
  --border: #37312F; --card-edge: #423B3A;
  --elev-1: #1E1B1D; --elev-2: #262325; --elev-3: #2E2A2C;
  --shadow-1: 0 1px 2px rgba(0,0,0,.35); --shadow-2: 0 10px 26px rgba(0,0,0,.45);
  --chrome-bg: #1A1718; --chrome-ink: #F1EBE8; --chrome-muted: #B8AFAB;
  --chrome-border: #2E2A2B; --chrome-hover: #262325;
  --chrome-tagline: color-mix(in srgb, var(--studio-accent-c) 80%, #FFFFFF);
  --mark-edge: #4A4241;

  /* in dark the title colour is a light tint of the accent, so numerals and titles glow softly */
  --forest: color-mix(in srgb, var(--studio-accent-c) 45%, #FFFFFF);
  /* pastels become deep tints on the card; the text on them is the light --forest above */
  --p-mint:  color-mix(in srgb, var(--studio-accent-c) 34%, #1E1B1D);
  --p-blue:  color-mix(in srgb, var(--studio-accent-c) 22%, #1E1B1D);
  --p-lemon: color-mix(in srgb, var(--studio-accent-c) 40%, #1E1B1D);
  --p-cream: color-mix(in srgb, var(--studio-edge-c) 16%, #1E1B1D);
  --p-mint-deep:  color-mix(in srgb, var(--studio-accent-c) 85%, #FFFFFF);
  --p-blue-deep:  color-mix(in srgb, var(--studio-accent-c) 60%, #1E1B1D);
  --p-lemon-deep: var(--studio-accent-c);

  --accent: var(--studio-accent-c); --accent-ink: var(--studio-title-c); --accent-2: var(--p-lemon);
  --chip-bg: var(--p-blue); --chip-ink: #FAF5F2;
  --heat-ink: var(--studio-accent-rgb, 205,235,221);
  --chart-now: var(--studio-accent-c);
  --chart-prev: color-mix(in srgb, var(--studio-accent-c) 45%, #1E1B1D);
  --chart-prev-fill: color-mix(in srgb, var(--studio-accent-c) 30%, #1E1B1D);
  --chart-prev-edge: color-mix(in srgb, var(--studio-accent-c) 70%, #1E1B1D);
  --chart-wash: color-mix(in srgb, var(--studio-accent-c) 18%, transparent);
}
@media (prefers-color-scheme: dark){ html[data-palette]:not([data-mode="light"]){
  --bg: #151314; --surface: #1E1B1D; --surface-2: #262325;
  --ink: #E8E2DF; --ink-strong: #FAF5F2; --ink-muted: #B8AFAB;
  --border: #37312F; --card-edge: #423B3A;
  --elev-1: #1E1B1D; --elev-2: #262325; --elev-3: #2E2A2C;
  --shadow-1: 0 1px 2px rgba(0,0,0,.35); --shadow-2: 0 10px 26px rgba(0,0,0,.45);
  --chrome-bg: #1A1718; --chrome-ink: #F1EBE8; --chrome-muted: #B8AFAB;
  --chrome-border: #2E2A2B; --chrome-hover: #262325;
  --chrome-tagline: color-mix(in srgb, var(--studio-accent-c) 80%, #FFFFFF);
  --mark-edge: #4A4241;

  /* in dark the title colour is a light tint of the accent, so numerals and titles glow softly */
  --forest: color-mix(in srgb, var(--studio-accent-c) 45%, #FFFFFF);
  /* pastels become deep tints on the card; the text on them is the light --forest above */
  --p-mint:  color-mix(in srgb, var(--studio-accent-c) 34%, #1E1B1D);
  --p-blue:  color-mix(in srgb, var(--studio-accent-c) 22%, #1E1B1D);
  --p-lemon: color-mix(in srgb, var(--studio-accent-c) 40%, #1E1B1D);
  --p-cream: color-mix(in srgb, var(--studio-edge-c) 16%, #1E1B1D);
  --p-mint-deep:  color-mix(in srgb, var(--studio-accent-c) 85%, #FFFFFF);
  --p-blue-deep:  color-mix(in srgb, var(--studio-accent-c) 60%, #1E1B1D);
  --p-lemon-deep: var(--studio-accent-c);

  --accent: var(--studio-accent-c); --accent-ink: var(--studio-title-c); --accent-2: var(--p-lemon);
  --chip-bg: var(--p-blue); --chip-ink: #FAF5F2;
  --heat-ink: var(--studio-accent-rgb, 205,235,221);
  --chart-now: var(--studio-accent-c);
  --chart-prev: color-mix(in srgb, var(--studio-accent-c) 45%, #1E1B1D);
  --chart-prev-fill: color-mix(in srgb, var(--studio-accent-c) 30%, #1E1B1D);
  --chart-prev-edge: color-mix(in srgb, var(--studio-accent-c) 70%, #1E1B1D);
  --chart-wash: color-mix(in srgb, var(--studio-accent-c) 18%, transparent);
} }
/* the raised and floating surfaces carried their own green edges; they take the neutral ones */
html[data-mode="dark"] .h2-bubble, html[data-mode="dark"] .fl-bubble, html[data-mode="dark"] .h2-flora-ev, html[data-mode="dark"] .re-move, html[data-mode="dark"] .br-hero-line, html[data-mode="dark"] .h2-next, html[data-mode="dark"] .rv-left, html[data-mode="dark"] .rv-gate {
  --ink-muted: #C4BCB8; --border: #4A4240; --card-edge: #4A4240;
}
@media (prefers-color-scheme: dark){ html:not([data-mode="light"]) .h2-bubble, html:not([data-mode="light"]) .fl-bubble, html:not([data-mode="light"]) .h2-flora-ev, html:not([data-mode="light"]) .re-move, html:not([data-mode="light"]) .br-hero-line, html:not([data-mode="light"]) .h2-next, html:not([data-mode="light"]) .rv-left, html:not([data-mode="light"]) .rv-gate {
  --ink-muted: #C4BCB8; --border: #4A4240; --card-edge: #4A4240;
} }
html[data-mode="dark"] .cl-switcher, html[data-mode="dark"] .rv-sheet {
  --ink-muted: #CCC4C0; --border: #524946; --card-edge: #524946;
}
@media (prefers-color-scheme: dark){ html:not([data-mode="light"]) .cl-switcher, html:not([data-mode="light"]) .rv-sheet {
  --ink-muted: #CCC4C0; --border: #524946; --card-edge: #524946;
} }
html[data-mode="dark"] .cx-bar-now { background: var(--chart-now); }
@media (prefers-color-scheme: dark){ html:not([data-mode="light"]) .cx-bar-now { background: var(--chart-now); } }
html[data-mode="dark"] .cx-bar-prev { background: var(--chart-prev-fill); border-color: rgba(250,245,242,.14); }
@media (prefers-color-scheme: dark){ html:not([data-mode="light"]) .cx-bar-prev { background: var(--chart-prev-fill); border-color: rgba(250,245,242,.14); } }
html[data-mode="dark"] .cx-badge { color: #FAF5F2; }
@media (prefers-color-scheme: dark){ html:not([data-mode="light"]) .cx-badge { color: #FAF5F2; } }
html[data-mode="dark"] .cx-b-mint { background: var(--p-mint); }
@media (prefers-color-scheme: dark){ html:not([data-mode="light"]) .cx-b-mint { background: var(--p-mint); } }
html[data-mode="dark"] .cx-b-blue { background: var(--p-blue); }
@media (prefers-color-scheme: dark){ html:not([data-mode="light"]) .cx-b-blue { background: var(--p-blue); } }
html[data-mode="dark"] .cx-b-lemon { background: var(--p-lemon); }
@media (prefers-color-scheme: dark){ html:not([data-mode="light"]) .cx-b-lemon { background: var(--p-lemon); } }
html[data-mode="dark"] .cx-b-cream { background: var(--p-cream); }
@media (prefers-color-scheme: dark){ html:not([data-mode="light"]) .cx-b-cream { background: var(--p-cream); } }
html[data-mode="dark"] .cl-tagline { color: var(--chrome-tagline); }
@media (prefers-color-scheme: dark){ html:not([data-mode="light"]) .cl-tagline { color: var(--chrome-tagline); } }

/* ---------- 3. typography ---------- */
:root { --font-ui: 'Hanken Grotesk','Raleway',system-ui,sans-serif; --font-data: 'Hanken Grotesk','Raleway',system-ui,sans-serif; --font-brand: 'Comfortaa','Raleway',system-ui,sans-serif; }
body.cl-body { font-family: var(--font-ui); font-feature-settings: 'tnum' 1, 'lnum' 1; }
.cl-body h1, .cl-body h2, .cl-body h3, .cx-h1, .cx-h2, .cx-h3,
.cl-sb-name, .cl-tagline, .cl-topbar h1, .cl-topbar .cl-room-title {
  font-family: var(--font-brand);
}
.cl-body h1, .cx-h1 { letter-spacing: -.01em; }
/* numbers: Hanken, semibold, lined up */
.cx-num, .cx-num-lg, .cx-big, .h2-num, [class*="-num"] {
  font-family: var(--font-data); font-weight: 600; font-variant-numeric: tabular-nums lining-nums; letter-spacing: -.02em;
}

/* ---------- 4. the sample strip, quiet ---------- */
.cl-fixture { background: var(--studio-title-c); color: #FFFFFF; font-size: var(--t-1); letter-spacing: .02em; padding: 6px var(--s3); }
html[data-mode="dark"] .cl-fixture { background: #0F0D0E; color: #D9D1CD; border-bottom: 1px solid #2E2A2B; }
@media (prefers-color-scheme: dark){ html:not([data-mode="light"]) .cl-fixture { background: #0F0D0E; color: #D9D1CD; border-bottom: 1px solid #2E2A2B; } }

/* ---------- 6. the two action tiles lose their mint and lemon washes ----------
   The one that needs the owner keeps a thin accent edge; colour is kept for meaning. */
.h2-tile.h2-tile-ask, .h2-tile.h2-tile-act { background: var(--surface); }
.h2-tile.h2-tile-act { box-shadow: inset 0 3px 0 var(--studio-accent-c), var(--shadow-1); }
html[data-mode="dark"] .h2-tile.h2-tile-ask, html[data-mode="dark"] .h2-tile.h2-tile-act { background: var(--surface); }
@media (prefers-color-scheme: dark){ html:not([data-mode="light"]) .h2-tile.h2-tile-ask, html:not([data-mode="light"]) .h2-tile.h2-tile-act { background: var(--surface); } }

/* the post plate is a picture of the studio's own post, so it keeps the studio's light ground
   and dark ink in both modes */
html[data-mode="dark"] .cx-plate { --forest: var(--studio-title-c); color: var(--studio-title-c); }
@media (prefers-color-scheme: dark){ html:not([data-mode="light"]) .cx-plate { --forest: var(--studio-title-c); color: var(--studio-title-c); } }

/* the room's status dot */
.cl-status-dot { background: var(--studio-deep-c); }
html[data-mode="dark"] .cl-status-dot { background: var(--studio-accent-c); }
@media (prefers-color-scheme: dark){ html:not([data-mode="light"]) .cl-status-dot { background: var(--studio-accent-c); } }

/* the chart's own label chip ("Average 5.2") sits on the card colour */
html[data-palette] { --chart-label-bg: #FFFFFF; }
html[data-palette][data-mode="dark"]{ --chart-label-bg: #1E1B1D; }
@media (prefers-color-scheme: dark){ html[data-palette]:not([data-mode="light"]){ --chart-label-bg: #1E1B1D; } }

/* ---------- 7. the waiting post plate: the studio's ground and a wash of its accent ---------- */
.cx-plate-alt { background: var(--studio-bg-c); }
.cx-plate-alt::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 24 24' fill='none' stroke='%231B4332' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round' opacity='0.20'%3E%3Cpath d='M3 8.5A1.5 1.5 0 0 1 4.5 7h2.2l1.1-1.8A1 1 0 0 1 8.7 4.7h6.6a1 1 0 0 1 .9.5L17.3 7h2.2A1.5 1.5 0 0 1 21 8.5v9A1.5 1.5 0 0 1 19.5 19h-15A1.5 1.5 0 0 1 3 17.5z'/%3E%3Ccircle cx='12' cy='13' r='3.4'/%3E%3C/svg%3E"), linear-gradient(to top, color-mix(in srgb, var(--studio-accent-c) 26%, transparent), transparent 52%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 40' preserveAspectRatio='none'%3E%3Cpath d='M0 38 C 26 36, 44 26, 62 18 S 96 5, 120 2' fill='none' stroke='%231B4332' stroke-width='0.8' stroke-linecap='round' opacity='0.18'/%3E%3C/svg%3E"); }
.cx-plate-sm.cx-plate-alt::before { background-image: none, linear-gradient(to top, color-mix(in srgb, var(--studio-accent-c) 26%, transparent), transparent 52%), none; }
.cl-chip-approved { background: var(--p-mint); color: var(--forest); }

/* ---------- 8. this week's insight, on Home ---------- */
.cl-insight { padding: var(--s4) var(--s5); margin-bottom: var(--s4); border-left: 4px solid var(--studio-accent-c); }
.cl-insight-top { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s2); }
.cl-insight-soon { margin-left: auto; }
.cl-insight-head { font-family: var(--font-brand); font-weight: 700; font-size: var(--t-5); line-height: var(--lh-5); color: var(--ink-strong); margin: 0 0 var(--s2); }
.cl-insight-why { margin: 0; max-width: 72ch; color: var(--ink); }
.cl-insight-next { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--border); }
.cl-insight-next p { margin: 0; flex: 1 1 280px; color: var(--ink-strong); font-weight: 600; }
.cl-insight-note { margin: var(--s3) 0 0; font-size: var(--t-2); color: var(--ink-muted); }
@media (max-width: 600px) { .cl-insight { padding: var(--s3); } }

/* ---------- 9. the dashboard colour picker, in Settings ---------- */
.cl-dash-colours { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); }
.cl-dash-colour {
  display: flex; align-items: center; gap: var(--s2); min-height: 48px; padding: 8px 12px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--ink);
  font: inherit; font-size: var(--t-2); cursor: pointer; text-align: left;
}
.cl-dash-colour:hover { border-color: var(--ink-muted); }
.cl-dash-colour[aria-pressed="true"] { border-color: var(--studio-deep-c); box-shadow: inset 0 0 0 1px var(--studio-deep-c); color: var(--ink-strong); font-weight: 600; }
.cl-dash-swatch { flex: none; width: 26px; height: 26px; border-radius: 50%; }
@media (max-width: 600px) { .cl-dash-colours { grid-template-columns: repeat(2, minmax(0, 1fr)); } }