/*
 * Korthubben visual corrections.
 *
 * This stylesheet is loaded after the compiled application CSS and keeps the
 * requested adjustments narrowly scoped to shared presentation. No data,
 * routing or integration logic is changed here.
 */

:root {
  --kh-preview-orange: #e8792f;
  --kh-preview-white: #ffffff;
  --kh-home-hero: #101917;
  --kh-card-frame-bg: #1b1512;
  --kh-card-frame-border: #3a2a21;
}

/* Korthubben wordmark: light lettering with a separate orange brand mark. */
html.dark body header a[aria-label="Till startsidan"] {
  color: var(--foreground) !important;
  -webkit-text-fill-color: var(--foreground) !important;
}

/* Shared header controls use white icons for consistent action styling. */
html.dark body header :is(button, a)[aria-label] svg.lucide {
  color: var(--kh-preview-white) !important;
  stroke: var(--kh-preview-white) !important;
}

/* Homepage hero: one matte dark green/teal surface without grid or orange glow. */
html.dark body section[class*="bg-[#111513]"] {
  background: var(--kh-home-hero) !important;
}

html.dark body section[class*="bg-[#111513]"] > [aria-hidden="true"] {
  display: none !important;
}

/* Card detail artwork uses Korthubben's dark brown frame instead of blue/cyan. */
html.dark
  body
  div[class*="from-slate-950"][class*="via-blue-950"][class*="to-cyan-500"] {
  background: var(--kh-card-frame-bg) !important;
  border-color: var(--kh-card-frame-border) !important;
}

html.dark
  body
  div[class*="from-slate-950"][class*="via-blue-950"][class*="to-cyan-500"]
  > div[class*="border-white/20"] {
  border-color: color-mix(in oklab, var(--kh-card-frame-border) 78%, #ffffff 22%) !important;
}

/*
 * /prisstatistik/demo scope. The notice immediately followed by main is unique
 * to the fictional design-preview route.
 */
html.dark
  body
  .min-h-dvh.bg-background.text-foreground:has(> div[class*="border-warning/20"] + main) {
  --primary-foreground: var(--kh-preview-white);
  --accent-foreground: var(--kh-preview-white);
  --gold-foreground: var(--kh-preview-white);
}

/* Pull the hero content closer to the top and tighten its internal rhythm. */
html
  body
  .min-h-dvh.bg-background.text-foreground:has(> div[class*="border-warning/20"] + main)
  > main
  > section:first-child
  > div.relative.mx-auto {
  padding-top: 1.5rem !important;
  padding-bottom: 2.75rem !important;
}

html
  body
  .min-h-dvh.bg-background.text-foreground:has(> div[class*="border-warning/20"] + main)
  > main
  > section:first-child
  div.mt-7 {
  margin-top: 1rem !important;
}

html
  body
  .min-h-dvh.bg-background.text-foreground:has(> div[class*="border-warning/20"] + main)
  > main
  > section:first-child
  h1 {
  margin-top: 1rem !important;
}

/* Solid orange actions always keep fully legible white labels and icons. */
html.dark
  body
  .min-h-dvh.bg-background.text-foreground:has(> div[class*="border-warning/20"] + main)
  :is(button, a, [role="button"])[class~="bg-primary"],
html.dark
  body
  .min-h-dvh.bg-background.text-foreground:has(> div[class*="border-warning/20"] + main)
  [class*="text-primary-foreground"] {
  color: var(--kh-preview-white) !important;
  -webkit-text-fill-color: var(--kh-preview-white) !important;
}

html.dark
  body
  .min-h-dvh.bg-background.text-foreground:has(> div[class*="border-warning/20"] + main)
  :is(button, a, [role="button"])[class~="bg-primary"]
  :where(span, strong, small, p, svg) {
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
  stroke: currentColor !important;
}

/* Lucide interface icons follow the orange accent throughout the demo. */
html.dark
  body
  .min-h-dvh.bg-background.text-foreground:has(> div[class*="border-warning/20"] + main)
  main
  svg.lucide {
  color: var(--kh-preview-orange) !important;
  stroke: currentColor !important;
}

/* Preserve semantic green/red states and white icons inside orange actions. */
html.dark
  body
  .min-h-dvh.bg-background.text-foreground:has(> div[class*="border-warning/20"] + main)
  main
  [class*="text-success"]
  svg.lucide {
  color: #4ade80 !important;
}

html.dark
  body
  .min-h-dvh.bg-background.text-foreground:has(> div[class*="border-warning/20"] + main)
  main
  [class*="text-destructive"]
  svg.lucide {
  color: var(--destructive) !important;
}

html.dark
  body
  .min-h-dvh.bg-background.text-foreground:has(> div[class*="border-warning/20"] + main)
  main
  :is(button, a, [role="button"])[class~="bg-primary"]
  svg.lucide {
  color: var(--kh-preview-white) !important;
  stroke: currentColor !important;
}

@media (min-width: 640px) {
  html
    body
    .min-h-dvh.bg-background.text-foreground:has(> div[class*="border-warning/20"] + main)
    > main
    > section:first-child
    > div.relative.mx-auto {
    padding-top: 2rem !important;
    padding-bottom: 3rem !important;
  }
}