/**
 * Optional per-device looks. Color tokens only — no effects.
 * Applied when html[data-et-skin] is shop | neon | phosphor.
 */

/* Shop: field-ops steel + safety orange. Follows Light/Dark brightness. */
html[data-et-skin="shop"] {
  --background: 36 18% 95%;
  --foreground: 220 16% 12%;
  --card: 40 22% 98%;
  --card-foreground: 220 16% 12%;
  --popover: 40 22% 98%;
  --popover-foreground: 220 16% 12%;
  --primary: 22 88% 46%;
  --primary-foreground: 0 0% 100%;
  --secondary: 30 10% 90%;
  --secondary-foreground: 220 14% 18%;
  --muted: 30 10% 91%;
  --muted-foreground: 220 8% 38%;
  --accent: 22 88% 46%;
  --accent-foreground: 0 0% 100%;
  --destructive: 0 72% 46%;
  --destructive-foreground: 0 0% 100%;
  --border: 30 10% 80%;
  --input: 30 10% 80%;
  --ring: 22 88% 46%;
  --radius: 0.45rem;
  --status-emergency: 322 70% 46%;
  --status-open: 0 74% 48%;
  --status-progress: 32 90% 46%;
  --status-completed: 152 42% 36%;
  --sidebar-background: 36 14% 93%;
  --sidebar-foreground: 220 16% 12%;
  --sidebar-primary: 22 88% 46%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 30 10% 88%;
  --sidebar-accent-foreground: 220 16% 12%;
  --sidebar-border: 30 10% 82%;
  --sidebar-ring: 22 88% 46%;
}
html.dark[data-et-skin="shop"] {
  --background: 220 10% 8%;
  --foreground: 36 12% 94%;
  --card: 220 9% 11%;
  --card-foreground: 36 12% 94%;
  --popover: 220 9% 11%;
  --popover-foreground: 36 12% 94%;
  --primary: 22 86% 52%;
  --primary-foreground: 0 0% 100%;
  --secondary: 220 8% 16%;
  --secondary-foreground: 36 10% 90%;
  --muted: 220 8% 16%;
  --muted-foreground: 30 8% 62%;
  --accent: 22 86% 52%;
  --accent-foreground: 0 0% 100%;
  --destructive: 0 72% 50%;
  --destructive-foreground: 0 0% 100%;
  --border: 220 8% 20%;
  --input: 220 8% 20%;
  --ring: 22 86% 52%;
  --radius: 0.45rem;
  --status-emergency: 322 70% 52%;
  --status-open: 0 74% 52%;
  --status-progress: 32 88% 50%;
  --status-completed: 152 40% 42%;
  --sidebar-background: 220 10% 7%;
  --sidebar-foreground: 36 12% 94%;
  --sidebar-primary: 22 86% 52%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 220 8% 14%;
  --sidebar-accent-foreground: 36 12% 94%;
  --sidebar-border: 220 8% 16%;
  --sidebar-ring: 22 86% 52%;
}
html[data-et-skin="shop"] .et-profile-page {
  background: hsl(var(--background));
}
html[data-et-skin="shop"] .et-profile-hero::after {
  display: none;
}
html[data-et-skin="shop"] .et-profile-section,
html[data-et-skin="shop"] .et-profile-block,
html[data-et-skin="shop"] .et-profile-hero {
  box-shadow: none;
}
html[data-et-skin="neon"],
html.dark[data-et-skin="neon"] {
  --background: 228 55% 6%;
  --foreground: 186 90% 90%;
  --card: 228 45% 10%;
  --card-foreground: 186 90% 90%;
  --popover: 228 45% 10%;
  --popover-foreground: 186 90% 90%;
  --primary: 187 100% 48%;
  --primary-foreground: 228 55% 6%;
  --secondary: 228 35% 16%;
  --secondary-foreground: 186 80% 88%;
  --muted: 228 35% 16%;
  --muted-foreground: 200 18% 68%;
  --accent: 22 92% 56%;
  --accent-foreground: 0 0% 100%;
  --destructive: 0 72% 52%;
  --destructive-foreground: 0 0% 100%;
  --border: 228 30% 22%;
  --input: 228 30% 22%;
  --ring: 187 100% 48%;
  --status-emergency: 322 90% 60%;
  --status-open: 0 78% 58%;
  --status-progress: 40 95% 56%;
  --status-completed: 152 55% 48%;
  --sidebar-background: 228 55% 5%;
  --sidebar-foreground: 186 90% 90%;
  --sidebar-primary: 187 100% 48%;
  --sidebar-primary-foreground: 228 55% 6%;
  --sidebar-accent: 228 40% 14%;
  --sidebar-accent-foreground: 186 90% 90%;
  --sidebar-border: 228 40% 14%;
  --sidebar-ring: 187 100% 48%;
}

html[data-et-skin="phosphor"],
html.dark[data-et-skin="phosphor"] {
  --background: 120 35% 4%;
  --foreground: 120 72% 66%;
  --card: 120 28% 7%;
  --card-foreground: 120 72% 66%;
  --popover: 120 28% 7%;
  --popover-foreground: 120 72% 66%;
  --primary: 120 70% 40%;
  --primary-foreground: 120 35% 4%;
  --secondary: 120 22% 12%;
  --secondary-foreground: 120 60% 72%;
  --muted: 120 22% 12%;
  --muted-foreground: 120 20% 55%;
  --accent: 40 92% 48%;
  --accent-foreground: 120 35% 4%;
  --destructive: 0 72% 48%;
  --destructive-foreground: 0 0% 100%;
  --border: 120 22% 16%;
  --input: 120 22% 16%;
  --ring: 120 70% 40%;
  --status-emergency: 322 70% 52%;
  --status-open: 0 72% 50%;
  --status-progress: 40 90% 48%;
  --status-completed: 120 70% 40%;
  --sidebar-background: 120 35% 3%;
  --sidebar-foreground: 120 72% 66%;
  --sidebar-primary: 120 70% 40%;
  --sidebar-primary-foreground: 120 35% 4%;
  --sidebar-accent: 120 22% 10%;
  --sidebar-accent-foreground: 120 72% 66%;
  --sidebar-border: 120 22% 10%;
  --sidebar-ring: 120 70% 40%;
}