/* ============================================================
   TOKENS — GLOBAL THEME VARIABLES
   ------------------------------------------------------------
   - Colors, radii, and easing curves
   - Light and dark theme overrides
============================================================ */
:root {
  --bg:#F6F1E7;
  --bg-accent:#EDE6D8;
  --paper:#FBF8F2;
  --paper-alt:#F1E9DC;

  --ink:#2E2A27;
  --muted:#5B524B;
  --line:rgba(64,45,21,.18);
  --tape:#D9D1C5;

  --sage:#3E5E4E;    /* evergreen */
  --rust:#B7664A;    /* clay */
  --gold:#C7932A;    /* brass */
  --ocean:#2F6B74;   /* teal */
  --plum:#6C4A6B;    /* eggplant */

  --radius-lg:22px;
  --radius-md:14px;
  --ease:cubic-bezier(.2,.7,.2,1);
}

html[data-theme="dark"] {
  --bg:#181b19;
  --bg-accent:#111412;
  --paper:#242826;
  --paper-alt:#1e2321;

  --ink:#f2eee8;
  --muted:#bdb6ae;
  --line:rgba(250,244,233,.12);
  --tape:#CFC6B4;
}

/* ============================================================
   TAPE STYLES (ENHANCED)
   ------------------------------------------------------------
   Apply realism tweaks for dark mode
============================================================ */

/* Default tape (light mode = beige masking tape look) */
.paper.taped::before,
.paper.taped::after {
  background: var(--tape);
  border-radius: 4px;
  opacity: 0.96;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}

/* Dark mode: softer, more realistic tape */
html[data-theme="dark"] .paper.taped::before,
html[data-theme="dark"] .paper.taped::after {
  background: linear-gradient(135deg,
    rgba(157,150,138,0.92) 0%,
    rgba(157,150,138,0.85) 48%,
    rgba(200,195,185,0.92) 100%);
  opacity: 0.88;
  border-radius: 2px; /* more squared, less “sticker-like” */
  box-shadow: 0 1px 2px rgba(0,0,0,0.25);
}

/* === Optional Enhancement 2: Glossy (Scotch tape) look === */

html[data-theme="dark"] .paper.taped::before,
html[data-theme="dark"] .paper.taped::after {
  background: linear-gradient(135deg,
    rgba(190,185,175,0.85) 0%,
    rgba(220,215,205,0.9) 50%,
    rgba(190,185,175,0.85) 100%);
  opacity: 0.75;
  border-radius: 2px;
  box-shadow: inset 0 1px 2px rgba(255,255,255,0.2),
              0 1px 2px rgba(0,0,0,0.25);
}