@layer tokens{
  :root{
    /* Fonts */
    --font-ui: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-fact: "Spectral", serif;

    /* Text + UI colors (from your original CSS) */
    --text: #f4eec7;
    --ink-light: #f4eec7;   /* pale text for dark glass UIs */
    --ink-dark:  #2e1f00;   /* yolk-brown for light parchment bubbles */

    /* Category chip colors */
    --chip-biochem: #60d394; --chip-animals: #bef264; --chip-mind: #d8b4fe; --chip-cosmos: #a5b4fc; --chip-words: #ffd166;

    /* Chip (glass) look */
    --chip-bg: rgba(255, 255, 255, 0.10);
    --chip-text: #f5f5f5;
    --chip-border: rgba(255, 255, 255, 0.20);

    /* Misc tokens you’ll probably reuse */
    --glass-blur: 6px;

    /* For confetti enabling, 1 is on, 0 is off */
    --enable-confetti: 1; /* set to 0 to disable globally */

    /*Dimensional variables*/
    --gutter: clamp(12px, 4vw, 20px);
    --fact-min: 280px;
    --fact-max: 600px;

    /* tweaking layout size parameters*/

    --stage-max: 1120px;      /* total content width */
    --egg-max:   380px;       /* desktop egg size cap */
    --row-gap:   20px;
  }
}

:root[style*="--enable-confetti:0"] #confettiLayer {
  display: none !important;
}