/* ==========================================================================
   Dark theme — token overrides.
   Attribute selector [data-theme="dark"] has higher specificity than
   :root, so these values win once the theme is toggled, regardless of
   stylesheet order.
   ========================================================================== */

html[data-theme="dark"] {
    --color-bg: #000000;
    --color-bg-alt: #0b0b0d;
    --color-surface: rgba(28, 28, 30, 0.68);
    --color-surface-solid: #1c1c1e;
    --color-surface-raised: #232326;

    --color-text: #f5f5f7;
    --color-text-secondary: #98989d;
    --color-text-tertiary: #6e6e73;
    --color-on-accent: #ffffff;

    --color-accent: #0a84ff;
    --color-accent-hover: #3a9dff;
    --color-accent-active: #0a6fd6;
    --color-accent-soft: rgba(10, 132, 255, 0.16);

    --color-success: #32d74b;
    --color-danger: #ff453a;
    --color-danger-soft: rgba(255, 69, 58, 0.14);

    --color-border: rgba(255, 255, 255, 0.09);
    --color-border-strong: rgba(255, 255, 255, 0.16);
    --color-divider: rgba(255, 255, 255, 0.07);

    --color-input-bg: rgba(255, 255, 255, 0.06);
    --color-input-border: rgba(255, 255, 255, 0.12);
    --color-input-readonly-bg: rgba(255, 255, 255, 0.035);

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.45);
    --shadow-md: 0 16px 32px rgba(0, 0, 0, 0.55);
    --shadow-lg: 0 30px 70px rgba(0, 0, 0, 0.65);
    --shadow-focus: 0 0 0 4px var(--color-accent-soft);

    --bg-mesh:
        radial-gradient(circle at 10% -10%, rgba(10, 132, 255, 0.16), transparent 45%),
        radial-gradient(circle at 105% 0%, rgba(94, 92, 230, 0.14), transparent 48%),
        radial-gradient(circle at 50% 105%, rgba(10, 132, 255, 0.08), transparent 55%);

    color-scheme: dark;
}

html[data-theme="dark"] input::placeholder {
    color: var(--color-text-tertiary);
}

/* Native form widgets follow the color scheme automatically via
   color-scheme above (checkboxes fall back cleanly, date pickers etc.) */