/* Dark theme. Overrides the design-system tokens from ds.css; every component
   reads these vars, so nothing else needs to change.

   The accent ramp is NOT simply inverted: --color-accent-900 stays dark because
   it is used as a *surface* (admin sidebar, dialog backdrop), while the 700/800
   steps · used as label and link *text* · are lightened so they stay readable
   on a dark background. */

:root[data-theme="dark"] {
    --color-bg: #0f1310;
    --color-surface: #171c17;
    --color-text: #e6ebe5;
    --color-accent: #4aa96c;
    --color-accent-2: #5fb37f;
    --color-divider: #2c332b;

    --color-neutral-100: #1b201b;
    --color-neutral-200: #232823;
    --color-neutral-300: #2f352f;
    --color-neutral-400: #4a504a;
    --color-neutral-500: #6b716b;
    --color-neutral-600: #8f958f;
    --color-neutral-700: #aab0aa;
    --color-neutral-800: #c9cfc9;
    --color-neutral-900: #e6ebe5;

    /* Chip/fill steps go dark; text steps go light. */
    --color-accent-100: #172b1e;
    --color-accent-200: #1d3826;
    --color-accent-300: #a7e2bc;
    --color-accent-400: #7cc898;
    --color-accent-500: #52ab74;
    --color-accent-600: #66bd88;
    --color-accent-700: #8ed3a8;
    --color-accent-800: #b6e6c8;
    --color-accent-900: #16331f;

    --color-accent-2-100: #172b1e;
    --color-accent-2-200: #1d3826;
    --color-accent-2-300: #b2e3c4;
    --color-accent-2-400: #8cc9a2;
    --color-accent-2-500: #68ab81;
    --color-accent-2-600: #7cbd93;
    --color-accent-2-700: #9ad0ae;
    --color-accent-2-800: #bde3c9;
    --color-accent-2-900: #1a3223;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
    --shadow-md: 0 3px 12px rgba(0, 0, 0, .55);
    --shadow-lg: 0 14px 36px rgba(0, 0, 0, .65);
}

/* Primary buttons carry dark ink on the accent green in BOTH themes.
   White on --color-accent measures 3.59:1, under the 4.5:1 needed for button
   text; dark ink on the same green is 5.22:1, so the brand green is kept and
   only the label flips. This also makes the two themes agree. */
.btn-primary { color: #0f1310; }
:root[data-theme="dark"] .btn-primary:hover { background: var(--color-accent-600); border-color: var(--color-accent-600); }

/* --color-neutral-500 is a decorative grey: 2.56:1 on light bg, 3.46:1 on dark.
   Anything using it for real copy is bumped to -700 at the call site. */

/* Table header + hover need a touch more separation on dark surfaces. */
:root[data-theme="dark"] .table tbody tr:hover { background: rgba(255, 255, 255, .04); }

/* Theme toggle · fixed, unobtrusive, present on every screen except the TV. */
.theme-toggle {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 90;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-divider);
    box-shadow: var(--shadow-md);
}
.theme-toggle:hover { background: var(--color-neutral-100); }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

@media print {
    .theme-toggle { display: none; }
}