/**

 * SayWOW Design Tokens

 * Brand Design System v2.0 — CSS Custom Properties

 *

 * CANONICAL SOURCE: 00-SPEC-BRAND-DESIGN-SYSTEM.md Section 8

 * This file MUST be loaded first. All other SayWOW CSS depends on these variables.

 *

 * @package SayWOW_Admin_Pro

 * @since 19.7.0

 */



:root {

    /* ============================================

       FONT

       ============================================ */

    --sw-font: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;



    /* ============================================

       PRIMARY COLOURS

       ============================================ */

    --sw-blue: #0052CC;

    --sw-blue-dark: #003D99;

    --sw-blue-darkest: #002D73;

    --sw-red: #E63946;

    --sw-red-hover: #CF2F3C;

    --sw-red-active: #B82633;

    --sw-gold: #FFD700;

    --sw-gold-dark: #F0C800;

    --sw-green: #28A745;



    /* ============================================

       NEUTRALS

       ============================================ */

    --sw-grey-900: #212529;

    --sw-grey-500: #6B7280;

    --sw-grey-300: #9CA3AF;

    --sw-grey-200: #E5E7EB;

    --sw-grey-100: #F8F9FA;

    --sw-white: #FFFFFF;



    /* ============================================

       SEMANTIC COLOURS

       ============================================ */

    --sw-success-bg: #D4EDDA;

    --sw-success-text: #155724;

    --sw-error-bg: #FEE2E5;

    --sw-error-text: #E63946;

    --sw-info-bg: #E8F0FE;

    --sw-info-text: #0052CC;

    --sw-warning-bg: #FFF3CD;

    --sw-warning-text: #856404;



    /* ============================================

       FONT WEIGHTS

       ============================================ */

    --sw-fw-regular: 400;

    --sw-fw-medium: 500;

    --sw-fw-semibold: 600;

    --sw-fw-bold: 700;

    --sw-fw-extrabold: 800;



    /* ============================================

       BORDER RADIUS

       ============================================ */

    --sw-radius-sm: 6px;

    --sw-radius-md: 10px;

    --sw-radius-lg: 12px;

    --sw-radius-xl: 16px;



    /* ============================================

       TRANSITIONS

       ============================================ */

    --sw-transition: all 0.2s ease;



    /* ============================================

       SHADOWS (supplementary — not in SPEC but

       useful for components)

       ============================================ */

    --sw-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);

    --sw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);

    --sw-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);

    --sw-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);



    /* ============================================

       Z-INDEX SCALE

       ============================================ */

    --sw-z-header: 1000;

    --sw-z-bar: 1001;

    --sw-z-dropdown: 1010;

    --sw-z-modal-backdrop: 1040;

    --sw-z-modal: 1050;

    --sw-z-tooltip: 1070;

    --sw-z-toast: 1080;



    /* ============================================

       PWA SHELL

       Used by SayWOW PWA plugin for mobile

       header, footer nav, and safe area insets.

       ============================================ */

    --pwa-header-height: 60px;

    --pwa-footer-height: 64px;

    --pwa-header-bg: var(--sw-blue);

    --pwa-footer-bg: var(--sw-white);

    --pwa-nav-active: var(--sw-blue);

    --pwa-nav-inactive: var(--sw-grey-500);

    --pwa-safe-top: env(safe-area-inset-top, 0px);

    --pwa-safe-bottom: env(safe-area-inset-bottom, 0px);

    --pwa-safe-left: env(safe-area-inset-left, 0px);

    --pwa-safe-right: env(safe-area-inset-right, 0px);



    /* ============================================

       LEGACY COMPATIBILITY BRIDGE

       Maps old --saywow-* variables to new --sw-* values.

       This allows existing CSS using old vars to work

       without immediately updating every reference.

       Remove once all files are fully migrated.

       ============================================ */



    /* Admin old vars → new brand */

    --saywow-primary: var(--sw-blue);

    --saywow-primary-dark: var(--sw-blue-dark);

    --saywow-primary-light: var(--sw-info-bg);

    --saywow-primary-50: var(--sw-info-bg);

    --saywow-secondary: var(--sw-blue-dark);

    --saywow-secondary-dark: var(--sw-blue-darkest);



    --saywow-gradient: linear-gradient(135deg, var(--sw-blue) 0%, var(--sw-blue-dark) 100%);

    --saywow-gradient-hover: linear-gradient(135deg, var(--sw-blue-dark) 0%, var(--sw-blue-darkest) 100%);



    --saywow-success: var(--sw-green);

    --saywow-success-dark: #218838;

    --saywow-success-light: var(--sw-success-bg);

    --saywow-success-bg: var(--sw-success-bg);



    --saywow-warning: #ED8936;

    --saywow-warning-dark: #DD6B20;

    --saywow-warning-light: var(--sw-warning-bg);

    --saywow-warning-bg: var(--sw-warning-bg);



    --saywow-danger: var(--sw-red);

    --saywow-danger-dark: var(--sw-red-hover);

    --saywow-danger-light: var(--sw-error-bg);

    --saywow-danger-bg: var(--sw-error-bg);



    --saywow-info: var(--sw-blue);

    --saywow-info-dark: var(--sw-blue-dark);

    --saywow-info-light: var(--sw-info-bg);

    --saywow-info-bg: var(--sw-info-bg);



    /* Neutral greys — mapped */

    --saywow-gray-50: var(--sw-grey-100);

    --saywow-gray-100: var(--sw-grey-100);

    --saywow-gray-200: var(--sw-grey-200);

    --saywow-gray-300: var(--sw-grey-300);

    --saywow-gray-400: var(--sw-grey-300);

    --saywow-gray-500: var(--sw-grey-500);

    --saywow-gray-600: var(--sw-grey-500);

    --saywow-gray-700: var(--sw-grey-900);

    --saywow-gray-800: var(--sw-grey-900);

    --saywow-gray-900: var(--sw-grey-900);



    /* Text colours — mapped */

    --saywow-text-primary: var(--sw-grey-900);

    --saywow-text-secondary: var(--sw-grey-500);

    --saywow-text-muted: var(--sw-grey-500);

    --saywow-text-light: var(--sw-grey-300);



    /* Background colours — mapped */

    --saywow-bg-white: var(--sw-white);

    --saywow-bg-light: var(--sw-grey-100);

    --saywow-bg-gray: var(--sw-grey-200);



    /* Border colours — mapped */

    --saywow-border: var(--sw-grey-200);

    --saywow-border-light: var(--sw-grey-100);

    --saywow-border-dark: var(--sw-grey-300);



    /* Typography — mapped */

    --saywow-font-sans: var(--sw-font);

    --saywow-font-primary: var(--sw-font);

    --saywow-font: var(--sw-font);



    /* Transitions — mapped */

    --saywow-transition-fast: 150ms ease;

    --saywow-transition: var(--sw-transition);

    --saywow-transition-slow: 300ms ease;



    /* Public old vars → new brand */

    --saywow-primary-hover: var(--sw-blue-dark);

    --saywow-accent: var(--sw-blue);

}