/**
 * Daytrol — unified design tokens (style × family × font).
 * Ron Burgundy + Royal Cream wood/leather vars synced from Contactrol suite.
 */
@import url("trol-theme-core.css");

:root,
html {
  color-scheme: dark;
  --et-woodgrain-teak: none;
  --et-woodgrain-burl: none;
  --et-woodgrain-exotic: none;
  --et-woodgrain-mahogany: none;
  --et-woodgrain-tigerwood: none;
  --et-woodgrain-walnut: none;
  --et-woodgrain-cherry: none;
  --et-woodgrain-rosewood: none;
  --et-woodgrain-layer: none;
  --et-wood-bezel-layer: none;
  --et-woodgrain-opacity: 0.55;
  --et-wood-bezel-opacity: 0.55;
  --et-wood-hue-rotate: -12deg;
  --et-wood-saturate: 1.14;
  --et-wood-sepia: 0.22;
  --et-wood-contrast: 1.18;
  --et-wood-filter: sepia(var(--et-wood-sepia, 0.22)) hue-rotate(var(--et-wood-hue-rotate, -12deg)) saturate(var(--et-wood-saturate, 1.14)) contrast(var(--et-wood-contrast, 1.18));
  --et-leather-layer: none;
  --et-leather-opacity: 1;
  --surface-base: #261a14;
  --surface-card: linear-gradient(180deg, #302218 0%, #261a14 100%);
  --surface-elev: #342418;
  --text-strong: #f5e9d5;
  --text: #e8d9bf;
  --text-muted: #c9ad86;
  --border: rgba(212, 165, 116, 0.18);
  --border-soft: rgba(212, 165, 116, 0.12);
  --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: #e06810;
  --family-bright: #f07828;
  --family-soft: color-mix(in srgb, #e06810 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;
  --trol-panel-radius: 14px;
}

html[data-style="ron-burgundy"] {
  color-scheme: dark;
  --surface-base: #261a14;
  --surface-card: linear-gradient(180deg, #302218 0%, #261a14 100%);
  --surface-elev: #342418;
  --text-strong: #f5e9d5;
  --text: #e8d9bf;
  --text-muted: #c9ad86;
  --border: rgba(212, 165, 116, 0.18);
  --border-soft: rgba(212, 165, 116, 0.12);
  --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: var(--et-leather-layer);
  --et-leather-opacity: 1;
  --et-leather-grain-opacity: 0.62;
  --et-leather-layer:
    radial-gradient(ellipse 95% 70% at 12% 8%, color-mix(in srgb, #a07040 24%, transparent) 0%, transparent 58%),
    radial-gradient(ellipse 80% 65% at 88% 92%, color-mix(in srgb, #1a1008 14%, transparent) 0%, transparent 52%),
    radial-gradient(ellipse 55% 45% at 48% 42%, color-mix(in srgb, #4a3020 20%, transparent) 0%, transparent 68%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.18' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.09 0 0 0 0 0.055 0 0 0 0 0.04 0 0 0 0.4 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --et-woodgrain-teak: url("/assets/textures/wood-teak.svg");
  --et-woodgrain-burl: url("/assets/textures/wood-burl.svg");
  --et-woodgrain-exotic: url("/assets/textures/wood-exotic.svg");
  --et-woodgrain-mahogany: url("/assets/textures/wood-mahogany.svg");
  --et-woodgrain-tigerwood: url("/assets/textures/wood-tigerwood.svg");
  --et-woodgrain-walnut: url("/assets/textures/wood-walnut.svg");
  --et-woodgrain-cherry: url("/assets/textures/wood-cherry.svg");
  --et-woodgrain-rosewood: url("/assets/textures/wood-rosewood.svg");
  --et-woodgrain-layer: var(--et-woodgrain-burl);
  --et-wood-bezel-layer: var(--et-woodgrain-layer);
}

html[data-style="ron-burgundy"][data-et-woodgrain-species="teak"]:not([data-ui-theme]) {
  --et-woodgrain-layer: var(--et-woodgrain-teak);
  --et-wood-bezel-layer: var(--et-woodgrain-teak);
}
html[data-style="ron-burgundy"][data-et-woodgrain-species="burl"]:not([data-ui-theme]) {
  --et-woodgrain-layer: var(--et-woodgrain-burl);
  --et-wood-bezel-layer: var(--et-woodgrain-burl);
}
html[data-style="ron-burgundy"][data-et-woodgrain-species="exotic"]:not([data-ui-theme]) {
  --et-woodgrain-layer: var(--et-woodgrain-exotic);
  --et-wood-bezel-layer: var(--et-woodgrain-exotic);
}
html[data-style="ron-burgundy"][data-et-woodgrain-species="mahogany"]:not([data-ui-theme]) {
  --et-woodgrain-layer: var(--et-woodgrain-mahogany);
  --et-wood-bezel-layer: var(--et-woodgrain-mahogany);
}
html[data-style="ron-burgundy"][data-et-woodgrain-species="tigerwood"]:not([data-ui-theme]) {
  --et-woodgrain-layer: var(--et-woodgrain-tigerwood);
  --et-wood-bezel-layer: var(--et-woodgrain-tigerwood);
}
html[data-style="ron-burgundy"][data-et-woodgrain-species="walnut"]:not([data-ui-theme]) {
  --et-woodgrain-layer: var(--et-woodgrain-walnut);
  --et-wood-bezel-layer: var(--et-woodgrain-walnut);
}
html[data-style="ron-burgundy"][data-et-woodgrain-species="cherry"]:not([data-ui-theme]) {
  --et-woodgrain-layer: var(--et-woodgrain-cherry);
  --et-wood-bezel-layer: var(--et-woodgrain-cherry);
}
html[data-style="ron-burgundy"][data-et-woodgrain-species="rosewood"]:not([data-ui-theme]) {
  --et-woodgrain-layer: var(--et-woodgrain-rosewood);
  --et-wood-bezel-layer: var(--et-woodgrain-rosewood);
}

html[data-style="royal-cream"] {
  color-scheme: dark;
  --surface-base: #322a22;
  --surface-card: linear-gradient(180deg, #443c32 0%, #322a22 100%);
  --surface-elev: #4e463a;
  --text-strong: #faf5e8;
  --text: #ede2cc;
  --text-muted: #d4c4a8;
  --border: rgba(139, 108, 72, 0.32);
  --border-soft: rgba(139, 108, 72, 0.2);
  --shadow-inset: inset 0 1px 0 rgba(255, 235, 200, 0.08);
  --shadow-elev: 0 4px 18px rgba(20, 14, 8, 0.45), 0 1px 2px rgba(0, 0, 0, 0.35);
  --row-hover: rgba(180, 145, 100, 0.1);
  --input-bg: rgba(0, 0, 0, 0.18);
  --surface-texture: var(--et-leather-layer);
  --et-leather-layer:
    radial-gradient(ellipse 100% 75% at 14% 10%, color-mix(in srgb, #a88858 16%, transparent) 0%, transparent 56%),
    radial-gradient(ellipse 85% 70% at 86% 90%, color-mix(in srgb, #1e140c 18%, transparent) 0%, transparent 54%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.14' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --et-woodgrain-teak: url("/assets/textures/wood-teak.svg");
  --et-woodgrain-burl: url("/assets/textures/wood-burl.svg");
  --et-woodgrain-exotic: url("/assets/textures/wood-exotic.svg");
  --et-woodgrain-mahogany: url("/assets/textures/wood-mahogany.svg");
  --et-woodgrain-tigerwood: url("/assets/textures/wood-tigerwood.svg");
  --et-woodgrain-walnut: url("/assets/textures/wood-walnut.svg");
  --et-woodgrain-cherry: url("/assets/textures/wood-cherry.svg");
  --et-woodgrain-rosewood: url("/assets/textures/wood-rosewood.svg");
  --et-woodgrain-layer: var(--et-woodgrain-teak);
  --et-wood-bezel-layer: var(--et-woodgrain-layer);
}

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);
  --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"],
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;
}

html[data-family="green"]:not([data-ui-theme]) {
  --family: #0c8a62;
  --family-bright: #10966a;
  --family-soft: color-mix(in srgb, #0c8a62 14%, transparent);
  --family-on: #0a0d12;
}

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

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

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

html[data-family]:not([data-ui-theme]) {
  --lux-gold: var(--family);
  --lux-gold-foil: var(--family-bright);
}

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;
}

body {
  font-family: var(--font-body);
  background-color: var(--surface-base);
  color: var(--text);
}

h1, h2, h3, h4,
.day-pagetitle,
.day-card h2 {
  font-family: var(--font-heading);
}

html[data-style="ron-burgundy"] .day-card,
html[data-style="ron-burgundy"] .day-item,
html[data-style="ron-burgundy"] .day-stat,
html[data-style="ron-burgundy"] .day-signin-card,
html[data-style="ron-burgundy"] .day-integration-card,
html[data-style="royal-cream"] .day-card,
html[data-style="royal-cream"] .day-item,
html[data-style="royal-cream"] .day-stat,
html[data-style="royal-cream"] .day-signin-card,
html[data-style="royal-cream"] .day-integration-card {
  background-color: var(--surface-elev, var(--surface-card));
  background-image: var(--et-leather-layer, none);
  background-repeat: no-repeat, repeat;
  background-size: cover, 256px 256px;
  background-blend-mode: overlay, normal;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 2px 10px rgba(0, 0, 0, 0.32);
}

/* v232 — species wood cabinet restore (Contactrol parity): burl/teak in gutters, not skin-wood planks */
html[data-style="ron-burgundy"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) body.day-app::before,
html[data-style="royal-cream"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) body.day-app::before {
  background-image: var(--et-wood-bezel-layer, var(--et-woodgrain-layer, none)) !important;
  opacity: var(--et-wood-bezel-opacity, var(--et-woodgrain-opacity, 0.72)) !important;
  filter: var(--et-wood-filter, sepia(var(--et-wood-sepia, 0.24)) hue-rotate(var(--et-wood-hue-rotate, -12deg)) saturate(var(--et-wood-saturate, 1.24)) contrast(var(--et-wood-contrast, 1.18))) !important;
}

html[data-style="ron-burgundy"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .day-wrap::before,
html[data-style="royal-cream"]:not([data-ui-theme]):not([data-et-woodgrain="off"]) .day-wrap::before {
  content: "" !important;
  display: block !important;
  background-image: var(--et-wood-bezel-layer, var(--et-woodgrain-layer, none)) !important;
  opacity: var(--et-wood-bezel-opacity, var(--et-woodgrain-opacity, 0.72)) !important;
  filter: var(--et-wood-filter, sepia(var(--et-wood-sepia, 0.24)) hue-rotate(var(--et-wood-hue-rotate, -12deg)) saturate(var(--et-wood-saturate, 1.24)) contrast(var(--et-wood-contrast, 1.18))) !important;
}