/* ═══════════════════════════════════════════════════════════
   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 Brand v2 — warm aluminum + glass blues
═══════════════════════════════════════════════════════════ */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Lora:ital,wght@0,400;0,500;1,400&display=swap');

:root {

    /* ── Page Backgrounds ── */
    --bg:           #F0EFEC;   /* Aluminum White */
    --bg-alt:       #E2E0DB;   /* Brushed Aluminum */
    --surface:      #FFFFFF;
    --surface-blur: rgba(240,239,236,.96);
    --card:         #FFFFFF;
    --hover:        #E2E0DB;

    /* ── Borders ── */
    --border:       #D4D2CC;   /* Cladding Light */
    --border-lt:    #E2E0DB;   /* Brushed Aluminum */
    --border-hover: #9E9C97;   /* Cladding Mid */

    /* ── Text ── */
    --text:         #1A3A52;   /* Structural Steel — headings, strong UI text */
    --text-body:    #5C5A56;   /* Cladding Dark — body copy */
    --text-2:       #5C5A56;   /* Cladding Dark */
    --muted:        #9E9C97;   /* Cladding Mid — captions, secondary */
    --subtle:       #D4D2CC;   /* Cladding Light — placeholders */
    --white:        #ffffff;
    --overlay:      rgba(26,58,82,.5);

    /* ── Glass Blues — links, icons, hover states, UI chrome ── */
    --glass-light:  #C8DCF0;
    --glass-mid:    #7AAFD4;
    --glass-deep:   #4A8BB5;

    /* ── Accent (Glass Deep — focus rings, active states, links) ── */
    --accent:       #4A8BB5;   /* Glass Deep */
    --accent-dk:    #1A3A52;   /* Structural Steel */
    --accent-soft:  rgba(74,139,181,.10);
    --accent-ring:  rgba(74,139,181,.20);

    /* ── Amber — PRIMARY CTAs ONLY. Never body text. ── */
    --amber:        #E8A045;
    --amber-dk:     #d4892d;
    --amber-soft:   rgba(232,160,69,.12);
    --amber-ring:   rgba(232,160,69,.25);

    /* ── Dark (sidebar, hero, footer, stats bar) ── */
    --dark:              #1A3A52;   /* Structural Steel */
    --dark-surface:      rgba(255,255,255,.06);
    --dark-surface-border: rgba(255,255,255,.10);
    --btn-dark-bg:       #1A3A52;
    --btn-dark-hover:    #0f2438;

    /* ── Sidebar ── */
    --sidebar-bg:                #1A3A52;
    --sidebar-border:            rgba(255,255,255,.08);
    --sidebar-text:              rgba(255,255,255,.55);
    --sidebar-muted:             rgba(255,255,255,.28);
    --sidebar-active-bg:         rgba(122,175,212,.14);
    --sidebar-active:            #7AAFD4;
    --sidebar-active-border:     #7AAFD4;
    --sidebar-width:             230px;
    --sidebar-collapsed:         60px;
    --sidebar-hover-bg:          rgba(255,255,255,.07);
    --sidebar-hover-text:        rgba(255,255,255,.90);
    --sidebar-logo-text:         rgba(255,255,255,.92);
    --sidebar-scroll:            rgba(255,255,255,.10);
    --sidebar-user-hover:        rgba(255,255,255,.05);
    --sidebar-signout-text:      rgba(255,255,255,.30);
    --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,.38);
    --dark-text-muted:    rgba(255,255,255,.28);
    --dark-text-sub:      rgba(255,255,255,.55);
    --dark-border:        rgba(255,255,255,.08);
    --dark-border-faint:  rgba(255,255,255,.06);

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

    /* ── Status — warning ── */
    --warning:        #D97706;
    --warning-bg:     #FEF3C7;
    --warning-border: #FCD34D;
    --warning-text:   #78350F;

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

    /* ── Status — info ── */
    --info:           #4A8BB5;
    --info-bg:        #C8DCF0;
    --info-border:    #7AAFD4;
    --info-text:      #1A3A52;

    /* ── Status — neutral ── */
    --neutral:        #9E9C97;
    --neutral-bg:     #E2E0DB;
    --neutral-border: #D4D2CC;

    /* ── 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(74,139,181,.25);

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

    /* ── Logo Gradient — Glass Blues ── */
    --logo-primary-dk:   #1A3A52;
    --logo-primary:      #4A8BB5;
    --logo-primary-lt:   #7AAFD4;
    --logo-secondary-dk: #1A3A52;
    --logo-secondary:    #4A8BB5;
    --logo-secondary-lt: #7AAFD4;
    --logo-tertiary-dk:  #7AAFD4;
    --logo-tertiary:     #C8DCF0;
    --logo-tertiary-lt:  #EEF6FC;

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

    /* ── Typography ── */
    --font-heading: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
    --font:         'Poppins', 'Helvetica Neue', Arial, sans-serif;
    --font-body:    'Lora', Georgia, 'Times New Roman', 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;

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

    /* ── Shadows ── */
    --sh-xs: 0 1px 3px  rgba(26,58,82,.06);
    --sh-sm: 0 2px 8px  rgba(26,58,82,.09);
    --sh-md: 0 4px 20px rgba(26,58,82,.12);
    --sh-lg: 0 8px 40px rgba(26,58,82,.16);

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