/* ==========================================================================
   Wace shared theme — the single source of truth for colour in the app.

   Every page loads this file and nothing else defines colour tokens. Each
   token is declared exactly once using CSS `light-dark()`, so there is no
   light copy and a dark copy to keep in sync:

     :root                 -> follows the OS (prefers-color-scheme)
     [data-theme="light"]  -> forced light
     [data-theme="dark"]   -> forced dark

   `data-theme` is written by theme.js before the first paint, so there is no
   flash of the wrong theme, and it is updated live whenever the OS changes or
   the user flips the toggle.

   Orange accents are shared by both modes: the hue never changes, only the
   tinted surfaces drawn around it.
   ========================================================================== */

:root {
  color-scheme: light dark;

  /* ---- Surfaces ---- */
  --bg: light-dark(#ffffff, #18181b);
  --panel: light-dark(#ffffff, #27272a);
  --panel-2: light-dark(#f4f4f5, #3f3f46);
  --panel-3: light-dark(#fafafa, #1f1f23);
  --topbar-bg: light-dark(rgba(255, 255, 255, 0.92), rgba(24, 24, 27, 0.82));

  /* ---- Text ---- */
  --text: light-dark(#18181b, #fafafa);
  --text-soft: light-dark(#3f3f46, #e4e4e7);
  --muted: light-dark(#71717a, #a1a1aa);

  /* ---- Lines ---- */
  --border: light-dark(#e4e4e7, #3f3f46);
  --border-strong: light-dark(#d4d4d8, #52525b);

  /* ---- Accent: orange. The same hue in both modes. ----
     --accent        fills, icons, borders  (identical in both modes)
     --accent-strong solid fill under white text
     --accent-hover  hover fill under white text
     --accent-text   accent-coloured text on a normal surface
     --accent-on-tint accent-coloured text on an --accent-soft surface */
  --accent: #ea580c;
  --accent-strong: #c2410c;
  --accent-hover: #9a3412;
  --accent-text: light-dark(#c2410c, #fb923c);
  --accent-on-tint: light-dark(#9a3412, #fdba74);
  --accent-soft: light-dark(#fff7ed, #431407);
  --accent-soft-2: light-dark(#ffedd5, #7c2d12);
  --accent-line: light-dark(#fed7aa, #9a3412);
  --on-accent: #ffffff;
  --focus-ring: 0 0 0 3px light-dark(rgba(234, 88, 12, 0.22), rgba(234, 88, 12, 0.35));

  /* ---- Status. Foreground tones brighten on dark so they stay legible on
         their own tinted surfaces; the tint itself stays subtle. ---- */
  --agent: light-dark(#16a34a, #4ade80);
  --warning: light-dark(#b45309, #fbbf24);
  --warning-soft: light-dark(#fffbeb, #422006);
  --warning-line: light-dark(#fde68a, #92400e);
  --success: light-dark(#15803d, #4ade80);
  --success-soft: light-dark(#f0fdf4, #052e16);
  --success-line: light-dark(#bbf7d0, #166534);
  --danger: light-dark(#b91c1c, #f87171);
  --danger-soft: light-dark(#fef2f2, #450a0a);
  --danger-line: light-dark(#fecaca, #991b1b);

  /* ---- Depth ---- */
  --shadow-xs: 0 1px 2px light-dark(rgba(24, 24, 27, 0.05), rgba(0, 0, 0, 0.45));
  --shadow-sm: 0 1px 3px light-dark(rgba(24, 24, 27, 0.07), rgba(0, 0, 0, 0.55)),
    0 1px 2px light-dark(rgba(24, 24, 27, 0.04), rgba(0, 0, 0, 0.4));
  --shadow-lg: 0 24px 56px light-dark(rgba(24, 24, 27, 0.18), rgba(0, 0, 0, 0.65));

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;

  /* Shared typography values sourced from the Profile page. */
  --type-font-family: "Inter", system-ui, sans-serif;
  --type-body-size: 14px;
  --type-body-line-height: 1.5;
  --type-page-title-size: 20px;
  --type-page-title-weight: 600;
  --type-page-title-line-height: 1.2;
  --type-page-title-letter-spacing: -0.025em;
  --type-section-title-size: 14px;
  --type-section-title-weight: 600;
  --type-label-size: 11px;
  --type-label-weight: 600;
  --type-label-letter-spacing: 0.08em;
  --type-primary-size: 13px;
  --type-primary-weight: 500;
  --type-secondary-size: 12.5px;
  --type-secondary-weight: 500;
  --type-control-size: 12.5px;
  --type-control-weight: 600;
}

/* The resolved theme decides the used colour scheme, which in turn drives
   every light-dark() token above. */
html[data-theme="light"] {
  color-scheme: light;
}

html[data-theme="dark"] {
  color-scheme: dark;
}

html {
  background: var(--bg);
}

body {
  background: var(--bg);
  color: var(--text);
}

/* ==========================================================================
   Shared theme toggle. Every page renders the same control, so it is styled
   here rather than repeated per page.
   ========================================================================== */

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--text-soft);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.theme-toggle:hover {
  background: var(--panel-2);
  color: var(--text);
}

.theme-toggle:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.theme-toggle svg {
  display: block;
  width: 18px;
  height: 18px;
}

/* Show the icon for the mode you would switch *to*, matching the button's
   accessible label ("Switch to dark mode" while in light mode). */
.theme-toggle .theme-icon-sun {
  display: none;
}

html[data-theme="dark"] .theme-toggle .theme-icon-moon {
  display: none;
}

html[data-theme="dark"] .theme-toggle .theme-icon-sun {
  display: block;
}

/* Fallback for the rare case where the theme script has not run yet. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .theme-toggle .theme-icon-moon {
    display: none;
  }

  :root:not([data-theme]) .theme-toggle .theme-icon-sun {
    display: block;
  }
}

/* ==========================================================================
   Shared utility: visually hidden, still announced by screen readers.
   ========================================================================== */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}