/* ==========================================================================
   Soonest design tokens: the ONE place where look and feel is decided.
   styles.css must only reference these tokens (var(--...)), never raw values.

   To make a new look: copy a [data-look="..."] block at the bottom, change the
   brand colours and the ten person colours, and add it to LOOKS in lib.js.
   Light and dark come from light-dark(<light>, <dark>), so each token is defined once.
   ========================================================================== */

:root {
  color-scheme: light dark;

  /* ---- Typeface ---- */
  --font-display: "Fredoka", "Fredoka One", ui-rounded, system-ui, sans-serif;
  --font: "Nunito", ui-rounded, "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;   /* codes people read and type */
  --weight-body: 500;
  --weight-strong: 700;
  --weight-display: 600;
  --leading: 1.4;

  /* ---- Type scale ---- */
  --text-xs: .75rem;
  --text-sm: .85rem;
  --text-base: 1rem;
  --text-md: 1.05rem;
  --text-lg: 1.25rem;
  --text-xl: 1.6rem;
  --text-2xl: 2.1rem;
  --text-hero: clamp(1.6rem, 5.5vw, 2.6rem);
  --text-number: clamp(1.6rem, 6vw, 2.5rem);
  --text-takeover: clamp(2rem, 9vw, 4rem);

  /* ---- Spacing scale ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-24: 96px;

  /* ---- Shape and size ---- */
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 999px;
  --border-w: 1px;
  --border-w-strong: 2px;
  --tap: 44px;                 /* minimum touch target */
  --avatar: 54px;
  --avatar-lg: 84px;
  --avatar-xl: 120px;
  --tile-min: 66px;
  --content-max: 960px;
  --dialog-w: 460px;
  --card-min: 270px;
  --panel-min: 260px;

  /* ---- Motion ---- */
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur-fast: .15s;
  --dur-base: .2s;
  --dur-pop: .5s;
  --dur-drift: 9s;
  --dur-bob: 2.4s;
  --dur-bob-fast: 1.6s;
  --dur-run: 1.8s;           /* how long a race/arc/orbit run takes */
  --stagger: .09s;           /* each next item starts a beat later */
  --ease-run: cubic-bezier(.22, .8, .24, 1);

  /* ---- Layering ---- */
  --z-cta: 10;
  --z-menu: 30;
  --z-takeover: 60;
  --z-confetti: 70;
  --z-toast: 80;

  /* ---- Colour: surfaces and text (light, dark) ---- */
  --bg: light-dark(#fff8fc, #150d22);
  --surface: light-dark(#ffffff, #21152f);
  --ink: light-dark(#2a1740, #f6edfd);
  --muted: light-dark(#6f5d85, #b9a8cf);
  --line: light-dark(#ecdcf6, #3b2854);
  --focus: var(--brand-2);
  --danger: light-dark(#c0264b, #ff7a98);
  --notice-bg: light-dark(#fff1b8, #4a3d10);
  --notice-ink: light-dark(#4a3a00, #ffe9a3);
  --scrim: light-dark(rgb(20 8 40 / .5), rgb(0 0 0 / .65));

  /* ---- Colour: depth ---- */
  --shadow-ink: light-dark(rgb(60 10 100 / .22), rgb(0 0 0 / .55));
  --shadow-sm: 0 8px 22px var(--shadow-ink);
  --shadow-md: 0 14px 36px var(--shadow-ink);
  --shadow-lg: 0 24px 64px var(--shadow-ink);
  --text-shadow: 0 2px 8px rgb(0 0 0 / .3);

  /* ---- Colour: on top of a person's coloured panel (always white-on-colour) ---- */
  --on-colour: #ffffff;
  --tile-bg: rgb(255 255 255 / .96);
  --tile-ink: #2a1740;
  --tile-muted: #6f5d85;
  --ring-on-colour: rgb(255 255 255 / .8);

  /* ---- Person colours: how a person's panel is painted ---- */
  --sat: 85%;
  --hue-shift-1: 40;
  --hue-shift-2: 85;
  --tone-step: 4%;
  --avatar-shift: 45;
  --glow-alpha: .22;
  --accent-sat: 70%;
  --accent-l: light-dark(42%, 66%);   /* coloured text on a plain surface */
  --ring-sat: 75%;
  --ring-l: light-dark(55%, 62%);     /* selected-card outline */
  --hover-l: light-dark(65%, 50%);
  --svg-track: 4px;          /* arc and ring line widths (SVG user units) */
  --svg-arc: 8px;
  --svg-ring: 3px;
  --svg-dash: 4 8;
  --past-opacity: .6;
  --past-filter: grayscale(.6);
  --tile-num-l: 40%;                  /* number colour inside the white tiles */
}

/* ===== Looks: each only overrides brand colours + the ten person colours ===== */

/* Candy (default) */
:root, :root[data-look="candy"] {
  --brand-1: #ff6b9d;
  --brand-2: #b06ef3;
  --pc0-h: 340; --pc0-l: 54%;  --pc1-h: 195; --pc1-l: 54%;
  --pc2-h: 45;  --pc2-l: 36%;  --pc3-h: 150; --pc3-l: 36%;
  --pc4-h: 285; --pc4-l: 54%;  --pc5-h: 28;  --pc5-l: 46%;
  --pc6-h: 0;   --pc6-l: 54%;  --pc7-h: 205; --pc7-l: 54%;
  --pc8-h: 310; --pc8-l: 54%;  --pc9-h: 215; --pc9-l: 54%;
}

/* Ocean */
:root[data-look="ocean"] {
  --brand-1: #1fb6e6;
  --brand-2: #4f5fe8;
  --pc0-h: 200; --pc0-l: 42%;  --pc1-h: 185; --pc1-l: 36%;
  --pc2-h: 165; --pc2-l: 32%;  --pc3-h: 215; --pc3-l: 46%;
  --pc4-h: 232; --pc4-l: 52%;  --pc5-h: 175; --pc5-l: 34%;
  --pc6-h: 195; --pc6-l: 40%;  --pc7-h: 222; --pc7-l: 48%;
  --pc8-h: 160; --pc8-l: 32%;  --pc9-h: 245; --pc9-l: 54%;
}

/* Sunset */
:root[data-look="sunset"] {
  --brand-1: #ff8a3d;
  --brand-2: #e0245e;
  --pc0-h: 12;  --pc0-l: 48%;  --pc1-h: 28;  --pc1-l: 42%;
  --pc2-h: 350; --pc2-l: 50%;  --pc3-h: 4;   --pc3-l: 46%;
  --pc4-h: 22;  --pc4-l: 44%;  --pc5-h: 330; --pc5-l: 50%;
  --pc6-h: 40;  --pc6-l: 38%;  --pc7-h: 358; --pc7-l: 48%;
  --pc8-h: 340; --pc8-l: 50%;  --pc9-h: 18;  --pc9-l: 46%;
}

/* ===== Derived tokens (keep below the looks so they follow whichever is active) ===== */
:root {
  --grad: linear-gradient(135deg, var(--brand-1), var(--brand-2));
}

/* ===== Theme switching: System follows the device; Light/Dark force it ===== */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

/* ===== Assign each person one of the ten colours (JS only picks the number) ===== */
.pc-0 { --h: var(--pc0-h); --l: var(--pc0-l); }
.pc-1 { --h: var(--pc1-h); --l: var(--pc1-l); }
.pc-2 { --h: var(--pc2-h); --l: var(--pc2-l); }
.pc-3 { --h: var(--pc3-h); --l: var(--pc3-l); }
.pc-4 { --h: var(--pc4-h); --l: var(--pc4-l); }
.pc-5 { --h: var(--pc5-h); --l: var(--pc5-l); }
.pc-6 { --h: var(--pc6-h); --l: var(--pc6-l); }
.pc-7 { --h: var(--pc7-h); --l: var(--pc7-l); }
.pc-8 { --h: var(--pc8-h); --l: var(--pc8-l); }
.pc-9 { --h: var(--pc9-h); --l: var(--pc9-l); }