/* Duso Color System
   Based on a single primary HSL color, CSS calculates all variations:
   - Complementary color (180° hue rotation)
   - Light/medium/dark shades
   - High contrast version
   - Auto dark/light mode backgrounds
*/

:root {
  /* PRIMARY COLOR - Define once, everything else calculates */
  --comp-hue: 220;
  --primary-hue: calc(var(--comp-hue) - 210);       /* Triadic red-orange with logo blue */
  --primary-sat: 90%;
  --primary-base-light: 55%;

  /* CALCULATED PRIMARY COLORS */
  --primary: hsl(var(--primary-hue), var(--primary-sat), var(--primary-base-light));
  --primary-light: hsl(var(--primary-hue), var(--primary-sat), 75%);
  --primary-lighter: hsl(var(--primary-hue), var(--primary-sat), 90%);
  --primary-dark: hsl(var(--primary-hue), var(--primary-sat), 30%);
  --primary-darker: hsl(var(--primary-hue), var(--primary-sat), 15%);
  --primary-contrast: hsl(var(--primary-hue), 100%, 25%);

  /* COMPLEMENTARY COLOR (logo blue) */
  --complement: hsl(var(--comp-hue), var(--primary-sat), var(--primary-base-light));
  --complement-light: hsl(var(--comp-hue), var(--primary-sat), 75%);
  --complement-lighter: hsl(var(--comp-hue), var(--primary-sat), 90%);
  --complement-dark: hsl(var(--comp-hue), var(--primary-sat), 30%);
  --complement-darker: hsl(var(--comp-hue), var(--primary-sat), 15%);

  /* CODE COLORS (darker in light mode for contrast, lighter in dark mode) */
  --code-primary: hsl(var(--primary-hue), 60%, 45%);
  --code-complement: hsl(var(--comp-hue), 60%, 45%);

  /* LIGHT MODE (default) */
  --bg-primary: hsl(0, 0%, 99%);
  --bg-secondary: hsl(0, 0%, 92%);
  --bg-tertiary: hsl(0, 0%, 84%);
  --text-primary: hsl(0, 0%, 12%);
  --text-secondary: hsl(0, 0%, 25%);
  --text-muted: hsl(0, 0%, 60%);
  --border: hsl(0, 0%, 80%);
  --icon-filter: brightness(0) saturate(100%) invert(20%) sepia(70%) saturate(1400%) hue-rotate(220deg) brightness(100%) contrast(105%);
  --shadow-color: rgba(0, 0, 0, 0.3);
  --hover-brightness: 1.15;

  /* ACCENTS */
  --success: hsl(120, 70%, 45%);
  --warning: hsl(45, 85%, 50%);
  --error: hsl(0, 85%, 55%);
  --info: hsl(200, 70%, 50%);
}

/* DARK MODE */
[data-theme="dark"] {
  --bg-primary: hsl(0, 0%, 5%);
  --bg-secondary: hsl(0, 0%, 9%);
  --bg-tertiary: hsl(0, 0%, 12%);
  --text-primary: hsl(0, 0%, 95%);
  --text-secondary: hsl(0, 0%, 70%);
  --text-muted: hsl(0, 0%, 50%);
  --border: hsl(0, 0%, 25%);
  --icon-filter: brightness(0) saturate(100%) invert(95%) sepia(50%) saturate(400%) hue-rotate(220deg) brightness(110%) contrast(95%);
  --shadow-color: rgba(255, 255, 255, 0.15);
  --complement: hsl(var(--comp-hue), var(--primary-sat), var(--primary-base-light));
  --primary: hsl(var(--primary-hue), var(--primary-sat), 50%);

  --code-primary: hsl(var(--primary-hue), 60%, 60%);
  --code-complement: hsl(var(--comp-hue), 60%, 60%);

  --hover-brightness: 1.15;
}

/* AUTO DARK MODE (prefers-color-scheme) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-primary: hsl(0, 0%, 5%);
    --bg-secondary: hsl(0, 0%, 9%);
    --bg-tertiary: hsl(0, 0%, 12%);
    --text-primary: hsl(0, 0%, 95%);
    --text-secondary: hsl(0, 0%, 70%);
    --text-muted: hsl(0, 0%, 50%);
    --border: hsl(0, 0%, 25%);
    --icon-filter: brightness(0) saturate(100%) invert(95%) sepia(50%) saturate(400%) hue-rotate(220deg) brightness(110%) contrast(95%);
    --shadow-color: rgba(255, 255, 255, 0.15);
    --complement: hsl(var(--comp-hue), var(--primary-sat), var(--primary-base-light));
    --primary: hsl(var(--primary-hue), var(--primary-sat), 50%);

    --code-primary: hsl(var(--primary-hue), 60%, 60%);
    --code-complement: hsl(var(--comp-hue), 60%, 60%);

    --hover-brightness: 1.15;
  }
}

/* BASE STYLES */
body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  transition: background-color 0.3s, color 0.3s;
}

a {
  color: var(--primary);
}

a:hover {
  filter: brightness(var(--hover-brightness));
}

button, input[type="submit"] {
  background-color: var(--primary);
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  cursor: pointer;
  font-weight: 600;
  transition: background-color 0.2s;
}


button.secondary {
  background-color: var(--complement);
  color: white;
}


pre {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border);
  color: var(--text-primary);
}

/*
code {
  color: var(--text-primary);
}
*/

input, textarea, select {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border);
  color: var(--text-primary);
}

input:focus, textarea:focus, select:focus {
  border-color: var(--primary);
  outline: none;
  box-shadow: 0 0 0 3px var(--primary-lighter);
}

hr {
  border-color: var(--border);
}

h2, h3 {
  color: var(--text-primary);
}

/* UTILITY CLASSES */
.bg-primary { background-color: var(--bg-primary); }
.bg-secondary { background-color: var(--bg-secondary); }
.bg-accent { background-color: var(--primary-lighter); }

.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-muted { color: var(--text-muted); }

.text-primary-color { color: var(--primary); }
.text-complement { color: var(--complement); }

.border-primary { border-color: var(--primary); }
.border-subtle { border-color: var(--border); }