/* ============================================================
   WordDuel "Passing Notes" design tokens
   A sheet of ruled paper, handwriting, and pen marks. Paper stays
   light in every colour scheme; reduced motion turns the juice off.
   ============================================================ */
:root {
    color-scheme: light;

    /* Paper */
    --paper: #FBF6E9;
    --paper-2: #FFFDF6;          /* a fresh, lighter sheet (cards, keys, sheets) */
    --paper-3: #F3ECD9;          /* older, warmer scrap */
    --rule: rgba(80, 120, 200, 0.26);
    --margin-line: rgba(220, 80, 80, 0.55);
    --overlay: rgba(60, 50, 30, 0.45);

    /* Ink */
    --ink: #2B2B2B;
    --ink-2: rgba(43, 43, 43, 0.62);
    --ink-3: rgba(43, 43, 43, 0.4);
    --ink-faint: rgba(43, 43, 43, 0.22);
    --ink-me: #1F3A93;
    --ink-them: #7B3F9E;
    --pen-red: #C0392B;
    --highlighter: rgba(255, 225, 0, 0.6);
    --highlighter-solid: #FFE95C;
    --pencil: rgba(43, 43, 43, 0.35);

    /* Stickies */
    --sticky-yellow: #FFF39A;
    --sticky-pink: #FFC9D6;
    --sticky-blue: #CFE8FF;
    --sticky-green: #D9F3CF;

    /* Shape */
    --sketch-radius: 9px 11px 10px 8px / 10px 8px 11px 9px;
    --sketch-radius-lg: 14px 18px 16px 12px / 16px 12px 18px 14px;
    --sketch-oval: 50% 50% 48% 52% / 60% 40% 60% 40%;
    --shadow-note: 2px 3px 8px rgba(0, 0, 0, 0.18);
    --shadow-note-lg: 4px 6px 16px rgba(0, 0, 0, 0.22);
    --shadow-key: 1.5px 2px 0 var(--ink);
    --gutter: 16px;
    --tap: 44px;
    --content-max: 480px;
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);

    /* Type */
    --font-hand: 'Caveat', 'Bradley Hand', 'Segoe Print', cursive;
    --font-body: 'Patrick Hand', 'Comic Sans MS', 'Chalkboard SE', cursive;

    /* Motion */
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --dur-fast: 150ms;
    --dur: 250ms;
    --dur-slow: 400ms;
}

@media (prefers-reduced-motion: reduce) {
    :root { --dur-fast: 0ms; --dur: 0ms; --dur-slow: 0ms; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}