/* =====================================================
   CSS Variables, Reset, Base Styles
===================================================== */

/* ═══════════════════════════════════════════════════════════════
   PENNPAPPER  –  Professional Diagram Studio
   Full CSS  |  Premium Office-Ribbon Design
═══════════════════════════════════════════════════════════════ */

/* ── Variables ─────────────────────────────────────────────── */
:root {
    /* Color: white / black / true blue */
    --blue: #0000ff;
    --blue-dark: #0000cc;
    --blue-light: #ebebff;
    --blue-mid: #b3b3ff;
    --accent: #0000ff;
    --text: #000000;
    --text-2: #333333;
    --text-3: #777777;
    --bg: #ffffff;
    --surface: #ffffff;
    --border: #d4d4d4;
    --border-2: #c0c0c0;
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .08);
    --shadow-sm: 0 2px 6px rgba(0, 0, 0, .1);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, .14);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, .2);
    --radius: 6px;
    /* Aptos is Microsoft's new default font; falls back to Calibri then system */
    --font: 'Aptos', 'Calibri', 'Segoe UI', system-ui, sans-serif;
    --sidebar-w: 240px;
    --title-h: 40px;
    --ribbon-h: 84px;
    /* Increased from 72px to prevent clipping */
    --header-h: calc(var(--title-h) + var(--ribbon-h) + 1px);
}

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

body {
    font-family: var(--font);
    color: var(--text);
    background: var(--bg);
    overflow: hidden;
    height: 100vh;
    -webkit-font-smoothing: antialiased;
}

button {
    cursor: pointer;
    font-family: var(--font);
}

select,
input {
    font-family: var(--font);
}

a {
    text-decoration: none;
}