/* ==========================================================================
   LIVIGO — GLOBAL COLOR SYSTEM

   Path:
   /assets/css/colors.css

   Purpose:
   - Single source of truth for Livigo brand colors
   - Shared across public website, Minha Livigo, Customer PWA,
     Livigo Pro and future Livigo modules
   - Prevent individual pages from inventing new brand blues
   - Provide semantic color tokens for components and modules

   Loading order:
   variables.css
   colors.css
   reset.css
   global-typography.css
   theme.css
   main.css
   components.css
   responsive.css
   page/module CSS

   IMPORTANT:
   New Livigo pages should use these variables instead of
   hardcoded brand colors.
   ========================================================================== */


/* ==========================================================================
   01. MASTER BRAND PALETTE
   ========================================================================== */

:root {

    /*
    |--------------------------------------------------------------------------
    | LIVIGO NAVY
    |--------------------------------------------------------------------------
    |
    | Primary Livigo brand blue.
    |
    | This is the canonical blue used across:
    | - public website
    | - Minha Livigo
    | - Customer PWA
    | - Livigo Pro
    | - primary headers
    | - navigation
    | - branded application surfaces
    |
    */

    --livigo-navy: #0A2C73;

    --livigo-navy-rgb: 10, 44, 115;


    /*
    |--------------------------------------------------------------------------
    | NAVY VARIANTS
    |--------------------------------------------------------------------------
    |
    | These are controlled tonal variations.
    | They are not separate brand blues.
    |
    */

    --livigo-navy-hover: #0C347F;

    --livigo-navy-soft: #123B82;

    --livigo-navy-muted: #173F82;

    --livigo-navy-deep: #08245F;


    /*
    |--------------------------------------------------------------------------
    | LIME
    |--------------------------------------------------------------------------
    |
    | Primary Livigo action/accent color.
    |
    */

    --livigo-lime: #D6F34A;

    --livigo-lime-hover: #C9EA35;

    --livigo-lime-strong: #BDEA20;

    --livigo-lime-rgb: 214, 243, 74;


    /*
    |--------------------------------------------------------------------------
    | WHITE
    |--------------------------------------------------------------------------
    */

    --livigo-white: #FFFFFF;

    --livigo-white-rgb: 255, 255, 255;


    /*
    |--------------------------------------------------------------------------
    | BLACK
    |--------------------------------------------------------------------------
    */

    --livigo-black: #000000;

    --livigo-black-rgb: 0, 0, 0;

}


/* ==========================================================================
   02. BRAND IDENTITY ALIASES
   ========================================================================== */

:root {

    --livigo-brand-primary:
        var(--livigo-navy);

    --livigo-brand-primary-hover:
        var(--livigo-navy-hover);

    --livigo-brand-accent:
        var(--livigo-lime);

    --livigo-brand-accent-hover:
        var(--livigo-lime-hover);

    --livigo-brand-on-primary:
        var(--livigo-white);

    --livigo-brand-on-accent:
        var(--livigo-navy);

}


/* ==========================================================================
   03. PRIMARY APPLICATION SURFACES
   ========================================================================== */

:root {

    /*
    |--------------------------------------------------------------------------
    | Main branded canvas
    |--------------------------------------------------------------------------
    */

    --livigo-canvas:
        var(--livigo-navy);


    /*
    |--------------------------------------------------------------------------
    | Header
    |--------------------------------------------------------------------------
    */

    --livigo-header-bg:
        var(--livigo-navy);

    --livigo-header-text:
        var(--livigo-white);


    /*
    |--------------------------------------------------------------------------
    | Navigation
    |--------------------------------------------------------------------------
    */

    --livigo-nav-bg:
        var(--livigo-navy);

    --livigo-nav-text:
        rgba(
            var(--livigo-white-rgb),
            0.72
        );

    --livigo-nav-text-active:
        var(--livigo-lime);


    /*
    |--------------------------------------------------------------------------
    | Dock
    |--------------------------------------------------------------------------
    */

    --livigo-dock-bg:
        var(--livigo-navy);

    --livigo-dock-text:
        rgba(
            var(--livigo-white-rgb),
            0.68
        );

    --livigo-dock-active:
        var(--livigo-lime);

}


