/*
 * SANITBOX design tokens
 * -----------------------
 * Central set of CSS custom properties (colors, spacing, typography,
 * radius, shadows) used by SANITBOX-specific templates.
 *
 * This file only declares `:root` custom properties - it intentionally
 * does not style any element or class directly, so it is always safe to
 * load anywhere in the page without affecting existing WebODM layout.
 *
 * Components opt into these tokens explicitly (see sanitbox-auth.css).
 * This keeps the tokens compatible with the existing admin-configurable
 * theming system (see app/templates/app/theme.css and the Setting model):
 * admin theme colors are applied to generic Bootstrap classes
 * (.btn-primary, .alert, .form-control, ...) and are loaded after this
 * file, so they continue to take precedence wherever they apply.
 *
 * Palette rationale: a bright blue-and-white identity (no green, no dark
 * theme), anchored to SANITBOX's original brand colors (#1a3b5d text,
 * #f4f7fb -> #dbe7f9 background gradient, as used on the original About
 * page). Contrast verified against WCAG AA (>= 4.5:1) for body text at
 * the sizes used below. --sb-muted is the one color intended only for
 * secondary/help text, never for essential content. --sb-border is a
 * visual divider only (not text), so it is intentionally lower-contrast.
 */
:root {
    /* Color palette */
    --sb-primary: #1360a6;
    --sb-primary-dark: #0d4a80;
    --sb-primary-soft: rgba(19, 96, 166, 0.08);
    --sb-secondary: #1f6fae;
    --sb-secondary-dark: #175583;
    --sb-accent: #4fb3e8;
    --sb-accent-dark: #2e93cc;

    --sb-bg: #f4f7fb;
    --sb-bg-gradient-start: #f4f7fb;
    --sb-bg-gradient-end: #dbe7f9;
    --sb-card: #ffffff;
    --sb-text: #1a3b5d;
    --sb-muted: #4f6b85;
    --sb-border: #c5d6ea;

    /* Status colors - text-safe (>= 4.5:1 on white) plus a matching
       soft background for banners/alerts */
    --sb-success: #1b7f4d;
    --sb-success-bg: #e8f6ee;
    --sb-warning: #92610b;
    --sb-warning-bg: #fdf3dc;
    --sb-danger: #b91c1c;
    --sb-danger-bg: #fbe9e9;
    --sb-info: #1360a6;
    --sb-info-bg: #e7f0f8;

    /* Spacing scale */
    --sb-space-xs: 4px;
    --sb-space-sm: 8px;
    --sb-space-md: 16px;
    --sb-space-lg: 24px;
    --sb-space-xl: 40px;

    /* Typography */
    --sb-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --sb-font-size-base: 14px;
    --sb-font-size-sm: 12px;
    --sb-font-size-lg: 18px;
    --sb-font-size-h1: 26px;
    --sb-line-height: 1.5;

    /* Shape */
    --sb-radius: 16px;
    --sb-radius-sm: 8px;
    --sb-radius-pill: 999px;

    /* Elevation */
    --sb-shadow: 0 10px 30px rgba(19, 96, 166, 0.10);
    --sb-shadow-sm: 0 2px 8px rgba(19, 96, 166, 0.08);

    /* Motion */
    --sb-transition: 150ms ease-in-out;
}