/* src/shared/styles/theme-styles.css */
/**
 * Ästhetik-Tokens (Farben, Gradients, Schriften, Animationen)
 */

:root {
  /* -- Typography (Aesthetics) -- */
  --font-family-base: 'Inter', system-ui, -apple-system, sans-serif;
  --font-family-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* ==========================================
     CORE PROGRAMMATIC THEME PARAMETERS 
     Only change these variables to change the entire system!
     ========================================== */
  --theme-h: 38; /* Core Theme Hue (e.g. 38 for golden-brown / amber) */
  --theme-s: 60%; /* Core Brand Saturation (60%) */
  --theme-l: 50%; /* Core Brand Lightness (50%) */
  --theme-bg-spray-s: 12%; /* Ambient Background Brand Saturation spray (12%) */

  /* grau1 derived base components (Lightness is mathematically fixed to 94%) */
  --grau1-h: var(--theme-h);
  --grau1-s: var(--theme-bg-spray-s);
  --grau1-l: 94%;

  /* -- Programmatic Brand Colors -- */
  --color-brand-h: var(--theme-h);
  --color-brand-s: var(--theme-s);
  --color-brand-l: var(--theme-l);

  --color-brand: hsl(var(--color-brand-h), var(--color-brand-s), var(--color-brand-l));
  --color-brand-hover: hsl(
    var(--color-brand-h),
    var(--color-brand-s),
    calc(var(--color-brand-l) - 8%)
  );
  --color-brand-contrast: hsl(0, 0%, 100%);

  /* Dynamic brand shadows */
  --color-brand-shadow-sm: hsla(
    var(--color-brand-h),
    var(--color-brand-s),
    var(--color-brand-l),
    0.25
  );
  --color-brand-shadow-lg: hsla(
    var(--color-brand-h),
    var(--color-brand-s),
    var(--color-brand-l),
    0.4
  );

  /* -- Light Theme Programmatic Mappings (Base Background grau1, Glass 100% White) -- */
  --color-bg-base: hsl(var(--grau1-h), var(--grau1-s), var(--grau1-l));
  --color-bg-surface: hsla(0, 0%, 100%, 0.45);
  --color-bg-elevated: hsla(0, 0%, 100%, 0.8);

  --color-text-base: hsl(var(--grau1-h), 25%, 15%);
  --color-text-muted: hsl(var(--grau1-h), 12%, 42%);

  --color-border: hsla(0, 0%, 0%, 0.08);
  --color-border-hover: hsla(0, 0%, 0%, 0.18);

  /* Status & Semantic Colors */
  --color-success: hsl(145, 50%, 42%);
  --color-important: hsl(265, 45%, 54%);
  --color-warning: hsl(26, 95%, 50%); /* Legible safety orange distinct from brand */
  --color-error: hsl(0, 70%, 55%);

  /* -- Blur Levels (Aesthetics) -- */
  --blur-soft: 8px;
  --blur-strong: 16px;

  /* -- Transitions -- */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;

  /* -- Programmatic Gradients -- */
  --gradient-brand: linear-gradient(
    135deg,
    hsl(var(--theme-h), var(--theme-s), var(--theme-l)),
    hsl(calc(var(--theme-h) - 16), calc(var(--theme-s) - 10%), calc(var(--theme-l) + 2%))
  );
  --gradient-success: linear-gradient(135deg, #16a34a, #059669);
  --gradient-danger: linear-gradient(135deg, #dc2626, #e11d48);
  --gradient-warning: linear-gradient(135deg, #ea580c, #c2410c);
  --gradient-neutral: linear-gradient(
    135deg,
    hsl(var(--theme-h), var(--theme-bg-spray-s), 88%),
    hsl(var(--theme-h), var(--theme-bg-spray-s), 80%)
  );
  --gradient-soft: linear-gradient(135deg, hsla(0, 0%, 100%, 0.8), hsla(0, 0%, 95%, 0.8));
}

/* -- Symmetrical Programmatic Dark Theme (Base Background 100% Black, Glass grau1 + alpha) -- */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg-base: hsl(var(--grau1-h), var(--grau1-s), 0%);
    --color-bg-surface: hsla(var(--grau1-h), var(--grau1-s), var(--grau1-l), 0.1);
    --color-bg-elevated: hsla(var(--grau1-h), var(--grau1-s), var(--grau1-l), 0.16);

    --color-text-base: hsl(var(--grau1-h), 25%, 94%);
    --color-text-muted: hsl(var(--grau1-h), 12%, 72%);

    --color-border: hsla(0, 0%, 100%, 0.08);
    --color-border-hover: hsla(0, 0%, 100%, 0.18);

    --color-brand-contrast: hsl(0, 0%, 100%);

    --gradient-brand: linear-gradient(
      135deg,
      hsl(var(--theme-h), calc(var(--theme-s) - 12%), calc(var(--theme-l) - 4%)),
      hsl(calc(var(--theme-h) - 16), calc(var(--theme-s) - 22%), calc(var(--theme-l) - 2%))
    );
    --gradient-neutral: linear-gradient(
      135deg,
      hsl(var(--theme-h), calc(var(--theme-bg-spray-s) - 2%), 20%),
      hsl(var(--theme-h), calc(var(--theme-bg-spray-s) - 2%), 14%)
    );
    --gradient-soft: linear-gradient(
      135deg,
      hsla(var(--grau1-h), var(--grau1-s), 14%, 0.8),
      hsla(var(--grau1-h), var(--grau1-s), 9%, 0.8)
    );
  }
}

:root.dark-theme {
  --color-bg-base: hsl(var(--grau1-h), var(--grau1-s), 0%);
  --color-bg-surface: hsla(var(--grau1-h), var(--grau1-s), var(--grau1-l), 0.1);
  --color-bg-elevated: hsla(var(--grau1-h), var(--grau1-s), var(--grau1-l), 0.16);

  --color-text-base: hsl(var(--grau1-h), 25%, 94%);
  --color-text-muted: hsl(var(--grau1-h), 12%, 72%);

  --color-border: hsla(0, 0%, 100%, 0.08);
  --color-border-hover: hsla(0, 0%, 100%, 0.18);

  --color-brand-contrast: hsl(0, 0%, 100%);

  --gradient-brand: linear-gradient(
    135deg,
    hsl(var(--theme-h), calc(var(--theme-s) - 12%), calc(var(--theme-l) - 4%)),
    hsl(calc(var(--theme-h) - 16), calc(var(--theme-s) - 22%), calc(var(--theme-l) - 2%))
  );
  --gradient-neutral: linear-gradient(
    135deg,
    hsl(var(--theme-h), calc(var(--theme-bg-spray-s) - 2%), 20%),
    hsl(var(--theme-h), calc(var(--theme-bg-spray-s) - 2%), 14%)
  );
  --gradient-soft: linear-gradient(
    135deg,
    hsla(var(--grau1-h), var(--grau1-s), 14%, 0.8),
    hsla(var(--grau1-h), var(--grau1-s), 9%, 0.8)
  );
}

:root.light-theme {
  --color-bg-base: hsl(var(--grau1-h), var(--grau1-s), var(--grau1-l));
  --color-bg-surface: hsla(0, 0%, 100%, 0.45);
  --color-bg-elevated: hsla(0, 0%, 100%, 0.8);

  --color-text-base: hsl(var(--grau1-h), 25%, 15%);
  --color-text-muted: hsl(var(--grau1-h), 12%, 42%);

  --color-border: hsla(0, 0%, 0%, 0.08);
  --color-border-hover: hsla(0, 0%, 0%, 0.18);

  --color-brand-contrast: hsl(0, 0%, 100%);
}