/* 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 */
  --primary-hue: 260;                               /* Blurple - iOS purple */
  --comp-hue: calc(var(--primary-hue) - 60);        /* Sky blue - harmonious blue */
  --primary-sat: 85%;
  --primary-base-light: 55%;
  --comp-base-light: 40%;

  /* 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(--comp-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), var(--primary-sat), 45%);
  --code-complement: hsl(var(--comp-hue), var(--primary-sat), 45%);

  /* LIGHT MODE (default) — one hue, even steps: 99 / 94 / 91 under a 100
     card and above an 82 border, with the page at 97 (style.css) sitting
     between primary and secondary. Neutral grays next to that tinted page
     were the two families the eye kept catching. */
  --bg-primary: hsl(240, 6%, 99%);
  --bg-secondary: hsl(240, 6%, 94%);
  --bg-tertiary: hsl(240, 6%, 91%);
  --text-primary: hsl(240, 6%, 12%);
  --text-secondary: hsl(240, 5%, 26%);
  --text-muted: hsl(240, 5%, 58%);
  --border: hsl(240, 6%, 82%);
  --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"] {
  /* The same ladder as light mode, an octave down: primary is the surface
     things sit on, secondary is one step into the page, tertiary is two.
     Light steps away from primary by going darker and dark steps away by
     going lighter would flip every card on the site into a hole, so dark
     steps the same direction light does — down — and the surfaces stay
     the top of the stack.

     Tinted 240 rather than pure neutral: the light page carries that same
     faint cool cast, and a neutral black beside it reads as a different
     product. */
  --bg-primary: hsl(240, 6%, 13%);
  --bg-secondary: hsl(240, 6%, 8%);
  --bg-tertiary: hsl(240, 6%, 5%);
  --text-primary: hsl(240, 6%, 95%);
  --text-secondary: hsl(240, 5%, 72%);
  --text-muted: hsl(240, 5%, 52%);
  --border: hsl(240, 6%, 24%);
  --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), 52%);

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

  --hover-brightness: 1.15;
}

/* AUTO DARK MODE (prefers-color-scheme) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-primary: hsl(240, 6%, 13%);
    --bg-secondary: hsl(240, 6%, 8%);
    --bg-tertiary: hsl(240, 6%, 5%);
    --text-primary: hsl(240, 6%, 95%);
    --text-secondary: hsl(240, 5%, 72%);
    --text-muted: hsl(240, 5%, 52%);
    --border: hsl(240, 6%, 24%);
    --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), 52%);

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

    --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));
}

/* arland-style.css defines the real button treatment (pill radius, matching
   Arland). Kept in sync here so this file isn't a conflicting second
   opinion for anyone reading it. */
button, input[type="submit"] {
  background-color: var(--primary);
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: var(--pill-radius, 999px);
  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); }