/* Pentaplan skin component overrides */
[data-theme="pentaplan-light"] {
  --comp.header.bg: var(--background);
  --comp.header.fg: var(--foreground);
  --comp.footer.bg: var(--card);
  --comp.footer.fg: var(--card-foreground);
  --comp.button.bg: var(--primary);
  --comp.button.bg.hover: color-mix(in oklch, var(--primary) 88%, black 12%);
  --comp.button.fg: var(--primary-foreground);
  --comp.button.border: color-mix(in oklch, var(--primary) 35%, var(--background) 65%);
  --bottom-nav-bg: var(--card);
  --bottom-nav-fg: var(--card-foreground);
  --bottom-nav-border: var(--border);
  --bottom-nav-btn-bg: color-mix(in oklch, var(--muted) 80%, var(--primary) 20%);
  --bottom-nav-btn-fg: var(--foreground);
  --elevation.navbar: var(--shadow.layer);
  --elevation.card: var(--shadow.lift);
  --elevation.overlay: var(--shadow.overlay);
}

[data-theme="pentaplan-dark"] {
  --comp.header.bg: color-mix(in oklch, var(--background) 70%, black 30%);
  --comp.header.fg: var(--foreground);
  --comp.footer.bg: var(--card);
  --comp.footer.fg: var(--card-foreground);
  --comp.button.bg: var(--primary);
  --comp.button.bg.hover: color-mix(in oklch, var(--primary) 75%, black 25%);
  --comp.button.fg: var(--primary-foreground);
  --comp.button.border: color-mix(in oklch, var(--primary) 30%, white 70%);
  --bottom-nav-bg: color-mix(in oklch, var(--background) 85%, black 15%);
  --bottom-nav-fg: var(--foreground);
  --bottom-nav-border: var(--border);
  --bottom-nav-btn-bg: color-mix(in oklch, var(--muted) 60%, var(--primary) 40%);
  --bottom-nav-btn-fg: var(--foreground);
  --elevation.navbar: var(--shadow.layer);
  --elevation.card: var(--shadow.lift);
  --elevation.overlay: var(--shadow.overlay);
}