/* ============================================
   Homebook CSS Variables
   ============================================
   Extends Pico CSS variables with app-specific
   custom properties. Prefix: --hb-*
   ============================================ */

:root {
    /* ── Pico overrides ── */
    --pico-secondary-background: #37586f;
    --pico-secondary-hover-background: #416985;
    --pico-background-error: rgb(184, 38, 38);
    --pico-background-success: rgb(59, 138, 59);
    --pico-background-warning: rgb(158, 134, 0);
    --pico-font-size: 14px;
    --pico-border-radius: 10px;
    --pico-form-element-background-color: white;
    --pico-box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15);
    --pico-font-family-sans-serif: "Inter", system-ui, "Segoe UI", Roboto, Oxygen,
        Ubuntu, Cantarell, Helvetica, Arial, "Helvetica Neue", sans-serif,
        var(--pico-font-family-emoji);

    /* ── Layout dimensions ── */
    --hb-topbar-height: 55px;
    --hb-sidebar-width: 220px;
    --hb-toolbar-padding: var(--pico-spacing);

    /* ── Scrollbar ── */
    --hb-scrollbar-thumb: #dedede;
    --hb-scrollbar-track: #ffffff;
    --hb-scrollbar-width: 10px;

    /* ── Status colors ── */
    --hb-status-green: #21ba45;
    --hb-status-yellow: #f2c037;
    --hb-status-red: #db2828;
    --hb-status-grey: #767676;
    --hb-status-orange: #f2711c;
    --hb-status-blue: #2185d0;

    /* ── State row colors ── */
    --hb-state-zero: #f8d7da;
    --hb-state-one: #d4edda;
    --hb-state-two: #fff3cd;

    /* ── Message colors ── */
    --hb-msg-outbound-bg: #e8f4fd;
    --hb-msg-inbound-bg: #f5f5f5;
    --hb-msg-private-bg: #fff8e1;

    /* ── Font sizes ── */
    --hb-font-size-xs: 10px;
    --hb-font-size-sm: 12px;
    --hb-font-size-base: 14px;
    --hb-font-size-md: 16px;
    --hb-font-size-lg: 17px;
    --hb-font-size-xl: 20px;
    --hb-font-size-h1: 24px;
    --hb-font-size-h3: 16px;
    --hb-font-size-legend: 17px;
}

/* ── Light theme ── */
:root:not([data-theme="dark"]),
[data-theme="light"] {
    --pico-primary: #0069b2;
    --pico-active-tree: #dbe4ea;
    --pico-form-element-background-color: white;
    --dt-row-selected: 224, 224, 224, 0.4;
    --pico-background-color: #f9f9f9;
    --pico-background-cardform: #ffffff;
    --pico-table-th-color: #f9fafb;

    --pico-h1-color: #0077a5;
    --pico-h2-color: #0077a5;
    --pico-h3-color: #0077a5;
    --pico-h4-color: #0077a5;
    --pico-h5-color: #0077a5;
    --pico-h6-color: #0077a5;

    --pico-form-element-toggle: #696969;
    --pico-form-element-border-color: #e8e8e8;
    --pico-background-color-toolbar: #c6c6c652;
    --pico-secondary-background: #37586f;
    --pico-secondary-hover-background: #416985;
    --pico-background-activity: #f9f9f9;
    --pico-mark-background-color: #c0d6fd;
    --pico-card-background-color: #ffffff;
    --pico-background-color-nav: var(--pico-background-color);
    --pico-color-nav: #4a4a4a;
    --pico-color-nav-secondary: #616161;
    --pico-secondary-background-button-bar: #e3e3e3;
    --pico-border-color-button-bar: #e3e3e3;

    /* ── Legacy compat aliases ── */
    --pico-topbar-height: var(--hb-topbar-height);
    --pico-sidebar-width: var(--hb-sidebar-width);
}