/* ==========================================================================
   Lisbon Modern Theme — "Clean & Professional"
   Inspired by Lisbon's azulejo tiles, crisp whites, deep navy, tile-blue accents.
   ========================================================================== */

:root {
    /* ?? Brand colours ?? */
    --color-primary:        #0D3B66;   /* navy */
    --color-primary-light:  #154D80;   /* lighter navy for hover states */
    --color-primary-dark:   #092A4A;   /* darker navy for active states */
    --color-secondary:      #4A90D9;   /* azulejo blue */
    --color-secondary-light:#6BA3E0;   /* lighter azulejo blue */
    --color-accent:         #F4D35E;   /* tram yellow */
    --color-accent-dark:    #D4B43E;   /* darker yellow for hover */

    /* ?? Surfaces ?? */
    --color-background:     #FFFFFF;
    --color-surface:        #F8F9FA;   /* subtle grey for cards / panels */
    --color-surface-alt:    #EEF2F7;   /* alternate surface for contrast */

    /* ?? Text ?? */
    --color-text:           #1A1A2E;
    --color-text-muted:     #5A6270;
    --color-text-on-primary:#FFFFFF;
    --color-text-on-accent: #1A1A2E;

    /* ?? Borders ?? */
    --color-border:         #D6DCE5;
    --color-border-light:   #E8ECF1;

    /* ?? Feedback ?? */
    --color-success:        #26B050;
    --color-danger:         #DC3545;
    --color-warning:        #FFC107;
    --color-info:           var(--color-secondary);

    /* ?? Sidebar ?? */
    --sidebar-bg:           linear-gradient(180deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    --sidebar-text:         #D7D7D7;
    --sidebar-active-bg:    rgba(255, 255, 255, 0.18);
    --sidebar-hover-bg:     rgba(255, 255, 255, 0.10);
    --sidebar-brand-color:  #FFFFFF;

    /* ?? Top bar ?? */
    --topbar-bg:            var(--color-surface-alt);
    --topbar-border:        var(--color-border);

    /* ?? Typography ?? */
    --font-family-base:     'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-size-base:       1rem;
    --line-height-base:     1.6;

    /* ?? Spacing ?? */
    --spacing-xs:           0.25rem;
    --spacing-sm:           0.5rem;
    --spacing-md:           1rem;
    --spacing-lg:           1.5rem;
    --spacing-xl:           2rem;

    /* ?? Border radius ?? */
    --radius-sm:            0.25rem;
    --radius-md:            0.375rem;
    --radius-lg:            0.5rem;

    /* ?? Shadows ?? */
    --shadow-sm:            0 1px 3px rgba(13, 59, 102, 0.08);
    --shadow-md:            0 4px 12px rgba(13, 59, 102, 0.10);
    --shadow-lg:            0 8px 24px rgba(13, 59, 102, 0.12);

    /* ?? Transitions ?? */
    --transition-fast:      150ms ease-in-out;
    --transition-base:      250ms ease-in-out;
}