/* ==========================================================================
   Beebud · Gummy Pop — tokens
   --------------------------------------------------------------------------
   Ported 2026-10-10 from explorations/gummy/tokens.css, which replaced the
   dark lime/purple/orange system (archived in archive/prototype-dark-2026-10-10).
   Three tiers: primitives → roles. Components only read roles. Light only.

   Colour has one job each:
     cobalt     events (and the wordmark)
     bubblegum  you and your people, anything you selected
     lime       fit, and only fit
     ink navy   text, the nav, links, every main button
     raspberry  destructive text, never a fill
   ========================================================================== */

:root {
  /* ---- Primitives ---------------------------------------------------- */
  --cobalt-100: #E3E3FF;
  --cobalt-300: #8F8FFF;
  --cobalt-500: #2B2BFF;   /* brand blue */
  --cobalt-700: #1B1BC2;
  --cobalt-800: #2A2A6B;   /* ink pressed */
  --cobalt-900: #12123A;   /* ink — text, chrome, nav */

  --gum-100: #FFE6F7;
  --gum-300: #FFC2EC;
  --gum-500: #FF9BE0;      /* brand pink */
  --gum-700: #E05CB8;      /* pressed */
  --gum-900: #5C1747;

  --lime-300: #E4FF9A;
  --lime-500: #CFFF4A;     /* fit, and only fit */
  --lime-700: #9BC41F;

  --berry-500: #D6265A;    /* destructive text only, 6.6:1 on white */

  --lilac-50:  #F8F7FF;
  --lilac-100: #F3F1FF;
  --mist-100:  #F2F2F7;    /* canvas, Figma 2026-10-11: cooler and quieter than lilac */
  --lilac-200: #E6E2FF;    /* tracks, hairlines, sunken */
  --lilac-400: #B9B3E6;
  --ink-60:    #57577E;    /* muted text, 6.9:1 on canvas */
  --white:     #FFFFFF;

  /* ---- Roles ---------------------------------------------------------- */
  --bg-canvas:   var(--mist-100);
  --bg-card:     var(--white);
  --bg-sunken:   var(--lilac-200);

  --text:        var(--cobalt-900);
  --text-muted:  var(--ink-60);
  --text-on-color: var(--white);

  --line:        var(--lilac-200);
  --line-strong: var(--lilac-400);

  /* Cobalt = events. Also the wordmark. Nothing else. */
  --brand:         var(--cobalt-500);
  --event-bg:      var(--cobalt-500);
  --event-text:    var(--white);
  --event-chip-bg: rgb(255 255 255 / .16);
  --event-soft:    var(--cobalt-100);

  /* Ink = the main action, same as the nav pill: "the controls" */
  --action-bg:     var(--cobalt-900);
  --action-bg-press: var(--cobalt-800);
  --action-text:   var(--white);
  --link:          var(--cobalt-900);

  /* Bubblegum = you and your people: people cards, anything you selected */
  --people-bg:     var(--gum-500);
  --people-soft:   var(--gum-100);
  --people-mid:    var(--gum-300);
  --people-text:   var(--cobalt-900);
  --selected-bg:   var(--gum-500);
  --selected-text: var(--cobalt-900);

  /* Lime = fit. Never decoration. */
  /* Figma 2026-10-11: fit moved off lime to a soft lavender — the app had
     too much colour competing. Lime is now only in the logo. */
  --fit-bg:        var(--lilac-200);
  --fit-text:      var(--cobalt-900);
  --fit-soft:      var(--lilac-200);

  /* Destructive: text only, never a fill. Cancel event, Report. */
  --danger-text:   var(--berry-500);

  /* Chrome */
  --nav-bg:        var(--cobalt-900);
  --nav-icon:      rgb(243 241 255 / .6);
  --nav-active-bg: var(--gum-500);
  --nav-active-icon: var(--cobalt-900);

  /* ---- Type ----------------------------------------------------------- */
  /* Figma 2026-10-11: one family, Roboto, replacing Bricolage + DM Sans. */
  --font-display: "Roboto", system-ui, -apple-system, sans-serif;
  --font-body:    "Roboto", system-ui, -apple-system, sans-serif;

  --display-xl: 800 32px/1.15 var(--font-display);  /* screen headline, one line */
  --display-l:  800 30px/.95 var(--font-display);   /* profile name, detail title */
  --title:      800 22px/1   var(--font-display);   /* section heads */
  --card-title: 800 19px/1   var(--font-display);
  --fit-num:    800 32px/.8  var(--font-display);
  --body:       400 15px/1.45 var(--font-body);
  --body-s:     500 13px/1.35 var(--font-body);
  --label:      700 12px/1   var(--font-body);
  --caption:    500 11px/1.3 var(--font-body);
  --tight:      -.035em;   /* letter-spacing for every display style */

  /* ---- Shape ---------------------------------------------------------- */
  --r-sm:   10px;
  --r-md:   14px;   /* chips, small tiles */
  --r-lg:   20px;   /* poster inside a card */
  --r-xl:   28px;   /* cards */
  --r-pill: 999px;
  --r-arch: 140px 140px var(--r-lg) var(--r-lg);   /* hero poster window */

  /* ---- Space (4-based) ------------------------------------------------ */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;
  --gutter: 16px;

  /* ---- Device + harness ---------------------------------------------- */
  --size-device-w: 375px;
  --size-device-h: 812px;
  --font-mono: ui-monospace, Menlo, "SF Mono", monospace;
  --shadow-device: 0 30px 60px -30px rgb(18 18 58 / .45);
  --shadow-pop: 0 12px 32px -12px rgb(18 18 58 / .35);

  /* ---- Motion --------------------------------------------------------- */
  --squish: scale(.96);
  --ease-pop: cubic-bezier(.34, 1.56, .64, 1);
}