/*
=========================
Theme Variables
=========================
*/

:root {
    --sab: env(safe-area-inset-bottom, 0px);

    /* --- layout --- */
    --header-height:          60px;
    --sidebar-width:          420px;
    --sidebar-collapsed-width: 46px;
    --input-max-width:        760px;
    --chat-max-width:         660px;

    /* modal always on a light surface regardless of theme */
    --modal-bg:     #F1EAC5;
    --modal-text:   #172F13;
    --modal-border: rgba(23, 47, 19, 0.20);

    /* --- typography --- */
    --font-body:    system-ui, -apple-system, BlinkMacSystemFont, "Produkt", sans-serif;
    --font-mono:    ui-monospace, SFMono-Regular, Menlo, monospace;
    --text-xs:      11px;
    --text-sm:      13px;
    --text-base:    15px;
    --text-md:      16px;
    --text-lg:      18px;
    --leading:      1.55;

    /* --- radius --- */
    --r-xs:   6px;
    --r-sm:   10px;
    --r-md:   16px;
    --r-lg:   22px;
    --r-full: 9999px;

    /* --- transitions --- */
    --t-fast:    0.15s ease;
    --t-med:     0.25s ease;
    --t-sidebar: 0.30s cubic-bezier(0.4, 0, 0.2, 1);

    /* --- dark-mode colors (default) --- */
    --c-bg:           #172F13;
    --c-text:         #AEADAC;
    --c-text-muted:   rgba(174, 173, 172, 0.55);
    --c-accent:       #800020;
    --c-accent-hover: #6d001b;
    --c-success:      #4caf50;
    --c-success-border: rgba(76, 175, 80, 0.40);

    --c-user-bg:     rgba(169, 173, 96, 0.80);
    --c-user-border: rgba(169, 173, 96, 0.25);
    --c-bot-bg:      rgba(128, 0, 32, 0.80);
    --c-bot-border:  rgba(128, 0, 32, 0.25);

    --c-conv-border: #F1EAC5;

    /* --- glass (dark) --- */
    --glass-bg:     rgba(23, 47, 19, 0.55);
    --glass-border: rgba(174, 173, 172, 0.15);
    --glass-blur:   blur(20px);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.30),
                    inset 0 1px 0 rgba(255, 255, 255, 0.04);

    /* --- background crosshatch --- */
    --pattern-tint: rgba(174, 173, 172, 0.06);

    /* --- logo always on a light surface --- */
    --logo-bg: rgba(241, 234, 197, 0.90);
}

/* light mode overrides */
[data-theme="light"] {
    --c-bg:         #F1EAC5;
    --c-text:       #172F13;
    --c-text-muted: rgba(23, 47, 19, 0.55);

    --c-conv-border: #800020 /* #F1EAC5 */;

    --glass-bg:     rgba(241, 234, 197, 0.60);
    --glass-border: rgba(23, 47, 19, 0.15);
    --glass-shadow: 0 8px 32px rgba(23, 47, 19, 0.12),
                    inset 0 1px 0 rgba(255, 255, 255, 0.50);

    --pattern-tint: rgba(23, 47, 19, 0.06);
}