/* PLAYER.ID Shared Theme Foundation V1
   Light/dark tokens + toggle control for authenticated workspace pages
   (Developer, Academy, Coach, Parent). Not yet consumed by any live
   workspace surface — this file only introduces new, uniquely namespaced
   custom properties (--pid-theme-*) so it cannot collide with the legacy
   report tokens (--navy, --blue, --bg, ...) or the existing
   playerid-design-system.css tokens (--pid-navy, --pid-bg, ...).

   Mechanism: html[data-theme="light"] / html[data-theme="dark"].
   - Explicit user choice is persisted in localStorage ("playerid-theme")
     and applied as the data-theme attribute (see theme.controller.js).
   - With no stored choice, the OS prefers-color-scheme is followed
     automatically via the media query below - no JS required for that
     path, so there is nothing to flash before first paint.
   - An explicit data-theme attribute always wins over the OS preference,
     in both directions.

   TOKEN OWNERSHIP (Batch 2): this file owns THEME-DEPENDENT tokens only
   — surface/text/border colors, the theme-aware brand teal/navy pair,
   and the neumorphic shadow set, each redefined per data-theme.
   Structural/design tokens (static brand colors, typography, spacing,
   radius, static shadows, font weights, icon sizes, breakpoints,
   z-index) are owned by playerid-design-system.css. See that file's
   TOKEN RECONCILIATION LEDGER for how the two token families relate. */

:root {
  color-scheme: light;

  --pid-theme-app-bg: #eef1f4;
  --pid-theme-surface: #f6f8fa;
  --pid-theme-surface-raised: #f2f5f7;
  --pid-theme-surface-inset: #e6ebee;
  --pid-theme-text-primary: #102b3c;
  --pid-theme-text-secondary: #566675;
  --pid-theme-border-soft: #dde5ea;
  --pid-theme-navy: #102b3c;
  --pid-theme-teal: #13aaa6;
  --pid-theme-teal-hover: #0d8f8b;
  --pid-theme-focus-ring: 0 0 0 3px rgba(19, 170, 166, .25);
  --pid-theme-shadow-raised: 7px 7px 16px rgba(16, 43, 60, .12), -7px -7px 16px rgba(255, 255, 255, .9);
  --pid-theme-shadow-inset: inset 4px 4px 10px rgba(16, 43, 60, .10), inset -4px -4px 10px rgba(255, 255, 255, .85);
  --pid-theme-shadow-soft: 4px 4px 10px rgba(16, 43, 60, .08), -4px -4px 10px rgba(255, 255, 255, .6);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --pid-theme-app-bg: #0a1822;
    --pid-theme-surface: #10222f;
    --pid-theme-surface-raised: #142838;
    --pid-theme-surface-inset: #081420;
    --pid-theme-text-primary: #eef4f7;
    --pid-theme-text-secondary: #93a8b6;
    --pid-theme-border-soft: rgba(255, 255, 255, .09);
    --pid-theme-navy: #0a1822;
    --pid-theme-teal: #22c7bb;
    --pid-theme-teal-hover: #3fd6cb;
    --pid-theme-focus-ring: 0 0 0 3px rgba(34, 199, 187, .3);
    --pid-theme-shadow-raised: 7px 7px 16px rgba(0, 0, 0, .55), -7px -7px 16px rgba(255, 255, 255, .035);
    --pid-theme-shadow-inset: inset 4px 4px 10px rgba(0, 0, 0, .55), inset -4px -4px 10px rgba(255, 255, 255, .035);
    --pid-theme-shadow-soft: 4px 4px 10px rgba(0, 0, 0, .35), -4px -4px 10px rgba(255, 255, 255, .02);
  }
}

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

  --pid-theme-app-bg: #0a1822;
  --pid-theme-surface: #10222f;
  --pid-theme-surface-raised: #142838;
  --pid-theme-surface-inset: #081420;
  --pid-theme-text-primary: #eef4f7;
  --pid-theme-text-secondary: #93a8b6;
  --pid-theme-border-soft: rgba(255, 255, 255, .09);
  --pid-theme-navy: #0a1822;
  --pid-theme-teal: #22c7bb;
  --pid-theme-teal-hover: #3fd6cb;
  --pid-theme-focus-ring: 0 0 0 3px rgba(34, 199, 187, .3);
  --pid-theme-shadow-raised: 7px 7px 16px rgba(0, 0, 0, .55), -7px -7px 16px rgba(255, 255, 255, .035);
  --pid-theme-shadow-inset: inset 4px 4px 10px rgba(0, 0, 0, .55), inset -4px -4px 10px rgba(255, 255, 255, .035);
  --pid-theme-shadow-soft: 4px 4px 10px rgba(0, 0, 0, .35), -4px -4px 10px rgba(255, 255, 255, .02);
}