/* ==========================================================================
   04. SURFACE HIERARCHY
   ========================================================================== */

:root {

    /*
    |--------------------------------------------------------------------------
    | Surface Level 1
    |--------------------------------------------------------------------------
    |
    | General content surface.
    |
    */

    --livigo-surface:
        var(--livigo-navy);


    /*
    |--------------------------------------------------------------------------
    | Surface Level 2
    |--------------------------------------------------------------------------
    |
    | Cards and contained regions.
    |
    */

    --livigo-surface-raised:
        rgba(
            var(--livigo-white-rgb),
            0.055
        );


    /*
    |--------------------------------------------------------------------------
    | Surface Level 3
    |--------------------------------------------------------------------------
    */

    --livigo-surface-raised-strong:
        rgba(
            var(--livigo-white-rgb),
            0.085
        );


    /*
    |--------------------------------------------------------------------------
    | Interactive Surface
    |--------------------------------------------------------------------------
    */

    --livigo-surface-interactive:
        rgba(
            var(--livigo-white-rgb),
            0.065
        );

    --livigo-surface-interactive-hover:
        rgba(
            var(--livigo-white-rgb),
            0.10
        );

}


/* ==========================================================================
   05. TEXT COLORS — NAVY SURFACES
   ========================================================================== */

:root {

    --livigo-text:
        var(--livigo-white);

    --livigo-text-primary:
        var(--livigo-white);

    --livigo-text-secondary:
        rgba(
            var(--livigo-white-rgb),
            0.72
        );

    --livigo-text-muted:
        rgba(
            var(--livigo-white-rgb),
            0.56
        );

    --livigo-text-subtle:
        rgba(
            var(--livigo-white-rgb),
            0.42
        );

    --livigo-text-disabled:
        rgba(
            var(--livigo-white-rgb),
            0.30
        );

    --livigo-text-accent:
        var(--livigo-lime);

    /*
    |--------------------------------------------------------------------------
    | Inverse Text
    |--------------------------------------------------------------------------
    |
    | Used when text appears on light/accent surfaces such as
    | Livigo lime buttons, badges and highlighted controls.
    |
    */

    --livigo-text-inverse:
        var(--livigo-navy);

}


/* ==========================================================================
   06. BORDER COLORS
   ========================================================================== */

:root {

    --livigo-border:
        rgba(
            var(--livigo-white-rgb),
            0.10
        );

    --livigo-border-soft:
        rgba(
            var(--livigo-white-rgb),
            0.07
        );

    --livigo-border-strong:
        rgba(
            var(--livigo-white-rgb),
            0.16
        );

    --livigo-border-accent:
        rgba(
            var(--livigo-lime-rgb),
            0.42
        );

}


/* ==========================================================================
   07. ACTION COLORS
   ========================================================================== */

:root {

    /*
    |--------------------------------------------------------------------------
    | Primary Action
    |--------------------------------------------------------------------------
    */

    --livigo-action-primary-bg:
        var(--livigo-lime);

    --livigo-action-primary-bg-hover:
        var(--livigo-lime-hover);

    --livigo-action-primary-text:
        var(--livigo-text-inverse);


    /*
    |--------------------------------------------------------------------------
    | Secondary Action
    |--------------------------------------------------------------------------
    */

    --livigo-action-secondary-bg:
        rgba(
            var(--livigo-white-rgb),
            0.06
        );

    --livigo-action-secondary-bg-hover:
        rgba(
            var(--livigo-white-rgb),
            0.10
        );

    --livigo-action-secondary-text:
        var(--livigo-white);

    --livigo-action-secondary-border:
        var(--livigo-border-strong);

}


/* ==========================================================================
   08. FORM COLORS
   ========================================================================== */

