/**
 * Design Tokens — single source of truth for the app's visual language.
 *
 * Values are EXTRACTED from the dominant existing colors/sizes so adopting these
 * variables is visually a no-op. Do not invent new values here; when a page needs
 * a color/size, map it to the closest token below instead of hardcoding.
 *
 * Loaded first (before every other stylesheet) via includes/html-head.php.
 */

:root {
    /* Brand / primary */
    --color-primary: #007bff;
    --color-primary-hover: #0056b3;
    --color-primary-soft: #e7f3ff;      /* active filter / subtle highlight */
    --color-focus-ring: rgba(0, 123, 255, 0.2);

    /* Dark surfaces (side menu, table action buttons, report headers) */
    --color-surface-dark: #34495e;
    --color-surface-dark-hover: #2c3e50;

    /* Text */
    --color-text: #2c3e50;
    --color-text-muted: #6c757d;
    --color-text-invert: #ffffff;

    /* Neutrals / backgrounds */
    --color-bg: #f5f7fa;
    --color-surface: #ffffff;
    --color-surface-muted: #f8f9fa;      /* table header, bar background */
    --color-border: #e9ecef;
    --color-border-strong: #dee2e6;

    /* Status */
    --color-success: #28a745;
    --color-success-hover: #218838;
    --color-danger: #dc3545;
    --color-danger-hover: #c82333;
    --color-warning: #ffc107;
    --color-warning-soft: #fff8e1;   /* tinted background for warning-toned chips */
    --color-info: #17a2b8;
    --color-info-hover: #138496;

    /* Status message blocks (matches styles.css .message) */
    --color-success-bg: #d4edda;
    --color-success-border: #c3e6cb;
    --color-success-text: #155724;
    --color-danger-bg: #f8d7da;
    --color-danger-border: #f5c6cb;
    --color-danger-text: #721c24;

    /* Radius */
    --radius-card: 12px;
    --radius-bar: 16px;
    --radius-control: 10px;
    --radius-sm: 8px;
    --radius-pill: 999px;

    /* Shadow */
    --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.08);
    --shadow-soft: 0 2px 15px rgba(0, 0, 0, 0.08);
    --shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.3);

    /* Spacing scale */
    --space-xs: 6px;
    --space-sm: 12px;
    --space-md: 20px;
    --space-lg: 25px;

    /* Typography */
    --font: "Assistant", sans-serif;

    /* Layering (§5.5 — hamburger must never paint over a modal) */
    --z-menu-overlay: 890;   /* scrim behind the drawer */
    --z-side-menu: 900;
    --z-menu-toggle: 901;    /* hamburger — below the modal overlay (1000) */
    --z-modal-overlay: 1000;
    --z-toast: 1100;

    /* Motion */
    --transition-fast: 0.2s ease;
    --transition: 0.3s ease;
}