/* ─────────────────────────────────────────────────────────────
   tokens.css — the whole look of the site lives here.
   Change a value once and it changes everywhere.
   ───────────────────────────────────────────────────────────── */
:root {
  /* colour — a dark, warm "aubergine black" (the wine hue taken almost to black), white as the accent,
     and one soft rose for highlights. Change a value once and it changes everywhere. */
  --paper: #000000;         /* the page */
  --soft: #0f0e0f;          /* raised surfaces: panels, inputs, cards */
  --soft-2: #19171a;        /* hover surface */
  --line: #242124;          /* hairlines */
  --line-2: #363236;        /* borders on inputs and outlined buttons */
  --ink: #f7f2f3;           /* text */
  --ink-2: #c9bec3;         /* softer text */
  --muted: #8f8388;         /* labels, dates */
  --accent: #ffffff;        /* buttons (white, like Osahon's) */
  --on-accent: #000000;     /* text on white buttons */
  --accent-hover: #f4e8ec;
  --rose: #f0a9c0;          /* highlighted words, doodles, active states */
  --rose-soft: #ddb2c1;     /* page names */
  --accent-tint: rgba(240, 169, 192, .13);
  --wine: #8c0736;          /* your brand wine, used sparingly */
  --doodle: var(--rose);    /* hand-drawn lines */

  /* glass — menu, pop-ups, carousels */
  --glass: rgba(20, 19, 20, .64);
  --glass-strong: rgba(14, 13, 14, .9);
  --glass-edge: rgba(255, 255, 255, .08);
  --glass-blur: blur(22px) saturate(150%);
  --glass-shadow: 0 30px 70px -30px rgba(0, 0, 0, .75), 0 2px 10px rgba(0, 0, 0, .35);

  /* type */
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --fs-xs: .74rem;
  --fs-sm: .86rem;
  --fs-md: .95rem;
  --fs-lg: clamp(1rem, .97rem + .12vw, 1.08rem);
  --fs-xl: clamp(1.2rem, 1.1rem + .4vw, 1.45rem);
  --fs-2xl: clamp(1.5rem, 1.28rem + .9vw, 2.05rem);
  --fs-3xl: clamp(2rem, 1.55rem + 1.9vw, 3.1rem);

  /* shape + space */
  --r-sm: 12px;
  --r-md: 20px;
  --r-lg: 28px;
  --wrap: 1200px;    /* includes the side space */
  --narrow: 768px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --gut: clamp(20px, 5vw, 48px);    /* space at the sides of every page */
  --gut-l: max(var(--gut), env(safe-area-inset-left, 0px));
  --gut-r: max(var(--gut), env(safe-area-inset-right, 0px));

  color-scheme: dark;
}