/**
 * Calendartrol — unified design tokens (3 axes: style × family × font).
 * Legacy --ct-* / --lux-* / --ctx-* shims for shared chrome.
 * Default product family: blue.
 */
:root,
html {
  color-scheme: dark;
  --surface-base: #1c1410;
  --surface-card: linear-gradient(180deg, #251a13 0%, #1c1410 100%);
  --surface-elev: #2a1d14;
  --text-strong: #f5e9d5;
  --text: #e8d9bf;
  --text-muted: #b39a78;
  --border: transparent;
  --border-soft: rgba(212, 165, 116, 0.10);
  --shadow-inset: inset 0 1px 0 rgba(255, 220, 170, 0.06);
  --shadow-elev: 0 4px 16px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4);
  --row-hover: rgba(212, 165, 116, 0.08);
  --input-bg: rgba(0, 0, 0, 0.25);
  --surface-texture: none;
  --family: #10b981;
  --family-bright: #22c55e;
  --family-soft: color-mix(in srgb, var(--family) 14%, transparent);
  --family-on: #0a0d12;
  --font-body: -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
  --font-heading: -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", "Segoe UI Mono", monospace;
}

/* --- Axis A: surface style --- */
html[data-style="ron-burgundy"] {
  color-scheme: dark;
  --surface-base: #1c1410;
  --surface-card: linear-gradient(180deg, #251a13 0%, #1c1410 100%);
  --surface-elev: #2a1d14;
  --text-strong: #f5e9d5;
  --text: #e8d9bf;
  --text-muted: #b39a78;
  --border: transparent;
  --border-soft: rgba(212, 165, 116, 0.10);
  --shadow-inset: inset 0 1px 0 rgba(255, 220, 170, 0.06);
  --shadow-elev: 0 4px 16px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4);
  --row-hover: rgba(212, 165, 116, 0.08);
  --input-bg: rgba(0, 0, 0, 0.25);
  --surface-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}

html[data-style="modern-light"] {
  color-scheme: light;
  --surface-base: #f8fafc;
  --surface-card: #ffffff;
  --surface-elev: #ffffff;
  --text-strong: #0f172a;
  --text: #1e293b;
  --text-muted: #64748b;
  --border: #e2e8f0;
  --border-soft: #f1f5f9;
  --shadow-inset: none;
  --shadow-elev: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
  --row-hover: rgba(15, 23, 42, 0.04);
  --input-bg: #ffffff;
  --surface-texture: none;
}

html[data-style="soft-cream"] {
  color-scheme: light;
  --surface-base: #faf6ef;
  --surface-card: #fffaf0;
  --surface-elev: #ffffff;
  --text-strong: #2c1810;
  --text: #3d2817;
  --text-muted: #8c7355;
  --border: #ebdfc8;
  --border-soft: #f4ead3;
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --shadow-elev: 0 2px 8px rgba(60, 40, 20, 0.06);
  --row-hover: rgba(140, 115, 85, 0.06);
  --input-bg: #fffaf0;
  --surface-texture: none;
}

html[data-style="midnight"] {
  color-scheme: dark;
  --surface-base: #000000;
  --surface-card: #0a0a0a;
  --surface-elev: #141414;
  --text-strong: #ffffff;
  --text: #e5e5e5;
  --text-muted: #737373;
  --border: transparent;
  --border-soft: rgba(255, 255, 255, 0.06);
  --shadow-inset: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  --shadow-elev: 0 0 24px var(--family), 0 0 0 1px rgba(255, 255, 255, 0.03);
  --row-hover: rgba(255, 255, 255, 0.04);
  --input-bg: #0a0a0a;
  --surface-texture: none;
}

html[data-style="slate"] {
  color-scheme: dark;
  --surface-base: #0f172a;
  --surface-card: #1e293b;
  --surface-elev: #334155;
  --text-strong: #f8fafc;
  --text: #cbd5e1;
  --text-muted: #94a3b8;
  --border: rgba(148, 163, 184, 0.15);
  --border-soft: rgba(148, 163, 184, 0.08);
  --shadow-inset: none;
  --shadow-elev: 0 4px 12px rgba(0, 0, 0, 0.3);
  --row-hover: rgba(148, 163, 184, 0.08);
  --input-bg: #0f172a;
  --surface-texture: none;
}