:root {

    --livigo-input-bg:
        var(--livigo-white);

    --livigo-input-text:
        #152238;

    --livigo-input-placeholder:
        #6C7480;

    --livigo-input-border:
        rgba(
            var(--livigo-navy-rgb),
            0.14
        );

    --livigo-input-focus:
        var(--livigo-lime);

}


/* ==========================================================================
   09. STATUS COLORS
   ========================================================================== */

:root {

    /*
    |--------------------------------------------------------------------------
    | Success
    |--------------------------------------------------------------------------
    */

    --livigo-success:
        #72C86B;

    --livigo-success-rgb:
        114, 200, 107;

    --livigo-success-bg:
        rgba(
            var(--livigo-success-rgb),
            0.12
        );


    /*
    |--------------------------------------------------------------------------
    | Warning
    |--------------------------------------------------------------------------
    */

    --livigo-warning:
        #F2C94C;

    --livigo-warning-rgb:
        242, 201, 76;

    --livigo-warning-bg:
        rgba(
            var(--livigo-warning-rgb),
            0.12
        );


    /*
    |--------------------------------------------------------------------------
    | Danger
    |--------------------------------------------------------------------------
    */

    --livigo-danger:
        #E66A6A;

    --livigo-danger-rgb:
        230, 106, 106;

    --livigo-danger-bg:
        rgba(
            var(--livigo-danger-rgb),
            0.12
        );


    /*
    |--------------------------------------------------------------------------
    | Information
    |--------------------------------------------------------------------------
    */

    --livigo-info:
        #6FA8FF;

    --livigo-info-rgb:
        111, 168, 255;

    --livigo-info-bg:
        rgba(
            var(--livigo-info-rgb),
            0.12
        );

}


/* ==========================================================================
   10. OVERLAYS
   ========================================================================== */

:root {

    --livigo-overlay:
        rgba(
            var(--livigo-black-rgb),
            0.52
        );

    --livigo-overlay-strong:
        rgba(
            var(--livigo-black-rgb),
            0.68
        );

    --livigo-image-overlay:
        linear-gradient(
            180deg,
            rgba(
                var(--livigo-navy-rgb),
                0.06
            ) 0%,
            rgba(
                var(--livigo-navy-rgb),
                0.72
            ) 100%
        );

}


/* ==========================================================================
   11. FOCUS
   ========================================================================== */

:root {

    --livigo-focus:
        var(--livigo-lime);

    --livigo-focus-ring:
        0 0 0 3px
        rgba(
            var(--livigo-lime-rgb),
            0.24
        );

}


/* ==========================================================================
   12. CUSTOMER / MINHA LIVIGO ALIASES
   ========================================================================== */

:root {

    /*
    |--------------------------------------------------------------------------
    | Brand / Canvas
    |--------------------------------------------------------------------------
    */

    --customer-brand:
        var(--livigo-navy);

    --customer-canvas:
        var(--livigo-navy);


    /*
    |--------------------------------------------------------------------------
    | Application Chrome
    |--------------------------------------------------------------------------
    */

    --customer-header:
        var(--livigo-navy);

    --customer-navigation:
        var(--livigo-navy);

    --customer-dock:
        var(--livigo-navy);


    /*
    |--------------------------------------------------------------------------
    | Surfaces
    |--------------------------------------------------------------------------
    */

    --customer-surface:
        var(--livigo-surface);

    --customer-surface-raised:
        var(--livigo-surface-raised);

    --customer-surface-raised-strong:
        var(--livigo-surface-raised-strong);


    /*
    |--------------------------------------------------------------------------
    | Accent
    |--------------------------------------------------------------------------
    */

    --customer-accent:
        var(--livigo-lime);


    /*
    |--------------------------------------------------------------------------
    | Text
    |--------------------------------------------------------------------------
    */

    --customer-text:
        var(--livigo-white);

    --customer-text-secondary:
        var(--livigo-text-secondary);

    --customer-text-muted:
        var(--livigo-text-muted);


    /*
    |--------------------------------------------------------------------------
    | Borders
    |--------------------------------------------------------------------------
    */

    --customer-border:
        var(--livigo-border);

    --customer-border-strong:
        var(--livigo-border-strong);

}


