/* ============================================================
   CiteOwl — 2026 Redesign
   Egyptian palette: deep lapis chrome, papyrus document
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    /* ---- Chrome (panels, sidebar, topbar) — deep lapis lazuli ---- */
    /* Tight range: blue from hue, not brightness. Same stone, subtle depth. */
    --chrome-bg:        #0e1926;
    --chrome-bg2:       #111e30;
    --chrome-surface:   #152436;
    --chrome-hover:     #192a3c;
    --chrome-active:    #1e3042;
    --chrome-border:    #243648;
    --panel-border:     #2a3c50;

    /* ---- Document area (papyrus) ---- */
    --doc-bg:           #d4c9a8;
    --doc-surface:      #ccc1a0;
    --doc-hover:        rgba(0,0,0,0.04);
    --doc-border:       rgba(0,0,0,0.10);

    /* ---- Text — high contrast everywhere ---- */
    /* Panel: alabaster white + lapis-toned greys (no yellow) */
    --t1:               #e6e2dc;
    --t2:               #8e9aaa;
    --t3:               #5e6a78;
    --btn-text:         #fff;
    /* Document: dark ink on papyrus */
    --td1:              #10100a;
    --td2:              #22201a;
    --td2b:             #2e2a20;
    --td3:              #5e5444;

    /* ---- Accent (luminous warm gold, used sparingly) ---- */
    --accent:           #d4a844;
    --accent-rgb:       212,168,68;
    --accent-hover:     #e0b850;
    --accent-dim:       rgba(212,168,68,0.14);
    --accent-text:      #d4a844;
    --accent-border:    rgba(212,168,68,0.30);
    --accent-subtle:    rgba(212,168,68,0.06);
    /* Document-context accent (red ochre on papyrus — scribe's ink) */
    --doc-accent:       #8b3a2a;
    --doc-accent-dim:   rgba(139,58,42,0.12);
    --doc-ochre:        var(--doc-accent);
    --doc-ochre-dim:    var(--doc-accent-dim);
    --doc-ochre-hover:  #9a4433;

    /* ---- Semantic (Egyptian minerals) ---- */
    --red:              #d45840;
    --red-hover:        #dc6248;
    --green:            #4a8c5c;
    --red-bg:           rgba(212,88,64,0.14);
    --green-bg:         rgba(74,140,92,0.14);
    --red-border:       rgba(212,88,64,0.40);
    --green-border:     rgba(74,140,92,0.40);
    --warning:          #b45309;

    /* ---- Overlay & chrome surfaces ---- */
    --overlay-bg:       rgba(0,0,0,0.60);
    --chrome-gradient:  linear-gradient(180deg, #111e32 0%, #0e1926 50%, #101c2e 100%);
    --chrome-border-subtle: rgba(255,255,255,0.06);

    /* ---- Document surface extras ---- */
    --doc-bg-light:     #dcd0b0;
    --doc-border-subtle: rgba(0,0,0,0.06);
    --doc-hover-subtle: rgba(0,0,0,0.02);

    /* ---- Diff layer backgrounds ---- */
    /* Inline strength uses --green-bg / --red-bg (0.14) above. */
    --diff-add-faint:   rgba(74,140,92,0.05);   /* full-section wash */
    --diff-del-faint:   rgba(212,88,64,0.05);
    --diff-add-block:   rgba(74,140,92,0.22);   /* figure/equation/paragraph blocks */
    --diff-del-block:   rgba(212,88,64,0.22);

    /* ---- Scrollbar ---- */
    --scroll-thumb:       rgba(160,130,80,0.18);
    --scroll-thumb-hover: rgba(160,130,80,0.35);
    --scroll-thumb-active: rgba(160,130,80,0.50);

    /* ---- Type ---- */
    --sans:             'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    --serif:            'Source Serif 4', Georgia, 'Times New Roman', serif;
    --mono:             'SF Mono', 'Fira Code', 'Cascadia Code', 'Menlo', monospace;

    /* ---- Layout ---- */
    --sidebar-w:        240px;
    --chat-w:           380px;
    --doc-max-w:        88ch;

    --ease:             cubic-bezier(.4,0,.2,1);
    --dur:              140ms;
    --radius:           8px;
    --radius-2xs:       2px;
    --radius-xs:        3px;
    --radius-sm:        5px;
    --radius-lg:        12px;

    /* ---- Font-size scale ---- */
    --fs-xs:            11px;
    --fs-sm:            12px;
    --fs-base:          13px;
    --fs-md:            14px;
    --fs-lg:            16px;
    --fs-xl:            18px;
    --fs-2xl:           20px;
    --fs-3xl:           23px;
    --fs-4xl:           26px;

    /* ---- Spacing scale ---- */
    --space-1:          4px;
    --space-2:          8px;
    --space-3:          12px;
    --space-4:          16px;
    --space-5:          20px;
    --space-6:          24px;
    --space-7:          32px;
    --space-8:          40px;
    --space-9:          48px;

    /* ---- Z-index scale ---- */
    --z-section:    1;
    --z-sticky:     10;
    --z-dropdown:   200;
    --z-tooltip:    1000;
    --z-modal:      2000;
    --z-overlay:    9999;

    /* ---- Elevation ---- */
    --shadow-sm:  0 8px 24px rgba(0,0,0,0.40);
    --shadow-md:  0 12px 48px rgba(0,0,0,0.45);
    --shadow-lg:  0 24px 80px rgba(0,0,0,0.50);

    /* ---- Indicators (border-left for change/preview states) ---- */
    --indicator-changed: 3px solid var(--accent);
    --indicator-added:   3px solid var(--green);
    --indicator-removed: 3px solid var(--red);

    /* ---- Diff token colors ---- */
    --diff-add-color: #6cb87a;
    --diff-del-color: #d88070;
    --diff-add-body:  #2d6b3a;
    --diff-del-body:  #a84030;

    /* ---- macOS window-chrome dots (used by landing mockup) ---- */
    --macos-red:        #ff5f57;
    --macos-yellow:     #febc2e;
    --macos-green:      #28c840;

    /* ---- Lapis backgrounds (landing page panels) ---- */
    --lapis-bg-deep:    #0a1420;
    --lapis-bg-card:    #111e32;
    --lapis-bg-soft:    #0e1926;

    /* ---- Notice / warning banner (cream-on-warning) ---- */
    --notice-bg:        rgba(180,83,9,0.12);
    --notice-border:    rgba(180,83,9,0.32);
}

html, body {
    height: 100%;
    background: var(--chrome-bg);
    color: var(--t1);
    font: 13px/1.5 var(--sans);
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}