/* =========================================================
   vars.css — variables and reset
   Loaded on every page.
   ========================================================= */

:root {
    /* warm paper palette */
    --paper:         #f6ecd6;
    --paper-alt:     #efe1c2;
    --card:          #fffaf0;
    --card-alt:      #fbf2dd;

    /* ink */
    --ink:           #2b1d12;
    --ink-soft:      #6e5740;
    --ink-muted:     #9a8870;

    /* rules */
    --rule:          #e6d6b6;
    --rule-strong:   #d1b98b;

    /* accents */
    --rust:          #b8432a;
    --rust-soft:     #f3dbce;
    --amber:         #a5791c;
    --amber-soft:    #f2e2a8;
    --olive:         #6d7a3a;
    --olive-soft:    #e6e4b8;
    --red:           #c82020;
    --red-deep:      #7a1010;
    --green:         #1e7016;
    --green-soft:    #8fda80;
    --green-text:    #1a5912;

    /* interaction */
    --mark:          #f4da8a;
    --focus-ring:    rgba(184, 67, 42, 0.25);
    --focus-ring-amber:         rgba(165, 121, 28, 0.18);
    --focus-ring-danger:        rgba(200, 32, 32, 0.08);
    --focus-ring-danger-strong: rgba(200, 32, 32, 0.14);
    --scrim:         rgba(0, 0, 0, 0.42);
    --shadow-sm:     0 1px 2px rgba(43, 29, 18, 0.05);
    --shadow-md:     0 2px 6px rgba(43, 29, 18, 0.06), 0 1px 2px rgba(43, 29, 18, 0.04);
    --shadow-lg:     0 2px 8px rgba(43, 29, 18, 0.12);
    --shadow-pop:    0 3px 10px rgba(43, 29, 18, 0.22);
}

/* Reset */
* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; overscroll-behavior: none; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 14px;
    font-feature-settings: "ss01", "cv11";
    line-height: 1.55;
    background: var(--paper);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a { color: var(--ink); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

em { font-style: normal; }

::selection { background: var(--mark); color: var(--ink); }

@keyframes rotate { to { transform: rotate(360deg); } }