/* ═══════════════════════════════════════════════════════════
   FAÇADE LOGICS — fl-theme.css
   Single source of truth for every colour, font, and design
   token used across the entire UI (app + public landing).
   To retheme: edit values here only.
   Current theme: Facade Glass
═══════════════════════════════════════════════════════════ */
:root {

    /* ── Page Backgrounds ── */
    --bg:           #F0F5FA;
    --bg-alt:       #E5EEF7;
    --surface:      #FFFFFF;
    --surface-blur: rgba(255,255,255,.92);
    --card:         #FFFFFF;
    --hover:        #E5EEF7;

    /* ── Borders ── */
    --border:       #D0DEF0;
    --border-lt:    #E5EEF7;
    --border-hover: #A8C4E0;

    /* ── Text ── */
    --text:         #0D2137;
    --text-2:       #3D5A78;
    --muted:        #7A9BB8;
    --subtle:       #B0CAE0;
    --white:        #ffffff;
    --overlay:      rgba(13,33,55,.45);

    /* ── Accent — Facade Glass Teal ── */
    --accent:       #0E7490;
    --accent-dk:    #0C6680;
    --accent-soft:  rgba(14,116,144,.10);
    --accent-ring:  rgba(14,116,144,.20);

    /* ── Dark (stats bar, footer, btn-dark) ── */
    --dark:           #0D2137;
    --btn-dark-bg:    #0D2137;
    --btn-dark-hover: #152E4D;

    /* ── Sidebar ── */
    --sidebar-bg:                #0D2137;
    --sidebar-border:            rgba(255,255,255,.08);
    --sidebar-text:              rgba(255,255,255,.55);
    --sidebar-muted:             rgba(255,255,255,.30);
    --sidebar-active-bg:         rgba(34,211,238,.15);
    --sidebar-active:            #22D3EE;
    --sidebar-width:             230px;
    --sidebar-collapsed:         60px;
    --sidebar-hover-bg:          rgba(255,255,255,.08);
    --sidebar-hover-text:        rgba(255,255,255,.90);
    --sidebar-logo-text:         rgba(255,255,255,.92);
    --sidebar-scroll:            rgba(255,255,255,.09);
    --sidebar-user-hover:        rgba(255,255,255,.06);
    --sidebar-signout-text:      rgba(255,255,255,.35);
    --sidebar-signout-hover-bg:  rgba(209,52,56,.15);
    --sidebar-signout-hover-text:#F1707B;

    /* ── Dark-surface text / borders (footer, stats bar) ── */
    --dark-text:          var(--white);
    --dark-text-faint:    rgba(255,255,255,.40);
    --dark-text-muted:    rgba(255,255,255,.30);
    --dark-text-sub:      rgba(255,255,255,.55);
    --dark-border:        rgba(255,255,255,.08);
    --dark-border-faint:  rgba(255,255,255,.07);
    --dark-surface:       rgba(255,255,255,.07);
    --dark-surface-border:rgba(255,255,255,.10);

    /* ── Status — success ── */
    --success:        #107C10;
    --success-bg:     #DFF6DD;
    --success-border: #A7D7A8;
    --success-text:   #054B16;

    /* ── Status — warning ── */
    --warning:        #FFB900;
    --warning-bg:     #FFF4CE;
    --warning-border: #FFD679;
    --warning-text:   #7A5C00;

    /* ── Status — danger ── */
    --danger:         #D13438;
    --danger-dk:      #A4262C;
    --danger-bg:      #FDE7E9;
    --danger-border:  #F4ABAE;
    --danger-text:    #6E0811;

    /* ── Status — info ── */
    --info:           #0E7490;
    --info-bg:        #CCEAF2;
    --info-border:    #8CCFDF;
    --info-text:      #065564;

    /* ── Status — neutral ── */
    --neutral:        #3D5A78;
    --neutral-bg:     #E5EEF7;
    --neutral-border: #D0DEF0;

    /* ── Modal alert colours ── */
    --modal-success-bg:     #DFF6DD;
    --modal-success-text:   #054B16;
    --modal-success-border: #A7D7A8;
    --modal-danger-bg:      #FDE7E9;
    --modal-danger-text:    #6E0811;
    --modal-danger-border:  #F4ABAE;

    /* ── Agent status rings ── */
    --agent-online-ring: rgba(16,124,16,.20);
    --agent-busy-ring:   rgba(14,116,144,.25);

    /* ── Log Feed ── */
    --log-bg:      #060F1A;
    --log-text:    rgba(255,255,255,.7);
    --log-success: #4ADE80;
    --log-warning: #FCD34D;
    --log-error:   #F87171;
    --log-info:    #60A5FA;

    /* ── PayPal button ── */
    --paypal-bg:    #0070ba;
    --paypal-hover: #005ea6;

    /* ── Module accent colours (public landing page) ── */
    --mod-cyan:      #038387;
    --mod-cyan-bg:   rgba(3,131,135,.12);
    --mod-teal:      #00B7C3;
    --mod-teal-bg:   rgba(0,183,195,.12);
    --mod-red:       #D13438;
    --mod-red-bg:    rgba(209,52,56,.12);
    --mod-indigo:    #4F6BED;
    --mod-indigo-bg: rgba(79,107,237,.12);
    --mod-pink:      #E3008C;
    --mod-pink-bg:   rgba(227,0,140,.12);

    /* ── Logo Gradient ── */
    --logo-primary-dk:   #065564;
    --logo-primary:      #0E7490;
    --logo-primary-lt:   #22D3EE;
    --logo-secondary-dk: #084F68;
    --logo-secondary:    #0E7490;
    --logo-secondary-lt: #67E8F9;
    --logo-tertiary-dk:  #67E8F9;
    --logo-tertiary:     #A5F3FC;
    --logo-tertiary-lt:  #E0FAFE;

    /* ── Shadows ── */
    --sh-xs: 0 1px 3px  rgba(13,33,55,.08);
    --sh-sm: 0 2px 8px  rgba(13,33,55,.11);
    --sh-md: 0 4px 20px rgba(13,33,55,.13);
    --sh-lg: 0 8px 40px rgba(13,33,55,.17);

    /* ── Border Radii ── */
    --r-xs:  2px;
    --r-sm:  4px;
    --r-md:  6px;
    --r-lg:  8px;
    --r-xl:  12px;
    --r-full:9999px;

    /* ── Typography ── */
    --font:      "Segoe UI", ui-sans-serif, system-ui, -apple-system,
                 "Helvetica Neue", Arial, sans-serif;
    --font-mono: "Cascadia Code", "Cascadia Mono", ui-monospace,
                 "SFMono-Regular", "Courier New", monospace;

    /* ── Transitions ── */
    --tr-fast: 150ms ease;
    --tr-base: 200ms ease;
    --tr-slow: 300ms ease;
    --ease:    cubic-bezier(.1,.9,.2,1);

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

    /* ── Layout ── */
    --header-h: 64px;
}