static/css/variables.css

/* static/css/variables.css — Android-first Design System */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
    /* ── OLED Dark Palette ── */
    --bg-base: #000000;
    --bg-surface: #0a0a0a;
    --bg-elevated: #111111;
    --panel-bg: rgba(15, 15, 15, 0.8);

    /* ── Accent: Amber Gold ── */
    --accent: #ffc107;
    --accent-dim: rgba(255, 193, 7, 0.12);
    --accent-glow: rgba(255, 193, 7, 0.25);
    --accent-hover: #ffca2c;
    --accent-text: #000000;

    /* ── Semantic Colors ── */
    --success: #22c55e;
    --success-dim: rgba(34, 197, 94, 0.12);
    --error: #ef4444;
    --error-dim: rgba(239, 68, 68, 0.12);
    --warning: #f59e0b;
    --info: #3b82f6;

    /* ── Text Hierarchy ── */
    --text-1: #f8fafc;
    --text-2: #94a3b8;
    --text-3: #64748b;
    --text-disabled: #475569;

    /* ── Surface & Borders ── */
    --border: rgba(255, 255, 255, 0.06);
    --border-strong: rgba(255, 255, 255, 0.12);
    --divider: rgba(255, 255, 255, 0.04);
    --scrim: rgba(0, 0, 0, 0.6);

    /* ── Typography ── */
    --font-ui: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

    /* ── Spacing (4dp grid) ── */
    --sp-0: 0;
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-8: 32px;
    --sp-10: 40px;
    --sp-12: 48px;

    /* ── Radii ── */
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 16px;
    --r-xl: 20px;
    --r-full: 9999px;

    /* ── Elevation ── */
    --elev-1: 0 1px 3px rgba(0,0,0,0.5);
    --elev-2: 0 4px 12px rgba(0,0,0,0.6);
    --elev-3: 0 8px 30px rgba(0,0,0,0.7);

    /* ── Layout (Android-first) ── */
    --topbar-h: 56px;
    --bottom-nav-h: 64px;
    --sidebar-w: 280px;

    /* ── Touch ── */
    --touch-min: 48px;
    --touch-gap: 8px;
}

/* ── Light Theme ── */
:root.light {
    --bg-base: #f8fafc;
    --bg-surface: #ffffff;
    --bg-elevated: #f1f5f9;
    --panel-bg: rgba(255, 255, 255, 0.9);

    --accent: #d97706;
    --accent-dim: rgba(217, 119, 6, 0.1);
    --accent-glow: rgba(217, 119, 6, 0.2);
    --accent-hover: #b45309;
    --accent-text: #ffffff;

    --text-1: #0f172a;
    --text-2: #475569;
    --text-3: #94a3b8;
    --text-disabled: #cbd5e1;

    --border: rgba(0, 0, 0, 0.06);
    --border-strong: rgba(0, 0, 0, 0.12);
    --divider: rgba(0, 0, 0, 0.04);
    --scrim: rgba(0, 0, 0, 0.4);

    --elev-1: 0 1px 3px rgba(0,0,0,0.08);
    --elev-2: 0 4px 12px rgba(0,0,0,0.1);
    --elev-3: 0 8px 30px rgba(0,0,0,0.12);
}

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

html { 
    -webkit-text-size-adjust: 100%; 
    overscroll-behavior: contain;
}

body {
    font-family: var(--font-ui);
    background: var(--bg-base);
    color: var(--text-1);
    height: 100dvh;
    overflow: hidden;
    display: flex;
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* ── Tap Highlight ── */
a, button, [role="button"], input, select, textarea, label,
.nav-item, .dash-card, .file-item, .settings-tab, .term-tab,
.termux-key, .bottom-nav-item, .chat-msg {
    -webkit-tap-highlight-color: transparent;
}

/* ── Focus ── */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ── Skip Link ── */
.skip-link {
    position: absolute;
    top: -100%;
    left: var(--sp-4);
    background: var(--accent);
    color: var(--accent-text);
    padding: var(--sp-2) var(--sp-4);
    border-radius: var(--r-sm);
    font-weight: 600;
    font-size: 14px;
    z-index: 99999;
    text-decoration: none;
    transition: top 0.15s ease;
}
.skip-link:focus { top: var(--sp-4); }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--text-3); border-radius: var(--r-full); }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ── Ripple Effect ── */
.ripple {
    position: relative;
    overflow: hidden;
}
.ripple::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at var(--ripple-x, 50%) var(--ripple-y, 50%), var(--accent-glow) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}
.ripple:active::after { opacity: 1; }

/* ── Markdown ── */
.markdown-body pre {
    background: var(--bg-elevated) !important;
    padding: var(--sp-3);
    border-radius: var(--r-sm);
    overflow-x: auto;
    margin: var(--sp-2) 0;
    border: 1px solid var(--border);
}
.markdown-body code {
    font-family: var(--font-mono);
    font-size: 13px;
    background: rgba(255,255,255,0.06);
    padding: 2px 6px;
    border-radius: 4px;
}
.markdown-body pre code { background: transparent; padding: 0; color: #e2e8f0; }
.markdown-body p { margin: 0 0 var(--sp-2) 0; }
.markdown-body p:last-child { margin: 0; }

/* ── Toast ── */
#toast-container {
    position: fixed;
    bottom: calc(var(--bottom-nav-h) + var(--sp-4));
    left: var(--sp-4);
    right: var(--sp-4);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    pointer-events: none;
}
#toast-container > * { pointer-events: auto; }

@media (min-width: 769px) {
    #toast-container {
        bottom: var(--sp-6);
        left: auto;
        right: var(--sp-6);
        width: 360px;
    }
}

/* ── Utility ── */
.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}