/*@layer tokens, base, components, themes, effects, state;*/
/*@layer tokens, base, themes, components, effects, state;*/

@layer tokens, base, effects, components, themes, state;

@layer tokens{
  :root{
    /* Fonts */
    --font-ui: Inter, "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", 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;

    /* Egg/fact glow scaling (desktop baseline = unchanged) */
    --glow-mult: 1;
    --glow-mult-capped: min(var(--glow-mult), 1.6);
    --egg-glow-strength: 1;
    --egg-glow-blur-near: 25px;
    --egg-glow-blur-far: 60px;
    --egg-glow-blur-outer: 100px;
    --egg-glow-spread-near: 0px;
    --egg-glow-spread-far: 0px;
    --egg-glow-spread-outer: 0px;
    --fact-glow-blur: 20px;
    --fact-glow-spread: 0px;

    --glow-alpha-near: 0.33;
    --glow-alpha-far: 0.2;
    --glow-alpha-outer: 0.2;
    --glow-alpha-fact: 0.33;

    --egg-glow-near-blur-final: calc(var(--egg-glow-blur-near) * var(--glow-mult-capped));
    --egg-glow-far-blur-final: calc(var(--egg-glow-blur-far) * var(--glow-mult-capped));
    --egg-glow-outer-blur-final: calc(var(--egg-glow-blur-outer) * var(--glow-mult-capped));
    --egg-glow-spread-near-final: calc(var(--egg-glow-spread-near) * var(--glow-mult-capped));
    --egg-glow-spread-far-final: calc(var(--egg-glow-spread-far) * var(--glow-mult-capped));
    --egg-glow-spread-outer-final: calc(var(--egg-glow-spread-outer) * var(--glow-mult-capped));
    --fact-glow-blur-final: calc(var(--fact-glow-blur) * var(--glow-mult-capped));
    --fact-glow-spread-final: calc(var(--fact-glow-spread) * var(--glow-mult-capped));

    --glow-alpha-near-final: min(0.58, calc(var(--glow-alpha-near) * var(--egg-glow-strength) * var(--glow-mult-capped)));
    --glow-alpha-far-final: min(0.42, calc(var(--glow-alpha-far) * var(--egg-glow-strength) * var(--glow-mult-capped)));
    --glow-alpha-outer-final: min(0.38, calc(var(--glow-alpha-outer) * var(--egg-glow-strength) * var(--glow-mult-capped)));
    --glow-alpha-fact-final: min(0.54, calc(var(--glow-alpha-fact) * var(--egg-glow-strength) * var(--glow-mult-capped)));
  }

  :root {
    /* Aurora defaults (inert) */
    --aurora-opacity: 0.78;
    --aurora-hue: 0deg;
    --aurora-sat: 1;
    --aurora-bright: 1;

    --aurora-air-alpha: .10;
    --aurora-pink-alpha: .14;
  }
}

@media ((hover: none) and (pointer: coarse)), (max-width: 480px){
  :root{
    --glow-mult: 1.55;
  }
}

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