/* ── Theme tokens ───────────────────────────────────── */
    :root, [data-theme="light"] {
      --bg:      hsla(48, 20%, 95%, 0.9);
      --surface: hsla(60, 11%, 91%, 0.7);
      --fg:      hsl(0, 0%, 7%);
      --muted:   hsla(60, 3%, 45%, 1);
      --rule:    hsl(51, 7%, 80%);
      --red:     hsl(15, 100%, 50%);
      /* --red:     hsl(3, 79%, 53%); */
      --surface: hsl(50, 12%, 90%);
    }
    [data-theme="dark"] {
      --bg:      hsl(0, 0%, 7%);
      --surface: hsl(0, 0%, 11%);
      --fg:      hsl(51, 19%, 93%);
      --muted:   hsl(60, 2%, 52%);
      --rule:    hsl(0, 0%, 18%);
      --red:     hsl(15, 100%, 50%);
      /* --red:     hsl(3, 79%, 53%); */
    }

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

    html { font-size: 16px; }
    body {display: flex;flex-direction: column;min-height: 100vh;
      font-family: 'Barlow', sans-serif;
      background-color: var(--bg);
      color: var(--fg);     
      transition: background-color .3s, color .3s;
    }

    h1, h2, h3, h4 {font-family: 'Barlow Condensed', sans-serif;}
    /* h1, h2, h3{letter-spacing:0.01425em} */

    /* ── Section animation ────────────────────────────────── */
    @keyframes swiss-in {
      from { opacity: 0; transform: translateY(16px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .section-fade { animation: swiss-in .3s ease both; }

    /* ── Active nav indicator ─────────────────────────────── */
    .nav-link[data-active="true"] {
      color: var(--red) !important;
      background: var(--surface);
    }

    /* ── Scrollbar ─────────────────────────────────────────── */
    ::-webkit-scrollbar { width: 6px; height: 6px; }
    ::-webkit-scrollbar-track { background: var(--bg); }
    ::-webkit-scrollbar-thumb { background: var(--rule); }

    /* Tailwind needs help with dynamic CSS vars in arbitrary values */
    .bg-surface { background-color: var(--surface); }
    .text-fg     { color: var(--fg); }
    .text-muted  { color: var(--muted); }
    .text-red    { color: var(--red); }
    .border-rule { border-color: var(--rule); }

    /* Mono override */
    .font-mono { font-family: 'DM Mono', monospace; }