/* =========================================================================
   SimplyOnSite Design System  (--sos-* tokens)
   -------------------------------------------------------------------------
   The single source of truth for app-level spacing, radius, elevation,
   semantic status colors, the theme-tracking accent, the avatar palette,
   and safe-area insets. Everything here is built ON TOP of the DevExpress
   Fluent --dxds-* tokens so it tracks the active theme + light/dark mode.

   RULES (see CLAUDE.md):
   - Only reference --dxds-* tokens that are DEFINED in
     devexpress.blazor.themes.fluent/<ver>/staticwebassets/modes/light.min.css
     (all tokens used below were audited as defined in 25.2.7).
   - Never use --bs-* or invented --dxds tokens. A bogus token inside
     color-mix(... transparent) renders fully transparent (invisible).
   - This file is linked in App.razor immediately ABOVE app.css.
   ========================================================================= */

:root {
    /* ---- Spacing scale ---- */
    --sos-space-3xs: 0.125rem;
    --sos-space-2xs: 0.25rem;
    --sos-space-xs: 0.375rem;
    --sos-space-sm: 0.5rem;
    --sos-space-md: 0.75rem;
    --sos-space-lg: 1rem;
    --sos-space-xl: 1.25rem;
    --sos-space-2xl: 1.5rem;
    --sos-space-3xl: 2rem;

    /* ---- Border-radius scale ---- */
    --sos-radius-sm: 4px;
    --sos-radius-md: 6px;
    --sos-radius-lg: 8px;
    --sos-radius-xl: 12px;
    --sos-radius-pill: 999px;
    --sos-radius-circle: 50%;

    /* ---- Elevation / shadow scale (mode-agnostic, rgba-on-black) ---- */
    --sos-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12);
    --sos-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08);
    --sos-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);
    --sos-shadow-sheet-up: 0 -4px 20px rgba(0, 0, 0, 0.18);

    /* ---- Theme-tracking accent (pure CSS; replaces hardcoded #0078D4) ---- */
    --sos-accent: var(--dxds-color-surface-primary-default-rest);
    --sos-accent-deep: var(--dxds-color-surface-primary-default-active);
    --sos-accent-soft: var(--dxds-color-surface-primary-subdued-rest);
    --sos-on-accent: var(--dxds-color-content-neutral-default-static-dark-rest);

    /* ---- Focus ring (keyboard a11y) ---- */
    --sos-focus-ring: 0 0 0 2px var(--dxds-color-surface-primary-default-rest);

    /* ---- Semantic status map ----
       Each status exposes:  -surface (subtle bg) / -content (text+icon) / -solid (filled bg).
       'draft' aliases neutral. White text on a -solid surface uses --sos-on-accent. */

    /* success */
    --sos-status-success-surface: var(--dxds-color-surface-success-subdued-rest);
    --sos-status-success-content: var(--dxds-color-content-success-default-rest);
    --sos-status-success-solid: var(--dxds-color-surface-success-default-rest);

    /* warning */
    --sos-status-warning-surface: var(--dxds-color-surface-warning-subdued-rest);
    --sos-status-warning-content: var(--dxds-color-content-warning-default-rest);
    --sos-status-warning-solid: var(--dxds-color-surface-warning-default-rest);

    /* danger */
    --sos-status-danger-surface: var(--dxds-color-surface-danger-subdued-rest);
    --sos-status-danger-content: var(--dxds-color-content-danger-default-rest);
    --sos-status-danger-solid: var(--dxds-color-surface-danger-default-rest);

    /* info */
    --sos-status-info-surface: var(--dxds-color-surface-info-subdued-rest);
    --sos-status-info-content: var(--dxds-color-content-info-default-rest);
    --sos-status-info-solid: var(--dxds-color-surface-info-default-rest);

    /* neutral (and draft alias) */
    --sos-status-neutral-surface: var(--dxds-color-surface-neutral-subdued-rest);
    --sos-status-neutral-content: var(--dxds-color-content-secondary-default-rest);
    --sos-status-neutral-solid: var(--dxds-color-surface-neutral-default-hovered);
    --sos-status-draft-surface: var(--dxds-color-surface-neutral-subdued-rest);
    --sos-status-draft-content: var(--dxds-color-content-secondary-default-rest);
    --sos-status-draft-solid: var(--dxds-color-surface-neutral-default-hovered);

    /* primary / accent */
    --sos-status-primary-surface: var(--dxds-color-surface-primary-subdued-rest);
    --sos-status-primary-content: var(--dxds-color-content-primary-default-rest);
    --sos-status-primary-solid: var(--dxds-color-surface-primary-default-rest);

    /* ---- Avatar palette (centralized; the canonical 8 values, one place) ---- */
    --sos-avatar-1: #4A90D9;
    --sos-avatar-2: #7B68EE;
    --sos-avatar-3: #5BB5A2;
    --sos-avatar-4: #E8834D;
    --sos-avatar-5: #C75C8E;
    --sos-avatar-6: #6AAF3D;
    --sos-avatar-7: #D4822A;
    --sos-avatar-8: #4A7FB5;

    /* ---- Safe-area insets (notched devices; needs viewport-fit=cover) ---- */
    --sos-safe-top: env(safe-area-inset-top, 0px);
    --sos-safe-bottom: env(safe-area-inset-bottom, 0px);
    --sos-safe-left: env(safe-area-inset-left, 0px);
    --sos-safe-right: env(safe-area-inset-right, 0px);
}