/* =========================
   Theme Variables
========================= */
:root {
  /* Font */
  --font-body: "Geist Variable", sans-serif;
  --font-heading: "Geist Variable", sans-serif;

  /* Layout */
  --padding: 1rem;
  --max-width-layout: 1920px;
  --max-width-container: 1440px;

  --radius: 0.625rem;
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);

   /* =========================
   * Alias-Variablen (deine vorhandene Struktur)
   * ========================= */
  --color-background: var(--background);
  --color-foreground: var(--foreground);

  --color-background-header: var(--background-header);
  --color-background-footer: var(--background-footer);

  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);

  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);

  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);

  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);

  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);

  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);

  --color-destructive: var(--destructive);

  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);

  /* =========================
   NORD Inspired Theme
========================= /
:root {
  / LIGHT */
  --background: oklch(0.96 0.01 240);
  --background-header: oklch(0.94 0.01 240);
  --background-footer: oklch(0.94 0.01 240);

  --card: oklch(0.99 0 0);
  --card-foreground: oklch(0.16 0 0);

  --foreground: oklch(0.16 0 0);
  --muted-foreground: oklch(0.52 0 0);

  --primary: oklch(0.65 0.1 250);
  --primary-foreground: oklch(0.98 0 0);

  --secondary: oklch(0.93 0.01 250);
  --secondary-foreground: oklch(0.25 0 0);

  --accent: oklch(0.88 0.04 260);
  --accent-foreground: oklch(0.22 0 0);

  --border: oklch(0.87 0 0);
  --ring: oklch(0.62 0.08 260);

  --destructive: oklch(0.55 0.22 25);

 
}

html.dark {
  --background: oklch(0.17 0.01 250);
  --background-header: oklch(0.2 0.01 250);
  --background-footer: oklch(0.2 0.01 250);

  --card: oklch(0.23 0.01 250);
  --card-foreground: oklch(0.95 0 0);

  --foreground: oklch(0.95 0 0);
  --muted-foreground: oklch(0.65 0 0);

  --primary: oklch(0.75 0.08 250);
  --primary-foreground: oklch(0.13 0 0);

  --secondary: oklch(0.28 0.02 250);
  --secondary-foreground: oklch(0.95 0 0);

  --accent: oklch(0.34 0.05 260);
  --accent-foreground: oklch(0.96 0 0);

  --border: oklch(1 0 0 / 18%);
  --ring: oklch(0.75 0.05 260);

  --destructive: oklch(0.55 0.22 25);
}