/* FAP CSS — Theme Overrides
 * Custom theme for FAP CSS.
 *
 * Usage:
 *   <link rel="stylesheet" href="fap.min.css">
 *   <link rel="stylesheet" href="fap.themes.css">
 *
 * How it works:
 *   FAP CSS ships with sensible defaults baked into the framework.
 *   This file overrides any of the 10 design tokens to create your theme.
 *   Dark mode variants swap automatically via @media or [data-theme].
 *
 * Tokens reference:
 *   Surface (controls overall page look):
 *     --fap-hue              Base hue for primary color derivation
 *     --fap-color-primary    Brand / accent / links / primary buttons
 *     --fap-color-bg         Page background
 *     --fap-color-text       Body text
 *     --fap-color-muted      Secondary text, placeholders
 *     --fap-color-border     Borders, separators, subtle backgrounds
 *
 *   Semantic (controls interactive & state colors):
 *     --fap-color-success         Valid inputs, <ins>, meter optimum
 *     --fap-color-warning         <mark>, meter sub-optimum
 *     --fap-color-danger          Invalid inputs, <del>, reset buttons, meter critical
 *     --fap-color-secondary       Secondary buttons, muted interactive elements
 *     --fap-color-primary-inverse Text on primary-colored backgrounds (buttons)
 *
 *   Derived (auto-calculated, override only if needed):
 *     --fap-color-primary-hover   Darkened primary for hover states
 *     --fap-color-primary-focus   Transparent primary for focus rings
 *     --fap-color-selection       Transparent primary for ::selection
 *     --fap-color-code-bg         Blended border+bg for code blocks
 *     --fap-color-danger-hover    Darkened danger for hover states
 *     --fap-color-secondary-hover Darkened secondary for hover states
 */

/* ═══════════════════════════════════════════════════════════════════════
 * Active Theme — edit the values below to brand your site.
 * Tip: changing just --fap-hue shifts primary, focus, and selection.
 * ═══════════════════════════════════════════════════════════════════════ */

/* ── Light mode ─────────────────────────────────────────────────────── */
:root {
  --fap-hue:                   209;
  --fap-color-primary:         hsl(var(--fap-hue) 98% 36%);
  --fap-color-bg:              hsl(0 0% 100%);
  --fap-color-text:            hsl(220 10% 22%);
  --fap-color-muted:           hsl(220 8% 44%);
  --fap-color-border:          hsl(220 13% 87%);

  --fap-color-success:         hsl(162 55% 40%);
  --fap-color-warning:         hsl(40 95% 50%);
  --fap-color-danger:          hsl(0 70% 50%);
  --fap-color-secondary:       hsl(220 8% 46%);
  --fap-color-primary-inverse: hsl(0 0% 100%);
}

/* ── Dark mode ──────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --fap-color-primary:         hsl(var(--fap-hue) 98% 58%);
    --fap-color-bg:              hsl(220 16% 10%);
    --fap-color-text:            hsl(220 10% 78%);
    --fap-color-muted:           hsl(220 8% 52%);
    --fap-color-border:          hsl(220 13% 18%);

    --fap-color-success:         hsl(162 45% 55%);
    --fap-color-warning:         hsl(40 85% 55%);
    --fap-color-danger:          hsl(0 65% 60%);
    --fap-color-secondary:       hsl(220 8% 62%);
    --fap-color-primary-inverse: hsl(220 16% 10%);
  }
}

/* ── Manual theme overrides (data-theme attribute) ──────────────────── */
[data-theme="light"] {
  color-scheme: light;
  --fap-hue:                   209;
  --fap-color-primary:         hsl(var(--fap-hue) 98% 36%);
  --fap-color-bg:              hsl(0 0% 100%);
  --fap-color-text:            hsl(220 10% 22%);
  --fap-color-muted:           hsl(220 8% 44%);
  --fap-color-border:          hsl(220 13% 87%);

  --fap-color-success:         hsl(162 55% 40%);
  --fap-color-warning:         hsl(40 95% 50%);
  --fap-color-danger:          hsl(0 70% 50%);
  --fap-color-secondary:       hsl(220 8% 46%);
  --fap-color-primary-inverse: hsl(0 0% 100%);
}

[data-theme="dark"] {
  color-scheme: dark;
  --fap-color-primary:         hsl(var(--fap-hue) 98% 58%);
  --fap-color-bg:              hsl(220 16% 10%);
  --fap-color-text:            hsl(220 10% 78%);
  --fap-color-muted:           hsl(220 8% 52%);
  --fap-color-border:          hsl(220 13% 18%);

  --fap-color-success:         hsl(162 45% 55%);
  --fap-color-warning:         hsl(40 85% 55%);
  --fap-color-danger:          hsl(0 65% 60%);
  --fap-color-secondary:       hsl(220 8% 62%);
  --fap-color-primary-inverse: hsl(220 16% 10%);
}

/* ═══════════════════════════════════════════════════════════════════════
 * Example themes — uncomment one to try it, or use as a starting point.
 * ═══════════════════════════════════════════════════════════════════════ */

