@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@400;500;600;700&display=swap');

:root {
    /* Body */
    --rich-black: #0D0D0D;
    --soft-white: #F5F5F5;
    --warm-beige: #F2E9E4;
    --vivid-coral: #FF5C5C;
    --font-family: 'Inter', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    --font-main: var(--font-family);
    --header-height: 64px;
    --header-safe-padding: 12px;
    --banner-stack-height: 0px;
    --footer-height: 96px;
    --footer-safe-padding: 12px;
    --dusty-blue: #218decc1;

    /* Overrides from Headers */
    --rich-black: black;

    /* Rackstack */
    --rackstack-primary: #4b0082;
    --rackstack-secondary: #6a0dad;
    --rackstack-accent: #00d2ff;

    /* Systems */
    --systems-dark: #1a1a1a;
    --systems-light: #f4f4f9;

    /* Postgres */
    --postgres-stack-gap: 18px;
    --postgres-group-gap: 12px;

    /* MSMG */
    --msmg-backdrop: #e8e0d3;
    --msmg-backdrop-soft: #f4f0e8;
    --msmg-surface: #ffffff;
    --msmg-edge-light: #fffdf9;
    --msmg-edge-mid: #e6ddd0;
    --msmg-edge-dark: #d0c5b4;
    --msmg-edge-deep: #baae9b;
    --msmg-shadow: rgba(134, 123, 108, 0.16);

    /* Hamilton */
    --hamilton-home-bg: #ffffff;
    --hamilton-home-ink: #111111;
    --hamilton-app-bg: #edf3fb;
    --hamilton-app-bg-soft: #f7faff;
    --hamilton-surface: rgba(255, 255, 255, 0.94);
    --hamilton-surface-strong: #ffffff;
    --hamilton-border: #d9e6f4;
    --hamilton-border-strong: #bfd1e7;
    --hamilton-ink: #122743;
    --hamilton-muted: #5d718c;
    --hamilton-accent: #16365f;
    --hamilton-accent-soft: #edf4ff;
    --hamilton-user-bubble: #18385f;
    --hamilton-user-ink: #ffffff;
    --hamilton-assistant-bubble: #ffffff;
    --hamilton-assistant-ink: #16314f;
    --hamilton-error-bg: #fff1f1;
    --hamilton-error-border: #f3cccc;
    --hamilton-error-ink: #8d2d2d;
    --hamilton-ok: #1f8a4d;
    --hamilton-warn: #c7810b;
    --hamilton-error: #c64b4b;
    --hamilton-shadow: 0 22px 60px rgba(25, 53, 92, 0.12);
    --hamilton-radius-xl: 30px;
    --hamilton-radius-lg: 24px;
    --hamilton-radius-md: 18px;
    --hamilton-radius-sm: 14px;

    /* Daily Motivation */
    --primary: #673ab7;
    --primary-light: #f3e5f5;
    --primary-dark: #311b92;
    --accent: #ffd740;
    --bg-color: #ffffff;
    --surface-color: #ffffff;
    --card-bg: #ffffff;
    --text-main: #212121;
    --text-primary: #673ab7;
    --text-muted: #757575;
    --error: #d32f2f;
    --shadow-elevation: 0 4px 12px rgba(103, 58, 183, 0.15);
    --shadow-card: 0 6px 16px rgba(0, 0, 0, 0.12);
    --radius-lg: 16px;
    --radius-pill: 999px;

    /* Astreet */
    --astreet-primary: #d4af37;
    --astreet-secondary: #d4af37;
    --astreet-accent: #d4af37;
    --astreet-gradient: #d4af37;

    /* Banners */
    --banner-speed-px: 60;
    --banner-speed-seconds: 150s;

    /* Mail / Quartz Theme */
    --quartz-bg: #f8f9fa;
    --quartz-panel: #ffffff;
    --quartz-border: #e9ecef;
    --quartz-accent: #b8860b;
    --quartz-text: #212529;
    --quartz-text-dim: #6c757d;
    --quartz-highlight: rgba(184, 134, 11, 0.08);
    --glass-bg: rgba(255, 255, 255, 0.8);
    --sidebar-bg: #ffffff;

    /* Data / Font family resets */
    --tlc-root-font-family: 'Inter', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;

    /* Headers */
    --hd-font: var(--tlc-root-font-family, 'Inter', sans-serif);
    --header-nav-size: 21px;

    /* Buttons */
    --bt-font: var(--tlc-root-font-family, 'Inter', sans-serif);
}

/* Media Query Conditioned Roots */

@media (max-width: 900px) {
    :root {
        --postgres-auth-accent: #6f2cff;
        --postgres-auth-accent-dark: #4a12be;
        --postgres-auth-text: #111111;
        --postgres-auth-muted: #5f6470;
        --postgres-auth-border: #d7dbe6;
        --postgres-auth-surface: #ffffff;
        --postgres-auth-shadow: 0 22px 54px rgba(31, 18, 59, 0.12);

        --profile-sidebar-width: min(180px, 42vw);
        --profile-sidebar-pad-left: 8px;
        --profile-sidebar-right-gap: 6px;
    }
}

@media (max-width: 900px) {
    :root {
        --profile-sidebar-width: min(188px, 32vw);
        --profile-sidebar-pad-left: 8px;
        --profile-sidebar-right-gap: 8px;
    }
}

@media (max-width: 440px) {
    :root {
        --header-height: 95px;
        --header-safe-padding: 10px;
        --footer-height: 96px;
        --footer-safe-padding: 8px;
    }
}