/* ============================================================
   Layux Themes
   Light-Mode-Overrides (Standard ist Dark, siehe css/tokens.css)
   ============================================================ */

[data-theme="light"] {
  color-scheme: light;

  --color-bg: #F7F4EF;
  --color-bg-soft: #FFF9F1;
  --color-surface: #FFFFFF;
  --color-surface-elevated: #FFF7EC;
  --color-surface-soft: #F1E7DA;

  --color-primary: #FF7A00;
  --color-primary-hover: #E96F00;
  --color-primary-soft: #FFB366;
  --color-primary-glow: rgba(255, 122, 0, 0.24);

  --color-text: #171A20;
  --color-text-secondary: #46505F;
  --color-text-muted: #7A8494;
  --color-button-text: #111318;

  --color-accent-text: #A94F00;
  --color-accent-tint: rgba(255, 122, 0, 0.10);
  --color-gradient-mid: #C15A00;

  --color-border: #E2D7C9;
  --color-border-highlight: rgba(255, 122, 0, 0.38);

  --header-bg: color-mix(in srgb, var(--color-bg) 82%, transparent);
  --grid-line: rgba(23, 26, 32, 0.055);

  --shadow-sm: 0 2px 10px rgba(64, 48, 32, 0.08);
  --shadow-md: 0 10px 32px rgba(64, 48, 32, 0.12);
  --shadow-premium: 0 24px 80px rgba(64, 48, 32, 0.16);
  --shadow-orange: 0 18px 54px rgba(255, 122, 0, 0.22);
}

/* Im Light Mode brauchen Fließtext-Links dunkleres Orange für Kontrast.
   Gilt nur für klassenlose Links – Komponenten (Buttons, Nav, Footer)
   steuern ihre Farben selbst. */
[data-theme="light"] a:not([class]) {
  color: var(--color-primary-hover);
}

[data-theme="light"] a:not([class]):hover {
  color: var(--color-primary);
}

/* Sanfter Übergang beim Theme-Wechsel */
body,
.hero,
.card,
.button-secondary {
  transition:
    background-color var(--transition-base),
    color var(--transition-base),
    border-color var(--transition-base);
}