/* Reusable premium theme toggle. Progressive enhancement only - inert
   until a page includes a [data-pid-theme-toggle] button; nothing here
   is applied to any existing element.

   V2: recomposed as a neumorphic sliding switch (compact pill track +
   circular thumb) instead of a single circular icon button. Markup and
   the JS contract (button, role="switch", aria-checked, the two
   .pid-theme-icon-sun/.pid-theme-icon-moon <svg> children, aria-label
   text) are all unchanged - theme.controller.js only ever toggles
   aria-checked/aria-label and never touches internal structure, so
   this is a visual-only upgrade. The button itself is the sized hit
   target (44px min height, per the accessibility touch-target floor);
   the track and thumb are drawn with ::before/::after so the visible
   pill can stay compact without shrinking the tappable area. */
.pid-theme-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  width: 56px;
  height: 44px;
  min-width: 56px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--pid-theme-navy);
  cursor: pointer;
  transition: color .18s ease;
}
html[data-theme="dark"] .pid-theme-toggle { color: var(--pid-theme-teal); }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .pid-theme-toggle { color: var(--pid-theme-teal); }
}

/* Track */
.pid-theme-toggle::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 46px;
  height: 26px;
  border-radius: 999px;
  background: var(--pid-theme-surface-inset);
  box-shadow: var(--pid-theme-shadow-inset);
  transform: translate(-50%, -50%);
  transition: box-shadow .18s ease;
}

/* Thumb */
.pid-theme-toggle::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 50%;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--pid-theme-surface-raised);
  box-shadow: var(--pid-theme-shadow-raised);
  transform: translate(0, -50%);
  transition: transform .22s cubic-bezier(.4, 0, .2, 1), box-shadow .18s ease, background-color .18s ease;
}
html[data-theme="dark"] .pid-theme-toggle::after { transform: translate(20px, -50%); background: var(--pid-theme-teal); }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .pid-theme-toggle::after { transform: translate(20px, -50%); background: var(--pid-theme-teal); }
}

.pid-theme-toggle:hover::after { filter: brightness(1.06); }
.pid-theme-toggle:active::before { box-shadow: var(--pid-theme-shadow-inset), inset 0 0 0 1px rgba(0, 0, 0, .04); }
.pid-theme-toggle:active::after { transform: translate(0, -50%) scale(.94); }
html[data-theme="dark"] .pid-theme-toggle:active::after,
html:not([data-theme="light"]) .pid-theme-toggle:active::after { transform: translate(20px, -50%) scale(.94); }
.pid-theme-toggle:focus-visible { outline: 0; }
.pid-theme-toggle:focus-visible::before { box-shadow: var(--pid-theme-shadow-inset), var(--pid-theme-focus-ring); }

/* The thumb is light (raised surface) in light mode and solid teal in
   dark mode; a navy icon reads clearly against both, so the icon glyph
   is pinned to navy rather than following the button's own currentColor
   (which is teal in dark mode - a teal icon on a teal thumb disappears). */
.pid-theme-toggle svg {
  position: absolute;
  z-index: 1;
  top: 50%;
  width: 12px;
  height: 12px;
  fill: none;
  stroke: var(--pid-theme-navy);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: translateY(-50%);
  pointer-events: none;
}
.pid-theme-toggle .pid-theme-icon-sun { left: 13px; }
.pid-theme-toggle .pid-theme-icon-moon { left: 33px; }

/* Icon swap: markup includes both icons; CSS shows the one matching the
   *current* mode (sun sits in the thumb in light mode - dark mode shows
   the moon, also riding in the thumb at its slid-right position). */
.pid-theme-toggle .pid-theme-icon-moon { display: none; }
html[data-theme="dark"] .pid-theme-toggle .pid-theme-icon-sun { display: none; }
html[data-theme="dark"] .pid-theme-toggle .pid-theme-icon-moon { display: block; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .pid-theme-toggle .pid-theme-icon-sun { display: none; }
  html:not([data-theme="light"]) .pid-theme-toggle .pid-theme-icon-moon { display: block; }
}

/* Compact variant for a tighter workspace header/drawer. The button
   keeps the 44px touch target; only the visible track/thumb shrink. */
.pid-theme-toggle--compact::before { width: 40px; height: 22px; }
.pid-theme-toggle--compact::after { width: 16px; height: 16px; left: 6px; }
html[data-theme="dark"] .pid-theme-toggle--compact::after { transform: translate(18px, -50%); }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .pid-theme-toggle--compact::after { transform: translate(18px, -50%); }
}
.pid-theme-toggle--compact svg { width: 10px; height: 10px; }
.pid-theme-toggle--compact .pid-theme-icon-sun { left: 10px; }
.pid-theme-toggle--compact .pid-theme-icon-moon { left: 28px; }

@media (prefers-reduced-motion: reduce) {
  .pid-theme-toggle::after { transition: none; }
  .pid-theme-toggle:hover::after { filter: none; }
  .pid-theme-toggle:active::after { transform: translate(0, -50%); }
  html[data-theme="dark"] .pid-theme-toggle:active::after { transform: translate(20px, -50%); }
  @media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .pid-theme-toggle:active::after { transform: translate(20px, -50%); }
  }
}