/*
 * Moblico Design System — CSS Custom Properties (Tokens)
 * Source: moblico-design-system-handoff_draft.pdf, Section 3.2
 * Phase 1 Retheme — March 2026
 *
 * Add this file to every page via header.jsp, immediately after Google Fonts.
 * All component stylesheets reference these variables — never hardcode colors.
 */

:root {

    /* -------------------------------------------------------------------------
     * Primary Blues
     * ------------------------------------------------------------------------- */
    --color-dark-blue:     #023C5F;   /* Sidebar, headers, topbar, primary CTA bg */
    --color-primary-blue:  #005C92;   /* Interactive elements, secondary actions */
    --color-moblico-blue:  #006AA9;   /* Links, breadcrumbs, anchor text */
    --color-light-blue:    #26A2DA;   /* Highlights, active indicators */

    /* -------------------------------------------------------------------------
     * Accent & Action Colors
     * ------------------------------------------------------------------------- */
    --color-orange:        #F8AE28;   /* Primary CTA buttons, active nav, accent bars */
    --color-green:         #57D032;   /* Positive status badges */
    --color-red:           #D93025;   /* Destructive actions, error states, delete buttons */
    --color-red-orange:    #F77725;   /* Warnings, alert states */

    /* -------------------------------------------------------------------------
     * Neutrals & Backgrounds
     * ------------------------------------------------------------------------- */
    --color-off-white:     #F4F6F3;   /* Page backgrounds, form backgrounds */
    --color-white:         #FFFFFF;   /* Card backgrounds, input backgrounds */
    --color-border:        #DDE3E8;   /* Input borders, table dividers, card borders */
    --color-body-text:     #45515C;   /* All paragraph / body copy — PDF design system value */
    --color-near-black:    #2E2925;   /* High-contrast text, headings, btn-action label */

    /* -------------------------------------------------------------------------
     * Interactive State Colors
     * ------------------------------------------------------------------------- */
    --color-dark-blue-hover:    #012d47;   /* Hover/pressed state for dark-blue buttons */
    --color-btn-secondary-bg:   #f0f4f8;   /* Secondary/ghost button hover background */
    --color-row-selected:       #E3F2FA;   /* Selected table row / active conversation */
    --color-row-alt:            #F9FBFC;   /* Alternating table row background */

    /* -------------------------------------------------------------------------
     * Semantic Aliases
     * ------------------------------------------------------------------------- */
    --bg-page:             var(--color-off-white);
    --bg-card:             var(--color-white);
    --bg-sidebar:          #02304D;   /* Sidebar background (slightly darker than dark-blue) */
    --bg-sidebar-active:   var(--color-dark-blue);
    --text-body:           var(--color-body-text);
    --text-link:           var(--color-moblico-blue);

    /* -------------------------------------------------------------------------
     * Typography
     * ------------------------------------------------------------------------- */
    --font-heading:        'Poppins', sans-serif;
    --font-body:           'Fira Sans', Arial, sans-serif;

    /* -------------------------------------------------------------------------
     * Spacing Scale
     * ------------------------------------------------------------------------- */
    --space-1:   4px;
    --space-2:   8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-8:  32px;
    --space-10: 40px;
    --space-12: 48px;

    /* -------------------------------------------------------------------------
     * Border Radius
     * ------------------------------------------------------------------------- */
    --radius-sm:   4px;   /* Badges, chips */
    --radius-md:   6px;   /* Inputs, dropdowns */
    --radius-lg:   8px;   /* Buttons, action panels */
    --radius-xl:  12px;   /* Cards, containers */
    --radius-pill: 20px;  /* Status badges, pills */

    /* -------------------------------------------------------------------------
     * Shadows
     * ------------------------------------------------------------------------- */
    --shadow-card:     1px 3px 0px rgba(2, 60, 95, 0.06);
    --shadow-dropdown: 0 8px 16px rgba(40, 60, 70, 0.12);
    --shadow-modal:    0 8px 32px rgba(2, 60, 95, 0.18);

}