/* ==========================================================================
   13. LIVIGO PRO ALIASES
   ========================================================================== */

:root {

    /*
    |--------------------------------------------------------------------------
    | Brand / Canvas
    |--------------------------------------------------------------------------
    */

    --pro-brand:
        var(--livigo-navy);

    --pro-canvas:
        var(--livigo-navy);


    /*
    |--------------------------------------------------------------------------
    | Application Chrome
    |--------------------------------------------------------------------------
    */

    --pro-header:
        var(--livigo-navy);

    --pro-navigation:
        var(--livigo-navy);

    --pro-dock:
        var(--livigo-navy);


    /*
    |--------------------------------------------------------------------------
    | Surfaces
    |--------------------------------------------------------------------------
    */

    --pro-surface:
        var(--livigo-surface);

    --pro-surface-raised:
        var(--livigo-surface-raised);

    --pro-surface-raised-strong:
        var(--livigo-surface-raised-strong);


    /*
    |--------------------------------------------------------------------------
    | Accent
    |--------------------------------------------------------------------------
    */

    --pro-accent:
        var(--livigo-lime);


    /*
    |--------------------------------------------------------------------------
    | Text
    |--------------------------------------------------------------------------
    */

    --pro-text:
        var(--livigo-white);

    --pro-text-secondary:
        var(--livigo-text-secondary);

    --pro-text-muted:
        var(--livigo-text-muted);


    /*
    |--------------------------------------------------------------------------
    | Borders
    |--------------------------------------------------------------------------
    */

    --pro-border:
        var(--livigo-border);

    --pro-border-strong:
        var(--livigo-border-strong);

}


/* ==========================================================================
   14. PUBLIC WEBSITE ALIASES
   ========================================================================== */

:root {

    --public-brand:
        var(--livigo-navy);

    --public-header:
        var(--livigo-navy);

    --public-navigation:
        var(--livigo-navy);

    --public-footer:
        var(--livigo-navy);

    --public-accent:
        var(--livigo-lime);

}


/* ==========================================================================
   15. ASSISTANT / KENA
   ========================================================================== */

:root {

    --kena-accent:
        var(--livigo-lime);

    --kena-button-bg:
        var(--livigo-lime);

    --kena-button-text:
        var(--livigo-navy);

}


/* ==========================================================================
   16. LIGHT SURFACE PALETTE
   ========================================================================== */

:root {

    --livigo-light-canvas:
        #F5F7FA;

    --livigo-light-surface:
        #FFFFFF;

    --livigo-light-surface-soft:
        #F0F3F7;

    --livigo-light-text:
        #152238;

    --livigo-light-text-secondary:
        #5D6877;

    --livigo-light-text-muted:
        #7D8794;

    --livigo-light-border:
        rgba(
            var(--livigo-navy-rgb),
            0.11
        );

}


/* ==========================================================================
   17. DARK THEME SEMANTIC TOKENS
   ========================================================================== */

html[data-theme="dark"] {

    --color-page:
        var(--livigo-navy);

    --color-surface:
        var(--livigo-surface);

    --color-surface-raised:
        var(--livigo-surface-raised);

    --color-text:
        var(--livigo-text-primary);

    --color-text-secondary:
        var(--livigo-text-secondary);

    --color-text-muted:
        var(--livigo-text-muted);

    --color-border:
        var(--livigo-border);

    --color-accent:
        var(--livigo-lime);

}


/* ==========================================================================
   18. LIGHT THEME SEMANTIC TOKENS
   ========================================================================== */

html[data-theme="light"] {

    --color-page:
        var(--livigo-light-canvas);

    --color-surface:
        var(--livigo-light-surface);

    --color-surface-raised:
        var(--livigo-light-surface-soft);

    --color-text:
        var(--livigo-light-text);

    --color-text-secondary:
        var(--livigo-light-text-secondary);

    --color-text-muted:
        var(--livigo-light-text-muted);

    --color-border:
        var(--livigo-light-border);

    --color-accent:
        var(--livigo-lime);

}