/* ── Ocean ─── teal brand, warm accents ─────────────────────────────── */
/*
:root {
  --fap-hue: 180;
  --fap-color-primary:         hsl(180 65% 38%);
  --fap-color-bg:              hsl(180 10% 98%);
  --fap-color-text:            hsl(200 15% 18%);
  --fap-color-muted:           hsl(200 8% 48%);
  --fap-color-border:          hsl(180 12% 85%);
  --fap-color-success:         hsl(155 50% 38%);
  --fap-color-warning:         hsl(35 90% 50%);
  --fap-color-danger:          hsl(355 65% 48%);
  --fap-color-secondary:       hsl(200 10% 50%);
  --fap-color-primary-inverse: hsl(0 0% 100%);
}
@media (prefers-color-scheme: dark) {
  :root {
    --fap-color-primary:         hsl(180 65% 55%);
    --fap-color-bg:              hsl(200 20% 9%);
    --fap-color-text:            hsl(180 10% 80%);
    --fap-color-muted:           hsl(200 8% 55%);
    --fap-color-border:          hsl(200 15% 16%);
    --fap-color-success:         hsl(155 42% 52%);
    --fap-color-warning:         hsl(35 80% 55%);
    --fap-color-danger:          hsl(355 55% 58%);
    --fap-color-secondary:       hsl(200 10% 60%);
    --fap-color-primary-inverse: hsl(0 0% 100%);
  }
}
[data-theme="light"] {
  color-scheme: light;
  --fap-hue: 180;
  --fap-color-primary:         hsl(180 65% 38%);
  --fap-color-bg:              hsl(180 10% 98%);
  --fap-color-text:            hsl(200 15% 18%);
  --fap-color-muted:           hsl(200 8% 48%);
  --fap-color-border:          hsl(180 12% 85%);
  --fap-color-success:         hsl(155 50% 38%);
  --fap-color-warning:         hsl(35 90% 50%);
  --fap-color-danger:          hsl(355 65% 48%);
  --fap-color-secondary:       hsl(200 10% 50%);
  --fap-color-primary-inverse: hsl(0 0% 100%);
}
[data-theme="dark"] {
  color-scheme: dark;
  --fap-color-primary:         hsl(180 65% 55%);
  --fap-color-bg:              hsl(200 20% 9%);
  --fap-color-text:            hsl(180 10% 80%);
  --fap-color-muted:           hsl(200 8% 55%);
  --fap-color-border:          hsl(200 15% 16%);
  --fap-color-success:         hsl(155 42% 52%);
  --fap-color-warning:         hsl(35 80% 55%);
  --fap-color-danger:          hsl(355 55% 58%);
  --fap-color-secondary:       hsl(200 10% 60%);
  --fap-color-primary-inverse: hsl(0 0% 100%);
}
*/

/* ── Rose ─── pink brand, earthy accents ────────────────────────────── */
/*
:root {
  --fap-hue: 340;
  --fap-color-primary:         hsl(340 75% 45%);
  --fap-color-bg:              hsl(340 20% 98%);
  --fap-color-text:            hsl(340 10% 18%);
  --fap-color-muted:           hsl(340 6% 46%);
  --fap-color-border:          hsl(340 12% 88%);
  --fap-color-success:         hsl(150 50% 38%);
  --fap-color-warning:         hsl(30 90% 50%);
  --fap-color-danger:          hsl(0 70% 50%);
  --fap-color-secondary:       hsl(340 8% 50%);
  --fap-color-primary-inverse: hsl(0 0% 100%);
}
@media (prefers-color-scheme: dark) {
  :root {
    --fap-color-primary:         hsl(340 75% 60%);
    --fap-color-bg:              hsl(340 15% 10%);
    --fap-color-text:            hsl(340 10% 80%);
    --fap-color-muted:           hsl(340 6% 55%);
    --fap-color-border:          hsl(340 12% 18%);
    --fap-color-success:         hsl(150 42% 52%);
    --fap-color-warning:         hsl(30 80% 55%);
    --fap-color-danger:          hsl(0 60% 60%);
    --fap-color-secondary:       hsl(340 8% 62%);
    --fap-color-primary-inverse: hsl(0 0% 100%);
  }
}
[data-theme="light"] {
  color-scheme: light;
  --fap-hue: 340;
  --fap-color-primary:         hsl(340 75% 45%);
  --fap-color-bg:              hsl(340 20% 98%);
  --fap-color-text:            hsl(340 10% 18%);
  --fap-color-muted:           hsl(340 6% 46%);
  --fap-color-border:          hsl(340 12% 88%);
  --fap-color-success:         hsl(150 50% 38%);
  --fap-color-warning:         hsl(30 90% 50%);
  --fap-color-danger:          hsl(0 70% 50%);
  --fap-color-secondary:       hsl(340 8% 50%);
  --fap-color-primary-inverse: hsl(0 0% 100%);
}
[data-theme="dark"] {
  color-scheme: dark;
  --fap-color-primary:         hsl(340 75% 60%);
  --fap-color-bg:              hsl(340 15% 10%);
  --fap-color-text:            hsl(340 10% 80%);
  --fap-color-muted:           hsl(340 6% 55%);
  --fap-color-border:          hsl(340 12% 18%);
  --fap-color-success:         hsl(150 42% 52%);
  --fap-color-warning:         hsl(30 80% 55%);
  --fap-color-danger:          hsl(0 60% 60%);
  --fap-color-secondary:       hsl(340 8% 62%);
  --fap-color-primary-inverse: hsl(0 0% 100%);
}
*/

/* ── Quick hue shift ─── just one line to rebrand ───────────────────── */
/* :root { --fap-hue: 260; } */