/* public/css/style.css – v0.15 • full polished CSS with theming & micro-states (generalizable)
   Keyboard focus outlines use the accent colour; tweak in :root for brand theming. */

@import '../components/card/card.css';
@import '../components/skeleton/skeleton.css';
@import '../components/badge/badge.css';
@import '../components/filters/filters.css';
@import '../components/buttons/buttons.css';
@import '../components/modal/modal.css';
@import '../components/update-toast/update-toast.css';
@import '../components/checklist/checklist.css';

/* ─── Site-level theming (update these two values manually per domain) ──────────────────────────── */
:root {
  --clr-bg: #f8f8f8;
  --clr-fg: #0c0c0d;
  /* SITE PRIMARY COLOR: e.g. #006d77 */
  --color-accent: #0b7285;
  /* SITE SUBTLE COLOR: e.g. #b2dfdb */
  --color-accent-subtle: #b2dfdb;
  /* Derived accent shades */
  --color-accent-light: color-mix(in srgb, var(--color-accent) 85%, #fff);
  --color-accent-dark: color-mix(in srgb, var(--color-accent) 70%, #000);
  --color-accent-contrast: #fff;

  /* Status colors (static) */
  --clr-error: #e63946;
  --clr-success: #2a9d8f;
  --clr-warning: #f4a261;
  --clr-info: #457b9d;

  /* Surface shades */
  --surface-base: color-mix(in srgb, var(--clr-bg) 90%, var(--color-accent-subtle));
  --surface-hover: color-mix(in srgb, var(--surface-base) 92%, var(--clr-fg));
  --surface-pressed: color-mix(in srgb, var(--surface-base) 82%, var(--clr-fg));
  --surface-layer-1: color-mix(in srgb, var(--clr-bg) 95%, var(--color-accent-subtle));
  --surface-layer-2: color-mix(in srgb, var(--clr-bg) 85%, var(--color-accent-subtle));
  --surface-layer-3: color-mix(in srgb, var(--clr-bg) 75%, var(--color-accent-subtle));
  --grid-min: 280px;

  /* Typography */
  --fs-100: clamp(0.9rem, 0.85rem + 0.2vw, 1rem);
  --fs-200: clamp(1rem, 1rem + 0.4vw, 1.25rem);
  --fs-400: clamp(1.25rem, 1.2rem + 0.8vw, 1.75rem);

  /* Spacing & radius */
  --gap: 1rem;
  --radius-card: 0.75rem;
  --radius-modal: 0.5rem;
  --radius-small: 0.25rem;
  --neutral-200: color-mix(in srgb, var(--clr-fg) 15%, var(--clr-bg));

  /* Motion & layering */
  --dur-fast: 120ms;
  --dur-med: 240ms;
  --easing-standard: cubic-bezier(0.4,0,0.2,1);
  --clr-shadow: rgb(0 0 0 / 0.15);
  --clr-shadow-hi: rgb(0 0 0 / 0.25);
  --z-modal: 1000;
  --z-toast: 1100;

  /* JS-driven tokens */
  --_elev-rest: 4px;
  --_elev-hover: 8px;
  --_elev-active: 2px;

  /* Theme animation hook */
  --theme-hue-shift: 0deg;
}

/* Dark-mode overrides (invert above values) */
@media (prefers-color-scheme: dark) {
  :root {
    --clr-bg: #0c0c0d;
    --clr-fg: #e6e6e6;
    /* In dark mode, swap primary/subtle manually if desired */
    --color-accent: #b2dfdb;
    --color-accent-subtle: #0b7285;
    --color-accent-light: color-mix(in srgb, var(--color-accent) 70%, #fff);
    --color-accent-dark: color-mix(in srgb, var(--color-accent) 85%, #000);
    --color-accent-contrast: #000;
    --surface-base: var(--color-accent-subtle);
    --surface-hover: color-mix(in srgb, var(--surface-base) 85%, #fff);
    --surface-pressed: color-mix(in srgb, var(--surface-base) 75%, #fff);
    --surface-layer-1: color-mix(in srgb, var(--color-accent-subtle) 90%, var(--clr-bg));
    --surface-layer-2: color-mix(in srgb, var(--color-accent-subtle) 80%, var(--clr-bg));
    --surface-layer-3: color-mix(in srgb, var(--color-accent-subtle) 70%, var(--clr-bg));
  }
}

@media (min-width: 45rem) and (orientation: landscape) {
  :root { --grid-min: 320px; }
}

@media (prefers-contrast: more) {
  :root {
    --surface-base: color-mix(in srgb, var(--clr-bg) 80%, var(--color-accent-subtle));
  }
}

@media (prefers-color-scheme: dark) and (prefers-contrast: more) {
  :root {
    --surface-base: color-mix(in srgb, var(--color-accent-subtle) 85%, var(--clr-bg));
  }
}

/* Theme classes for drag/drop context */
.theme-primary   {}
.theme-secondary { --color-accent: #8338ec; --color-accent-subtle: #a278f1; }
.theme-neutral   { --color-accent: #5c677d; --color-accent-subtle: #98a1b3; }

/* Context modifiers */
.card[data-context="modal"] {
  width: 100%;
  margin-block: var(--gap);
}
.card[data-context="inline"] {
  margin-block: var(--gap);
}

[data-theme-shift] { filter: hue-rotate(var(--theme-hue-shift)); }

/* Reset & base */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, sans-serif;
  background: var(--clr-bg);
  color: var(--clr-fg);
  line-height: 1.5;
  overflow-x: hidden;
}

/* Header & nav */
.site-header {
  container-type: inline-size;
  container-name: header;
  padding: var(--gap);
  background: var(--color-accent);
  color: var(--clr-bg);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.a11y-toggles button {
  margin-left: 0.5rem;
  padding: 0.25em 0.5em;
  border: none;
  border-radius: var(--radius-small);
  background: var(--clr-bg);
  color: var(--color-accent);
  cursor: pointer;
}

.mobile-toggle {
  display: none;
  background: none;
  border: none;
  color: inherit;
  font-size: 1.5rem;
}

@container header (max-width: 420px) {
  .site-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .site-header .primary-nav ul {
    padding-left: 0;
    margin: 0;
    display: flex;
    gap: 0.5rem;
  }
}
.primary-nav a {
  color: inherit;
  font-weight: 600;
  text-decoration: none;
  padding: 0.25em 0.5em;
}
.primary-nav a:hover {
  background: var(--color-accent-light);
  border-radius: var(--radius-small);
}
.primary-nav a:focus-visible {
  outline: 2px dashed var(--clr-bg);
  outline-offset: 4px;
}
@media (max-width: 480px) {
  .site-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .primary-nav { margin-top: calc(var(--gap) / 2); }
}


/* Grid layout */
.grid {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(var(--grid-min), 1fr));
  padding: var(--gap);
}

@media (max-width: 768px) {
  .grid {
    grid-template-columns: 1fr;
  }
  .site-header .primary-nav {
    display: none;
  }
  .site-header .primary-nav.open {
    display: block;
    margin-top: var(--gap);
  }
  .mobile-toggle {
    display: block;
  }
}


/* Component styles moved to top via @import */

/* Accessibility helpers */
.visually-hidden { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link {
  position: absolute;
  top: -40px;
  left: var(--gap);
  padding: 0.5em 1em;
  background: var(--color-accent);
  color: var(--clr-bg);
  border-radius: 0.25rem;
  transition: top var(--dur-fast) var(--easing-standard);
}
.skip-link:focus-visible {
  top: var(--gap);
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0ms !important;
    animation-duration: 0ms !important;
    scroll-behavior: auto !important;
  }
}

/* Utility helpers */
.sr-only { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hidden  { display: none !important; }
.grid-2  { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap); }
.mt-2    { margin-top: var(--gap); }

/* Accessibility theme modes
   Toggle via `data-contrast` and `data-font` on the <html> element.
   JS (see Theme.toggleHighContrast / toggleDyslexicFont) persists the choice. */
[data-contrast="high"] {
  --clr-bg: #000000;
  --clr-fg: #ffffff;
  --color-accent: #ffff00;
  --color-accent-subtle: #444444;
}

[data-font="dyslexic"] {
  font-family: 'OpenDyslexic', 'Arial', sans-serif;
}