:root {
    /* =========================================
       ONWAVE CONNECT DESIGN TOKENS
       Modern neutral design system
       ========================================= */

    /* -----------------------------------------
       CORE COLORS
       ----------------------------------------- */
    --onwave-brand-black: #000000;
    --onwave-brand-white: #FFFFFF;

    /* Accent orange - used sparingly for critical CTAs only */
    --onwave-accent-orange: #FF530D;
    --onwave-accent-orange-hover: #D94D27;
    --onwave-accent-orange-light: #FEF3F2;

    /* -----------------------------------------
       NEUTRAL PALETTE (Light Mode)
       Primary UI colors from Figma
       ----------------------------------------- */
    --onwave-neutral-25: #FCFCFD;
    --onwave-neutral-50: #F9FAFB;
    --onwave-neutral-100: #F2F4F7;
    --onwave-neutral-200: #EAECF0;
    --onwave-neutral-300: #D0D5DD;
    --onwave-neutral-400: #98A2B3;
    --onwave-neutral-500: #667085;
    --onwave-neutral-600: #475467;
    --onwave-neutral-700: #344054;
    --onwave-neutral-800: #1D2939;
    --onwave-neutral-900: #101828;

    /* -----------------------------------------
       SIDEBAR & NAVIGATION
       Dark sidebar from Figma design
       ----------------------------------------- */
    --onwave-sidebar-bg: #2A313C;
    --onwave-sidebar-bg-hover: #343D4A;
    --onwave-sidebar-bg-active: #3D4654;
    --onwave-sidebar-text: #F0F6FC;
    --onwave-sidebar-text-muted: #9198A1;
    --onwave-sidebar-icon: #B7BDC8;
    --onwave-sidebar-border: #3D444D;

    /* Icon rail (leftmost bar) */
    --onwave-icon-rail-bg: #1D2430;
    --onwave-icon-rail-icon: #656C76;
    --onwave-icon-rail-icon-active: var(--onwave-brand-white);

    /* -----------------------------------------
       HEADER
       ----------------------------------------- */
    --onwave-header-bg: var(--onwave-brand-white);
    --onwave-header-border: var(--onwave-neutral-200);
    --onwave-header-text: var(--onwave-neutral-900);

    /* -----------------------------------------
       BODY / CONTENT AREA
       ----------------------------------------- */
    --onwave-body-bg: var(--onwave-neutral-50);
    --onwave-content-bg: var(--onwave-brand-white);
    --onwave-content-border: var(--onwave-neutral-200);

    /* -----------------------------------------
       TEXT COLORS
       ----------------------------------------- */
    --onwave-text-primary: #25292E;
    --onwave-text-secondary: #667085;
    --onwave-text-muted: #98A2B3;
    --onwave-text-inverse: var(--onwave-brand-white);

    /* -----------------------------------------
       SEMANTIC COLORS
       ----------------------------------------- */
    /* Success */
    --onwave-success-50: #ECFDF3;
    --onwave-success-100: #D1FADF;
    --onwave-success-500: #12B76A;
    --onwave-success-600: #039855;
    --onwave-success-700: #027A48;

    /* Warning */
    --onwave-warning-50: #FFFAEB;
    --onwave-warning-100: #FEF0C7;
    --onwave-warning-500: #F79009;
    --onwave-warning-600: #DC6803;
    --onwave-warning-700: #B54708;

    /* Error / Danger */
    --onwave-error-50: #FEF3F2;
    --onwave-error-100: #FEE4E2;
    --onwave-error-500: #F04438;
    --onwave-error-600: #D92D20;
    --onwave-error-700: #B42318;

    /* Info */
    --onwave-info-50: #EFF8FF;
    --onwave-info-100: #D1E9FF;
    --onwave-info-500: #2E90FA;
    --onwave-info-600: #1570EF;
    --onwave-info-700: #175CD3;

    /* -----------------------------------------
       INTERACTIVE ELEMENTS
       Dark neutral primary buttons
       ----------------------------------------- */
    /* Primary button (dark neutral) */
    --onwave-btn-primary-bg: #2A313C;
    --onwave-btn-primary-bg-hover: #343D4A;
    --onwave-btn-primary-text: var(--onwave-brand-white);

    /* Secondary button (outline) */
    --onwave-btn-secondary-bg: var(--onwave-brand-white);
    --onwave-btn-secondary-border: var(--onwave-neutral-300);
    --onwave-btn-secondary-text: var(--onwave-neutral-700);
    --onwave-btn-secondary-bg-hover: var(--onwave-neutral-50);

    /* Accent button (orange - for key CTAs like "Add") */
    --onwave-btn-accent-bg: var(--onwave-accent-orange);
    --onwave-btn-accent-bg-hover: var(--onwave-accent-orange-hover);
    --onwave-btn-accent-text: var(--onwave-brand-white);

    /* Links */
    --onwave-link-color: var(--onwave-neutral-700);
    --onwave-link-hover: var(--onwave-neutral-900);

    /* Focus ring */
    --onwave-focus-ring: rgba(42, 49, 60, 0.25);

    /* -----------------------------------------
       CARDS & SURFACES
       ----------------------------------------- */
    --onwave-card-bg: var(--onwave-brand-white);
    --onwave-card-border: var(--onwave-neutral-200);
    --onwave-card-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
    --onwave-card-shadow-md: 0 4px 8px -2px rgba(16, 24, 40, 0.1), 0 2px 4px -2px rgba(16, 24, 40, 0.06);

    /* -----------------------------------------
       FORM INPUTS
       ----------------------------------------- */
    --onwave-input-bg: var(--onwave-brand-white);
    --onwave-input-border: var(--onwave-neutral-300);
    --onwave-input-border-focus: var(--onwave-neutral-700);
    --onwave-input-text: var(--onwave-text-primary);
    --onwave-input-placeholder: var(--onwave-neutral-400);

    /* -----------------------------------------
       DATA TABLES
       ----------------------------------------- */
    --onwave-table-header-bg: var(--onwave-neutral-50);
    --onwave-table-row-hover: var(--onwave-neutral-50);
    --onwave-table-border: var(--onwave-neutral-200);

    /* -----------------------------------------
       BADGES & TAGS
       ----------------------------------------- */
    --onwave-badge-neutral-bg: var(--onwave-neutral-100);
    --onwave-badge-neutral-text: var(--onwave-neutral-700);

    /* -----------------------------------------
       BORDER RADIUS
       ----------------------------------------- */
    --onwave-radius-sm: 4px;
    --onwave-radius-md: 6px;
    --onwave-radius-lg: 8px;
    --onwave-radius-xl: 12px;
    --onwave-radius-full: 9999px;

    /* -----------------------------------------
       SPACING (based on 4px grid)
       ----------------------------------------- */
    --onwave-space-1: 4px;
    --onwave-space-2: 8px;
    --onwave-space-3: 12px;
    --onwave-space-4: 16px;
    --onwave-space-5: 20px;
    --onwave-space-6: 24px;
    --onwave-space-8: 32px;
    --onwave-space-10: 40px;
    --onwave-space-12: 48px;

    /* -----------------------------------------
       FLUENT UI INTEGRATION
       Note: Design tokens are set via OnwaveThemeProvider.razor
       This CSS variable is kept for backwards compatibility
       ----------------------------------------- */
    --accent-base-color: #FF530D;
}