/* tokens.css — Aurora Glass design tokens, shared by every page (DESIGN-D.md §2).
A night sky, aurora light and one warm lantern. Change values in
DESIGN-D.md first, then here.
FONTS. Lexend (display, numbers, the logo) and Manrope (everything you
read) are served from our own /fonts/ (css/fonts.css), linked from each
page's before the other stylesheets (@import would block the page):
Both families fall back to the system UI face, so nothing breaks offline
or before the fonts arrive; the service worker keeps a copy of the Google
files once they have been fetched.
The last block keeps every name the old funfair design used, re-pointed
into this palette, so a page that has not been converted yet still draws
in Aurora colours. New code uses the names above it. */
:root{
color-scheme:dark;
/* ---- night ---- */
--polar:#070D1F; /* deepest canvas, behind sheets */
--fjord:#0B2A3A; /* teal night, the top of the sky */
--indigo:#1B1F5E; /* indigo night, tiles and the lower sky */
/* ---- aurora ---- */
--mint:#5CF2B0; /* primary action, "on", success, progress */
--mint-hi:#8BF8CC;
--mint-deep:#3FE0B8;
--cyan:#4FD8F0; /* links, focus, info */
--violet:#9B8CFF; /* secondary accent, Peaceful, calm */
--violet-deep:#8B7CFF;
--periwinkle:#7FA8FF;
--gold:#FFCB6B; /* warmth: NEW, stars, rewards, "hurry" */
--gold-hi:#FFE09A;
--coral:#FF8577; /* the last ten seconds only: warm, never alarm-red */
/* ---- type and light ---- */
--snow:#F3F8FF; /* text: 17:1 on the canvas */
--mist:#A7B6D3; /* secondary text: 8:1 on the canvas */
--dim:#6D7FA3; /* tertiary labels, 12px+ bold only (4.3:1) */
--frost:#EAF2FB; /* light surface */
--ink:#0B1530; /* text on light or bright fills */
--on-mint:#03241B; /* 13:1 on mint */
--on-gold:#2A1A00; /* 12:1 on gold */
--on-violet:#120E3A; /* 7:1 on violet */
/* ---- jigsaw modes and timer stages ---- */
--mode-easy:var(--mint);
--mode-medium:var(--cyan);
--mode-hard:var(--gold);
--mode-peaceful:var(--violet);
--stage-calm:var(--mint);
--stage-hurry:var(--gold);
--stage-panic:var(--coral);
/* ---- glass: the light comes from behind it, never from the glass ---- */
--glass-fill:linear-gradient(180deg,rgba(255,255,255,.095),rgba(255,255,255,.032));
--glass-flat:rgba(255,255,255,.06);
--glass-line:rgba(255,255,255,.12);
--glass-line-2:rgba(255,255,255,.2);
--glass-hi:inset 0 1px 0 rgba(255,255,255,.14);
--frost-blur:blur(22px) saturate(150%); /* small things over photos or the aurora only */
--surface:#121A45; /* opaque glass, where nothing may show through */
--surface-sheet:linear-gradient(180deg,#19225C 0%,#111848 60%,#0E1440 100%);
--scrim:rgba(3,6,20,.62);
/* ---- gradients ---- */
--grad-night:linear-gradient(180deg,#062230 0%,#0A1A36 22%,#0D1643 55%,#0C1239 80%,#070A22 100%);
--grad-aurora:linear-gradient(92deg,#7DF7C6 0%,#5CF2B0 18%,#4FD8F0 52%,#A99CFF 88%);
--grad-aurora-line:linear-gradient(90deg,rgba(92,242,176,0),rgba(92,242,176,.7) 20%,rgba(79,216,240,.7) 55%,rgba(155,140,255,.7) 85%,rgba(155,140,255,0));
--grad-mint:linear-gradient(180deg,#8BF8CC 0%,#5CF2B0 45%,#3FE0B8 100%);
--grad-violet:linear-gradient(180deg,#B9AEFF 0%,#9B8CFF 50%,#8173F0 100%);
--grad-gold:linear-gradient(180deg,#FFE09A 0%,#FFCB6B 100%);
--grad-progress:linear-gradient(90deg,var(--cyan),var(--mint));
--grad-rim:linear-gradient(140deg,rgba(92,242,176,.55),rgba(79,216,240,.12) 35%,rgba(155,140,255,.1) 65%,rgba(155,140,255,.5));
--grad-pearl:radial-gradient(circle at 34% 28%,#fff 0 18%,#EEF3FF 42%,#C7D3F0 82%,#AEBDE4 100%);
/* ---- type ---- */
--font-display:"Lexend",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
--font-body:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
--fs-xs:12px; --fs-sm:14px; --fs-md:17px; --fs-lg:19px; --fs-xl:24px;
--fs-h3:20px;
--fs-h2:clamp(28px,3.4vw,42px);
--fs-h1:clamp(34px,5.4vw,56px);
--fs-display:clamp(46px,6.4vw,84px);
--lh-tight:1.05; --lh-body:1.55;
/* ---- shape ---- */
--r-xs:7px; --r-sm:12px; --r-md:16px; --r-lg:22px; --r-xl:28px; --r-btn:17px; --r-pill:999px;
/* ---- space ---- */
--s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px;
--gutter:16px;
--content:1240px;
--tap:44px;
/* ---- depth: navy shadows, never black-grey ---- */
--lift:0 30px 60px -28px rgba(1,4,16,.85);
--lift-sm:0 18px 36px -20px rgba(1,4,16,.85);
--shadow-lo:0 2px 6px rgba(1,4,16,.45);
--shadow-md:0 14px 30px -12px rgba(1,4,16,.7);
--shadow-hi:0 40px 80px -30px rgba(1,4,16,.9);
--glow-mint:0 0 0 1px rgba(92,242,176,.35),0 14px 34px -10px rgba(92,242,176,.6);
/* ---- layers ---- */
--z-sky:-1; --z-base:0; --z-raised:2; --z-header:50; --z-hud:60; --z-ring:70;
--z-scrim:200; --z-sheet:210; --z-toast:300; --z-fx:400; --z-transition:900;
/* ---- motion: glide in, settle with a tiny overshoot ---- */
--ease-out:cubic-bezier(.2,.8,.2,1);
--ease-in:cubic-bezier(.6,0,.8,.3);
--ease-spring:cubic-bezier(.34,1.56,.64,1);
--ease-pop:var(--ease-spring);
--ease-swing:cubic-bezier(.65,0,.35,1);
--t-tap:100ms; --t-quick:160ms; --t-glide:240ms; --t-move:280ms; --t-sheet:320ms; --t-scene:520ms; --t-slow:900ms;
--t-drift:26s;
/* ---- safe areas ---- */
--sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px);
--sal:env(safe-area-inset-left,0px); --sar:env(safe-area-inset-right,0px);
/* ---- legacy funfair names, re-pointed. Don't use these in new code ---- */
--night:#0A1433;
--night-2:#070D1F;
--night-3:#050A18;
--panel:#151D4A;
--panel-2:#1C2660;
--edge:var(--glass-line);
--edge-2:var(--glass-line-2);
--text:var(--snow);
--muted:var(--mist);
--pink:var(--violet);
--gold-2:var(--gold-hi);
--teal:var(--cyan);
--lime:var(--mint);
--sky:var(--periwinkle);
--tang:var(--gold);
--good:var(--mint);
--bad:var(--coral);
--plum:var(--ink);
--wood-l:var(--frost);
--wood-d:var(--dim);
--bulb-hot:#EFFFF8;
--bulb-off:rgba(255,255,255,.14);
--neon-off:var(--dim);
--ticket:var(--frost);
--ticket-ink:var(--ink);
--velvet:#1B1F5E;
--velvet-2:#11163F;
--candy:#C9C1FF;
--skip:#EEF3FF;
--skip-deep:#AEBDE5;
--skip-ink:var(--ink);
--lip-pink:transparent; --lip-gold:transparent; --lip-teal:transparent;
--lip-violet:transparent; --lip-lime:transparent; --lip-coral:transparent;
--font-stamp:var(--font-display);
--ease-slam:var(--ease-spring);
--grad-wordmark:var(--grad-aurora);
--grad-rainbow:linear-gradient(90deg,var(--mint),var(--cyan),var(--violet));
--grad-sky:
radial-gradient(1100px 620px at 8% 2%,rgba(79,216,240,.16),transparent 62%),
radial-gradient(900px 640px at 96% 6%,rgba(155,140,255,.18),transparent 62%),
radial-gradient(1000px 800px at 100% 80%,rgba(155,140,255,.10),transparent 60%),
var(--grad-night);
--grad-dots:radial-gradient(rgba(255,255,255,.14) 1px,transparent 1.2px);
--grad-card:var(--glass-fill);
--grad-bulb:var(--grad-pearl);
--glow-bulb:0 0 10px rgba(92,242,176,.55);
--neon:0 0 18px color-mix(in srgb,var(--glow,#4FD8F0) 45%,transparent);
--neon-soft:0 0 8px color-mix(in srgb,var(--glow,#4FD8F0) 40%,transparent);
}
@media (min-width:600px){ :root{ --gutter:24px } }
@media (min-width:1024px){ :root{ --gutter:32px } }
@media (prefers-reduced-motion:reduce){ :root{ --t-move:120ms; --t-sheet:150ms; --t-scene:150ms; --t-slow:150ms } }
:root[data-calm]{ --t-move:120ms; --t-sheet:150ms; --t-scene:150ms; --t-slow:150ms }