/* --- Axis B: brand family --- */
html[data-family="green"] {
  --family: #10b981;
  --family-bright: #22c55e;
  --family-soft: color-mix(in srgb, #10b981 14%, transparent);
  --family-on: #0a0d12;
}

html[data-family="amber"] {
  --family: #f97316;
  --family-bright: #fb923c;
  --family-soft: color-mix(in srgb, #f97316 14%, transparent);
  --family-on: #0a0d12;
}

html[data-family="purple"] {
  --family: #a855f7;
  --family-bright: #c084fc;
  --family-soft: color-mix(in srgb, #a855f7 14%, transparent);
  --family-on: #0a0d12;
}

html[data-family="blue"] {
  --family: #3b82f6;
  --family-bright: #60a5fa;
  --family-soft: color-mix(in srgb, #3b82f6 14%, transparent);
  --family-on: #0a0d12;
}

/* --- Axis C: typography --- */
html[data-font="system"] {
  --font-body: -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
  --font-heading: -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
}

html[data-font="inter"] {
  --font-body: "Inter", -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
  --font-heading: "Inter", -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
}

html[data-font="playfair-lora"] {
  --font-heading: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "Lora", Georgia, "Times New Roman", serif;
}

html[data-font="oswald"] {
  --font-heading: "Oswald", -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
  --font-body: "Inter", -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
}

/* --- Apply tokens to page chrome --- */
body {
  font-family: var(--font-body);
  background-color: var(--surface-base);
}

html[data-style="ron-burgundy"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background-image: var(--surface-texture);
  background-repeat: repeat;
  background-size: 180px 180px;
  opacity: 0.04;
}

h1, h2, h3, h4,
.ct-main > h1,
.ct-card h2,
.ct-sheet-title {
  font-family: var(--font-heading);
}

html[data-style="midnight"] h1,
html[data-style="midnight"] h2,
html[data-style="midnight"] h3,
html[data-style="midnight"] h4,
html[data-style="midnight"] .ct-main > h1,
html[data-style="midnight"] .ct-card h2,
html[data-style="midnight"] .ct-sheet-title {
  text-shadow: 0 0 8px var(--family);
}

/* --- Legacy --ct-* and --lux-* / --ctx-* shim ---
   contacts.css and other files reference these legacy variables defined by the
   old theme-palettes.css. New styles (Modern Light, Soft Cream, Midnight, Slate)
   never set them, so without this shim text becomes invisible on the light styles
   (the hardcoded #fff fallbacks in contacts.css render white-on-white).

   IMPORTANT: re-asserted under `html[data-style]` below at the same specificity
   as app.css's `html[data-ui-theme]` legacy bridge but with LATER source order,
   so on new themes (data-style="soft-cream" etc.) the new tokens win and the
   header surface follows the active theme instead of staying dark. */
:root {
  --ct-font: var(--font-body);
  --ct-radius: 10px;
  --ct-bg: var(--surface-base);
  --ct-surface: var(--surface-card);
  --ct-border: var(--border);
  --ct-text: var(--text);
  --ct-muted: var(--text-muted);
  --ct-accent: var(--family);
  --ct-heading: var(--text-strong);
  --ct-input-bg: var(--input-bg);
  --ct-row-hover: var(--row-hover);
  --ct-primary: var(--family);
  --ct-card: var(--surface-elev);

  /* Lux ink (text intensity ramp used by contacts.css) */
  --lux-ink: var(--text-strong);
  --lux-ink-soft: var(--text);
  --lux-ink-faint: var(--text-muted);

  /* Lux gold (accent + decorative highlights) */
  --lux-gold: var(--family);
  --lux-gold-foil: var(--family-bright);
  --lux-gold-rim: color-mix(in srgb, var(--family) 50%, transparent);

  /* ctx-* (alternate name used by the contacts split-pane shell) */
  --ctx-bg: var(--surface-base);
  --ctx-card: var(--surface-card);
  --ctx-text: var(--text);
  --ctx-muted: var(--text-muted);
  --ctx-border: var(--border);
  --ctx-primary: var(--family);
  --ctx-radius-sm: 8px;
}

/* When a new style is active, RE-ASSERT every legacy --ct-* / --lux-* / --ctx-*
   var at the same specificity as app.css's `html[data-ui-theme]` legacy bridge.
   theme-tokens.css loads AFTER app.css so identical specificity = this rule wins.
   Without this, the header surface (--ct-surface) stays dark on light themes
   because the legacy bridge maps it to var(--jt-bg-sidebar, #181818). */
html[data-style] {
  --ct-font: var(--font-body);
  --ct-bg: var(--surface-base);
  --ct-surface: var(--surface-card);
  --ct-border: var(--border);
  --ct-text: var(--text);
  --ct-muted: var(--text-muted);
  --ct-accent: var(--family);
  --ct-heading: var(--text-strong);
  --ct-input-bg: var(--input-bg);
  --ct-row-hover: var(--row-hover);
  --ct-primary: var(--family);
  --ct-card: var(--surface-elev);

  --lux-ink: var(--text-strong);
  --lux-ink-soft: var(--text);
  --lux-ink-faint: var(--text-muted);
  --lux-gold: var(--family);
  --lux-gold-foil: var(--family-bright);

  --ctx-bg: var(--surface-base);
  --ctx-card: var(--surface-card);
  --ctx-text: var(--text);
  --ctx-muted: var(--text-muted);
  --ctx-border: var(--border);
  --ctx-primary: var(--family);
}

/* ============================================================
   Ron Burgundy — muted leather type pills
   ============================================================
   The default contact-type pill palette (Customer / Lead / Vendor / Employee /
   Personal / Spam / Unknown) ships with bright primary colors. In Ron Burgundy
   those scream against the dark mahogany/brass aesthetic. Override here with
   a desaturated leather-tone palette: every type keeps a hint of its hue but
   reads as a variation of polished aged leather. Bronze rim unifies the set. */
html[data-style="ron-burgundy"] .ctx-shell .ctx-pill,
html[data-style="ron-burgundy"] .ctx-pill {
  border-color: rgba(180, 150, 110, 0.32);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}
html[data-style="ron-burgundy"] .ctx-shell .ctx-pill-customer,
html[data-style="ron-burgundy"] .ctx-pill-customer {
  background: rgba(56, 78, 84, 0.32);   /* sage-dusk: aged copper patina */
  border-color: rgba(160, 180, 175, 0.32);
  color: #b8c6c2;
}
html[data-style="ron-burgundy"] .ctx-shell .ctx-pill-lead,
html[data-style="ron-burgundy"] .ctx-pill-lead {
  background: rgba(78, 58, 78, 0.32);   /* faded plum velvet */
  border-color: rgba(180, 150, 175, 0.32);
  color: #c4a8c0;
}
html[data-style="ron-burgundy"] .ctx-shell .ctx-pill-vendor,
html[data-style="ron-burgundy"] .ctx-pill-vendor {
  background: rgba(96, 62, 36, 0.38);   /* cognac / warm caramel */
  border-color: rgba(190, 145, 90, 0.42);
  color: #d6b182;
}
html[data-style="ron-burgundy"] .ctx-shell .ctx-pill-employee,
html[data-style="ron-burgundy"] .ctx-pill-employee {
  background: rgba(62, 76, 46, 0.34);   /* olive moss leather */
  border-color: rgba(165, 175, 110, 0.32);
  color: #b8c890;
}
html[data-style="ron-burgundy"] .ctx-shell .ctx-pill-personal,
html[data-style="ron-burgundy"] .ctx-pill-personal {
  background: rgba(96, 56, 64, 0.32);   /* dusty rose, faded velvet */
  border-color: rgba(190, 145, 155, 0.32);
  color: #d6acb6;
}
html[data-style="ron-burgundy"] .ctx-shell .ctx-pill-spam,
html[data-style="ron-burgundy"] .ctx-pill-spam {
  background: rgba(46, 42, 38, 0.55);   /* charcoal slate, no hue */
  border-color: rgba(140, 120, 95, 0.28);
  color: #968a7e;
}
html[data-style="ron-burgundy"] .ctx-shell .ctx-pill-unknown,
html[data-style="ron-burgundy"] .ctx-pill-unknown {
  background: rgba(212, 165, 116, 0.14); /* untreated tan */
  border-color: rgba(212, 165, 116, 0.32);
  color: #b9a786;
}

/* ============================================================
   Ron Burgundy — mute the contact-card hero gradient + in-card pills/tags
   ============================================================
   contacts.css line ~1541 paints the card head with a 75%/40% blend of the
   contact's --card-type-color (pink for personal, cobalt for customer, etc.).
   On Ron Burgundy those read as loud neon. Drop saturation hard and blend
   with mahogany #1c1410 so the band stays type-distinct but reads as leather. */
html[data-style="ron-burgundy"] .ctx-pane[style*="--card-type-color"] .ctx-pane-head {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--card-type-color) 28%, #1c1410),
    color-mix(in srgb, var(--card-type-color) 12%, #0a0506));
}

/* Pills + tags rendered inside the contact card (Personal, Customer, custom
   tags like PERSONAL-CONTACT / SECURITY-SERVICES). Override per-tag colors
   in favor of a unified leather look — embossed brass-plate effect. */
html[data-style="ron-burgundy"] .ctx-pane-pills .ctx-pill,
html[data-style="ron-burgundy"] .ctx-pane-pills .ctx-tag,
html[data-style="ron-burgundy"] .ctx-pane .ctx-pill,
html[data-style="ron-burgundy"] .ctx-pane .ctx-tag {
  background:
    linear-gradient(180deg,
      rgba(50, 35, 28, 0.88) 0%,
      rgba(28, 20, 16, 0.75) 48%,
      rgba(15, 10, 6, 0.65) 100%) !important;
  color: #d6b182 !important;
  border: 1px solid rgba(180, 150, 110, 0.38) !important;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 170, 0.12),
    inset 0 -1px 0 rgba(0, 0, 0, 0.45),
    0 1px 2px rgba(0, 0, 0, 0.35) !important;
}

/* ============================================================
   Ron Burgundy — leather grain + embossed depth on all surface cards
   ============================================================
   Adds: subtle hide-grain SVG noise overlay, inset highlight at the top of
   each card (oil sheen), dark inner shadow at the bottom (crease shadow),
   bronze hairline border (aged stitching), deeper outer shadow (weight). */
html[data-style="ron-burgundy"] .ct-card,
html[data-style="ron-burgundy"] .ct-h-card,
html[data-style="ron-burgundy"] .ct-d-card,
html[data-style="ron-burgundy"] .ct-d-kpi,
html[data-style="ron-burgundy"] .ct-r-card,
html[data-style="ron-burgundy"] .ctx-pane[style*="--card-type-color"] .ctx-pane-head {
  position: relative;
  isolation: isolate;
  border: 1px solid rgba(140, 105, 70, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 170, 0.07),
    inset 0 -1px 0 rgba(0, 0, 0, 0.45),
    0 6px 18px rgba(0, 0, 0, 0.5),
    0 1px 2px rgba(0, 0, 0, 0.45);
}

html[data-style="ron-burgundy"] .ct-card::before,
html[data-style="ron-burgundy"] .ct-h-card::before,
html[data-style="ron-burgundy"] .ct-d-card::before,
html[data-style="ron-burgundy"] .ct-d-kpi::before,
html[data-style="ron-burgundy"] .ct-r-card::before,
html[data-style="ron-burgundy"] .ctx-pane[style*="--card-type-color"] .ctx-pane-head::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
  background-image: var(--surface-texture);
  background-repeat: repeat;
  background-size: 200px 200px;
  opacity: 0.07;
  mix-blend-mode: overlay;
}

/* Keep card content above the texture overlay */
html[data-style="ron-burgundy"] .ct-card > *,
html[data-style="ron-burgundy"] .ct-h-card > *,
html[data-style="ron-burgundy"] .ct-d-card > *,
html[data-style="ron-burgundy"] .ct-d-kpi > *,
html[data-style="ron-burgundy"] .ct-r-card > *,
html[data-style="ron-burgundy"] .ctx-pane[style*="--card-type-color"] .ctx-pane-head > * {
  position: relative;
  z-index: 1;
}

/* Burnished oil-sheen highlight at the top-left of card surfaces — catches the eye
   like real leather catches light. Layered ON TOP of the existing background. */
html[data-style="ron-burgundy"] .ct-card::after,
html[data-style="ron-burgundy"] .ct-h-card::after,
html[data-style="ron-burgundy"] .ct-d-card::after,
html[data-style="ron-burgundy"] .ct-d-kpi::after,
html[data-style="ron-burgundy"] .ct-r-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
  background:
    radial-gradient(ellipse 60% 40% at 25% 15%, rgba(255, 220, 170, 0.06), transparent 60%);
}