/* ════════════════════════════════════════════════════════════════════════════
   tones.css — the shared colour palette for cards, in both apps (2026-10-10).

   A card host carries `tone tone--<hue>`; this file turns the hue into
   surface variables (--t-card, --t-raised, --t-track, --t-line, --t-ink,
   --t-icon, --t-muted). dash-tones.css (manager) and rep-tones.css (rep)
   map them onto each component's own tokens.
     Light theme: Tailwind 50 / 100 / 200 surfaces, the title in 800.
     Dark theme: the hue tints the dark surface (about 9 %), the title in
       300, grey text lifted so it keeps 4.5:1.
   The manager's four KPI tiles take their hue from their own selectors.
   ════════════════════════════════════════════════════════════════════════════ */
/* ── The palette (Tailwind v3 values) ─────────────────────────────────────── */
.tone--rose, .md-tile.md-smp, .md-tile.md-tile--off {
  --t-50:#FFF1F2; --t-100:#FFE4E6; --t-200:#FECDD3; --t-300:#FDA4AF; --t-500:#F43F5E; --t-600:#E11D48; --t-700:#BE123C; --t-800:#9F1239; }
.tone--green, .md-tile[data-tile="revenue"] {
  --t-50:#F0FDF4; --t-100:#DCFCE7; --t-200:#BBF7D0; --t-300:#86EFAC; --t-500:#22C55E; --t-600:#16A34A; --t-700:#15803D; --t-800:#166534; }
.tone--emerald, .md-tile[data-tile="volume"] {
  --t-50:#ECFDF5; --t-100:#D1FAE5; --t-200:#A7F3D0; --t-300:#6EE7B7; --t-500:#10B981; --t-600:#059669; --t-700:#047857; --t-800:#065F46; }
.tone--blue, .md-tile[data-tile="visits"] {
  --t-50:#EFF6FF; --t-100:#DBEAFE; --t-200:#BFDBFE; --t-300:#93C5FD; --t-500:#3B82F6; --t-600:#2563EB; --t-700:#1D4ED8; --t-800:#1E40AF; }
.tone--purple {
  --t-50:#FAF5FF; --t-100:#F3E8FF; --t-200:#E9D5FF; --t-300:#D8B4FE; --t-500:#A855F7; --t-600:#9333EA; --t-700:#7E22CE; --t-800:#6B21A8; }
.tone--cyan {
  --t-50:#ECFEFF; --t-100:#CFFAFE; --t-200:#A5F3FC; --t-300:#67E8F9; --t-500:#06B6D4; --t-600:#0891B2; --t-700:#0E7490; --t-800:#155E75; }
.tone--teal {
  --t-50:#F0FDFA; --t-100:#CCFBF1; --t-200:#99F6E4; --t-300:#5EEAD4; --t-500:#14B8A6; --t-600:#0D9488; --t-700:#0F766E; --t-800:#115E59; }
.tone--indigo {
  --t-50:#EEF2FF; --t-100:#E0E7FF; --t-200:#C7D2FE; --t-300:#A5B4FC; --t-500:#6366F1; --t-600:#4F46E5; --t-700:#4338CA; --t-800:#3730A3; }
.tone--amber {
  --t-50:#FFFBEB; --t-100:#FEF3C7; --t-200:#FDE68A; --t-300:#FCD34D; --t-500:#F59E0B; --t-600:#D97706; --t-700:#B45309; --t-800:#92400E; }
.tone--orange {
  --t-50:#FFF7ED; --t-100:#FFEDD5; --t-200:#FED7AA; --t-300:#FDBA74; --t-500:#F97316; --t-600:#EA580C; --t-700:#C2410C; --t-800:#9A3412; }
.tone--sky {
  --t-50:#F0F9FF; --t-100:#E0F2FE; --t-200:#BAE6FD; --t-300:#7DD3FC; --t-500:#0EA5E9; --t-600:#0284C7; --t-700:#0369A1; --t-800:#075985; }
.tone--slate {
  --t-50:#F8FAFC; --t-100:#F1F5F9; --t-200:#E2E8F0; --t-300:#CBD5E1; --t-500:#64748B; --t-600:#475569; --t-700:#334155; --t-800:#1E293B; }

/* ── Surfaces from the hue: dark theme (default), then light ──────────────── */
.tone, .md-grid--row > .md-tile {
  --t-card:   color-mix(in srgb, var(--t-500) 9%,  #17191C);
  --t-raised: color-mix(in srgb, var(--t-500) 15%, #1E2125);
  --t-track:  color-mix(in srgb, var(--t-500) 22%, #2A2E33);
  --t-line:   color-mix(in srgb, var(--t-500) 30%, transparent);
  --t-line-2: color-mix(in srgb, var(--t-500) 50%, transparent);
  --t-ink:    var(--t-300);
  --t-icon:   var(--t-600);
  --t-muted:  #A9B1BA;   /* the cards' grey text, a step lighter on a tinted dark surface (4.5:1) */
  --t-faint:  #9AA3AD;
}
:root[data-scheme="light"] .tone, :root[data-scheme="light"] .md-grid--row > .md-tile {
  /* 2026-10-26: white cards in light mode (the user: "every card, box, widget ... clean white"). The hue stays in
     dark mode; in light the surfaces are the shared white, the lines neutral, titles in the ink, icons in Petromix
     amber. Charts and status colours keep their own tokens. */
  --t-card: var(--surface-card, #FFFFFF); --t-raised: var(--surface-card, #FFFFFF); --t-track: var(--surface-track, #EEF0F3);
  --t-line: var(--surface-border, rgba(16, 24, 40, .10)); --t-line-2: rgba(16, 24, 40, .16); --t-ink: #1D1A16; --t-icon: #B45309;
  --t-muted: #5B636D; --t-faint: #6B737C;
}