/* ==========================================================================
   19. SYSTEM THEME — DARK
   ========================================================================== */

@media (prefers-color-scheme: dark) {

    html[data-theme="system"] {

        --color-page:
            var(--livigo-navy);

        --color-surface:
            var(--livigo-surface);

        --color-surface-raised:
            var(--livigo-surface-raised);

        --color-text:
            var(--livigo-text-primary);

        --color-text-secondary:
            var(--livigo-text-secondary);

        --color-text-muted:
            var(--livigo-text-muted);

        --color-border:
            var(--livigo-border);

        --color-accent:
            var(--livigo-lime);

    }

}


/* ==========================================================================
   20. SYSTEM THEME — LIGHT
   ========================================================================== */

@media (prefers-color-scheme: light) {

    html[data-theme="system"] {

        --color-page:
            var(--livigo-light-canvas);

        --color-surface:
            var(--livigo-light-surface);

        --color-surface-raised:
            var(--livigo-light-surface-soft);

        --color-text:
            var(--livigo-light-text);

        --color-text-secondary:
            var(--livigo-light-text-secondary);

        --color-text-muted:
            var(--livigo-light-text-muted);

        --color-border:
            var(--livigo-light-border);

        --color-accent:
            var(--livigo-lime);

    }

}


/* ==========================================================================
   21. FIXED LIVIGO BLUE APPLICATION SURFACES
   ==========================================================================

   Some Livigo experiences intentionally remain branded navy
   regardless of device/system light mode.

   Page/module CSS can consume these variables without having
   to know the actual hexadecimal brand value.

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

[data-livigo-surface="brand"],
.livigo-brand-surface {

    --color-page:
        var(--livigo-navy);

    --color-surface:
        var(--livigo-navy);

    --color-surface-raised:
        var(--livigo-surface-raised);

    --color-text:
        var(--livigo-white);

    --color-text-secondary:
        var(--livigo-text-secondary);

    --color-text-muted:
        var(--livigo-text-muted);

    --color-border:
        var(--livigo-border);

    --color-accent:
        var(--livigo-lime);

}


/* ==========================================================================
   22. LEGACY / MIGRATION ALIASES
   ==========================================================================

   These aliases make gradual migration possible.

   Existing modules can be converted to these tokens first,
   without needing a complete visual rewrite.

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

:root {

    --brand-blue:
        var(--livigo-navy);

    --brand-navy:
        var(--livigo-navy);

    --brand-lime:
        var(--livigo-lime);

    --primary-blue:
        var(--livigo-navy);

    --primary-navy:
        var(--livigo-navy);

    --primary-accent:
        var(--livigo-lime);

    --app-blue:
        var(--livigo-navy);

    --app-navy:
        var(--livigo-navy);

}


/* ==========================================================================
   23. USAGE RULES
   ==========================================================================

   CORRECT:

       background: var(--livigo-navy);

       color: var(--livigo-white);

       border-color: var(--livigo-border);

       background: var(--livigo-action-primary-bg);

       color: var(--livigo-action-primary-text);


   FOR SEMANTIC COMPONENTS:

       background: var(--color-page);

       color: var(--color-text);

       border-color: var(--color-border);


   FOR CUSTOMER MODULES:

       background: var(--customer-canvas);

       background: var(--customer-surface-raised);

       color: var(--customer-text);

       color: var(--customer-text-secondary);

       border-color: var(--customer-border);


   FOR LIVIGO PRO MODULES:

       background: var(--pro-canvas);

       background: var(--pro-surface-raised);

       color: var(--pro-text);

       color: var(--pro-text-secondary);

       border-color: var(--pro-border);


   AVOID:

       background: #031b33;
       background: #02172e;
       background: #06111d;
       background: #082944;

   when those values are being used merely as substitutes for
   the Livigo brand blue.

   A darker tone may still be used when it has a deliberate
   functional purpose such as:

   - image overlays
   - modal overlays
   - shadows
   - contrast layers

   It should not become a competing Livigo brand identity.

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