/*
 * Centralised application styling for Paper Assistant (web client).
 *
 * All colour, font, and spacing tokens live here as CSS custom properties,
 * translated from the original tkinter style.py constants.
 */

/* ── Design Tokens ───────────────────────────────────────────────────── */

:root {
    /* Colour palette — Toolbar */
    --toolbar-bg: #ffffff;
    --toolbar-fg: #1a1a1a;
    --toolbar-btn-active: #e0e0e0;
    --toolbar-sep-color: #c8c8c8;

    /* Colour palette — Overlay / popup */
    --overlay-bg: #f5f5f5;
    --overlay-border: #0055AA;
    --overlay-text: #1a1a1a;
    --popup-bg: #f5f5f5;
    --popup-text: #1a1a1a;
    --popup-term-color: #0055AA;

    /* Colour palette — Chat panel */
    --chat-panel-bg: #f9f9f9;
    --chat-panel-width: 350px;
    --chat-user-bg: #0055AA;
    --chat-user-fg: #ffffff;
    --chat-assistant-bg: #e8e8e8;
    --chat-assistant-fg: #1a1a1a;
    --chat-input-bg: #ffffff;
    --chat-header-bg: #f0f0f0;

    /* Colour palette — Dialogs */
    --dialog-error-bg: #f44336;
    --dialog-success-bg: #4CAF50;
    --dialog-primary-bg: #2196F3;
    --dialog-muted-fg: #666666;

    /* Typography */
    --font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    --toolbar-font-size: 10pt;
    --icon-font-size: 11pt;
    --dialog-font-body: 10pt;
    --dialog-font-small: 9pt;
    --dialog-font-title: 16pt;
    --popup-font-size: 14px;
    --summary-font-size: 18px;
    --summary-font-min: 8px;

    /* Spacing — Toolbar */
    --toolbar-btn-padx: 10px;
    --toolbar-btn-pady: 6px;
    --toolbar-sep-width: 1px;
    --toolbar-sep-padx: 6px;
    --toolbar-sep-pady: 4px;
    --toolbar-progress-padx: 10px;
    --toolbar-progress-length: 150px;
    --toolbar-label-right-padx: 12px;
    --toolbar-height: 40px;

    /* Spacing — Popups */
    --popup-padding: 8px;
    --popup-border-width: 2px;
    --popup-corner-radius: 12px;
    --popup-max-width: 600px;
    --popup-offset-x: 12px;
    --popup-offset-y: 12px;
    --popup-term-def-gap: 4px;

    /* Spacing — Summary overlays */
    --summary-corner-radius: 12px;
    --summary-border-width: 2px;
    --summary-padding: 5px;

    /* Scrollbar */
    --scrollbar-track: #f0f0f0;
    --scrollbar-thumb: #c8c8c8;
    --scrollbar-thumb-active: #a0a0a0;
}

/* ── Base Reset ──────────────────────────────────────────────────────── */

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

html, body {
    height: 100%;
    overflow: hidden;
    font-family: var(--font-family);
    font-size: var(--toolbar-font-size);
    color: var(--toolbar-fg);
    background: #ffffff;
}

/* ── Scrollbar Styling ───────────────────────────────────────────────── */

::-webkit-scrollbar {
    width: 13px;
    height: 13px;
}

::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 0;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-active);
}

::-webkit-scrollbar-thumb:active {
    background: #808080;
}

/* ── Icon Sizing ─────────────────────────────────────────────────────── */

.icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.icon--small {
    width: 16px;
    height: 16px;
}

.icon--tiny {
    width: 12px;
    height: 12px;
}