/* LaterGate Design Tokens */
:root {
    /* Approved portfolio prototype, reviewed 24 October 2026. Authenticated vault
       surfaces opt in to these tokens; public/organisation branding stays intact. */
    --lg-vault-canvas: #f4f3ee;
    --lg-vault-navy: #1d2330;
    --lg-vault-navy-soft: #272e3d;
    --lg-vault-ink: #181c27;
    --lg-vault-yellow: #ffd628;
    --lg-vault-yellow-soft: #fff5bd;
    --lg-vault-green: #286f63;
    --lg-vault-green-on-dark: #82c8b5;
    --lg-vault-green-soft-on-dark: #203f38;
    --lg-vault-green-soft: #e9f5f1;
    --lg-vault-line: #e4e3dc;
    --lg-vault-muted: #6d706f;
    --lg-vault-paper: #ffffff;
    --lg-vault-nav-text: #f7f8fb;
    --lg-vault-nav-muted: #cfd3dc;
    --lg-vault-shadow: 0 10px 32px rgba(24, 28, 39, 0.055);
    --lg-vault-font: 'Geist', Arial, Helvetica, sans-serif;
    /* ── Brand colours (source: LaterGate Brand Book Feb 2025) ──────────── */
    /* Primary: Yellow  RGB 240 219 70  */
    --lg-color-primary: #F0DB46;
    --lg-color-primary-dark: #c8b83a; /* darkened for hover states */
    --lg-color-primary-lighter: #f3e26b; /* yellow highlight backgrounds */
    --lg-color-primary-light: #f6e990;
    --lg-color-primary-lightest: #f9f1b5;
    /* Primary: Brand Black  RGB 35 31 32 */
    --lg-color-dark: #231F20;
    --lg-color-dark-lighter: #4f4c4d;
    --lg-color-dark-light: #7b7979;
    --lg-color-dark-lightest: #a7a5a6; /* near-white tint — subtle backgrounds over dark */
    /* Secondary: Cool Teal  RGB 80 179 173 */
    --lg-color-secondary-cool: #50B3AD;
    --lg-color-secondary-cool-darker: #358984;
    --lg-color-secondary-cool-lighter: #73c2bd;
    --lg-color-secondary-cool-light: #96d1ce;
    --lg-color-secondary-cool-lightest: #b9e1de;
    /* Secondary: Warm Red  RGB 240 75 82 */
    --lg-color-secondary-warm: #f04b52;
    --lg-color-secondary-warm-darker: #c63d43;
    --lg-color-secondary-warm-lighter: #f36f75;
    --lg-color-secondary-warm-light: #f69397;
    --lg-color-secondary-warm-lightest: #f9b7ba;
    /* Surfaces & backgrounds */
    --lg-color-surface: #FFFFFF;
    --lg-color-background: #F5F5F5;
    /* Non-brand semantic colours */
    --lg-color-success: #4caf50;
    --lg-color-error: var(--lg-color-secondary-warm);
    --lg-color-warning: #ff9800;
    --lg-color-info: #50B3AD; /* brand teal reused for info */
    /* State colours — light backgrounds and dark text for status banners */
    --lg-color-error-light: #f9c4c4;
    --lg-color-error-dark: #c0392b;
    --lg-color-success-light: #b2dfdb;
    --lg-color-success-dark: #00695c;
    /* Neutral greys */
    --lg-color-border: #e0e0e0;
    --lg-color-muted: #9e9e9e;
    --lg-color-text-secondary: #424242;
    --lg-color-link: var(--lg-color-secondary-cool);
    --lg-color-link-hover: var(--lg-color-primary-dark);
    /* MudBlazor palette aliases (keeps MudBlazor + tokens in sync) */
    --mud-palette-primary: var(--lg-color-primary);
    --mud-palette-secondary: var(--lg-color-secondary-cool);
    --mud-palette-background: var(--lg-color-background);
    --mud-palette-surface: var(--lg-color-surface);
    --mud-palette-error: var(--lg-color-error);
    --mud-palette-success: var(--lg-color-success);
    /* Spacing scale */
    --lg-space-1: 4px;
    --lg-space-2: 8px;
    --lg-space-3: 12px;
    --lg-space-4: 16px;
    --lg-space-5: 20px;
    --lg-space-6: 24px;
    --lg-space-8: 32px;
    --lg-space-10: 40px;
    --lg-space-12: 48px;
    --lg-space-16: 64px;
    /* Border radius */
    --lg-radius-sm: 4px;
    --lg-radius-md: 8px;
    --lg-radius-lg: 12px;
    --lg-radius-xl: 16px;
    --lg-radius-pill: 9999px;
    /* Shadows */
    --lg-shadow-sm: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.08);
    --lg-shadow-md: 0 4px 6px rgba(0,0,0,.12), 0 2px 4px rgba(0,0,0,.08);
    --lg-shadow-lg: 0 10px 15px rgba(0,0,0,.12), 0 4px 6px rgba(0,0,0,.08);
    /* ── Typography (source: LaterGate Brand Book Feb 2025) ─────────────── */
    /* Primary UI font: Montserrat (Light + Bold) */
    --lg-font-family: 'Montserrat', 'Open Sans', 'Helvetica Neue', sans-serif;
    /* Body / paragraph text: Open Sans Regular */
    --lg-font-family-body: 'Open Sans', 'Helvetica Neue', sans-serif;
    /* Display / decorative (landing hero only): Caveat script */
    --lg-font-family-display: 'Caveat';
    /* Brand-specified: 20pt body, 24pt leading → ~1.2 line height */
    --lg-font-size-xs: 0.75rem; /* 12px */
    --lg-font-size-sm: 0.875rem; /* 14px */
    --lg-font-size-base: 1rem; /* 16px */
    --lg-font-size-lg: 1.125rem; /* 18px */
    --lg-font-size-xl: 1.25rem; /* 20px — brand body size */
    --lg-font-size-2xl: 1.5rem; /* 24px */
    --lg-font-size-3xl: 1.875rem; /* 30px */

    --lg-font-weight-light: 300; /* Montserrat Light */
    --lg-font-weight-normal: 400; /* Open Sans Regular */
    --lg-font-weight-medium: 500;
    --lg-font-weight-semibold: 600;
    --lg-font-weight-bold: 700; /* Montserrat Bold */
    /* Brand: 24pt leading at 20pt = 1.2 ratio */
    --lg-line-height-tight: 1.2;
    --lg-line-height-normal: 1.5;
    --lg-line-height-relaxed: 1.75;
    /* Z-index scale */
    --lg-z-base: 0;
    --lg-z-dropdown: 100;
    --lg-z-sticky: 200;
    --lg-z-overlay: 300;
    --lg-z-modal: 400;
    --lg-z-toast: 500;
    --lg-z-tooltip: 600;
    /* Transitions */
    --lg-transition-fast: 150ms ease;
    --lg-transition-base: 250ms ease;
    --lg-transition-slow: 400ms ease;
    /* Layout */
    --lg-nav-width: 240px;
    --lg-right-nav-width: 360px;
    --lg-nav-width-collapsed: 56px;
    --lg-topbar-height: 64px;
    --lg-content-max-width: 1400px;

    --mud-drawer-width-right: var(--lg-right-nav-width) !important; /* intentional: keep MudBlazor right drawer width in sync with the design token override */
}

/* Organization white-labeling presentation override. Applied only to a resolved,
   authenticated organization circuit by the logged-in layout. */
.organization-theme,
body:has(.organization-theme) {
    --lg-color-primary: #E28F26;
    --lg-color-primary-dark: #B86F18;
    --lg-color-secondary-cool: #1B998B;
    --lg-color-dark: #2E294E;
    --lg-color-background: #F7F7F5;
    --lg-color-surface: #FFFFFF;
    --lg-color-link: #1B998B;
    --lg-color-link-hover: #B86F18;
    --lg-radius-md: 20px;
    --lg-radius-pill: 9999px;
    --lg-font-family: "Century Gothic", "Montserrat", sans-serif;
    --lg-font-family-body: "Century Gothic", "Open Sans", sans-serif;
}