/* ============================================================
   tokens.css — Design tokens (the single source of CONSTs)
   ------------------------------------------------------------
   Goal: declare every design constant once, as a CSS custom
   property on :root. Every other stylesheet references these
   with var(--…) and never hardcodes a raw value. Change a value
   here and it propagates across the whole site.

   Contains: brand colours, neutrals & surfaces, gradients,
   the typography font stack, the spacing scale, radii, shadows,
   and motion (durations + easings).

   Load order: this file must load FIRST — base.css,
   components.css and sections.css all depend on these tokens.
   ============================================================ */
:root {
  /* Brand */
  --color-rausch:         #FF385C;
  --color-rausch-hover:   #E61E4D;
  --color-rausch-pressed: #D70466;
  --color-rausch-deep:    #BD1E59;
  --color-babu:           #00A699;
  --color-arches:         #FC642D;

  /* Neutrals & surfaces */
  --color-bg:             #FFFFFF;
  --color-bg-secondary:   #F7F7F7;
  --color-bg-tertiary:    #EBEBEB;
  --color-divider:        #DDDDDD;
  --color-divider-strong: #B0B0B0;
  --color-ink:            #222222;
  --color-ink-secondary:  #717171;
  --color-hof:            #484848;
  --color-scrim:          rgba(0,0,0,0.5);   /* dim wash behind a modal */

  /* Gradients */
  --gradient-rausch:       linear-gradient(to right, #E61E4D 0%, #D70466 50%, #BD1E59 100%);
  --gradient-rausch-hover: linear-gradient(to right, #D70466 0%, #BD1E59 50%, #BD1E59 100%);
  --gradient-scrim:        linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.40) 100%);

  /* Typography — Cereal stack, Nunito Sans as the web fallback */
  --font-cereal: "Airbnb Cereal VF", "Airbnb Cereal App", Circular,
                 "Nunito Sans", -apple-system, BlinkMacSystemFont,
                 "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Spacing (8-pt base, 4-pt sub-step) */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  40px;
  --space-8:  48px;
  --space-9:  64px;
  --space-10: 80px;
  --space-11: 96px;

  /* Radii */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 999px;

  /* Shadows — warm-grey, low-contrast, short */
  --shadow-xs:     0 1px 2px rgba(0,0,0,0.08);
  --shadow-sm:     0 2px 4px rgba(0,0,0,0.18);
  --shadow-card:   0 0 0 1px rgba(0,0,0,0.04), 0 2px 6px rgba(0,0,0,0.04), 0 4px 8px rgba(0,0,0,0.10);
  --shadow-md:     0 6px 16px rgba(0,0,0,0.12);
  --shadow-lg:     0 8px 28px rgba(0,0,0,0.28);
  --shadow-search: 0 3px 12px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.06);

  /* Motion */
  --motion-fast:   120ms;
  --motion-base:   200ms;
  --motion-slow:   300ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out:      cubic-bezier(0, 0, 0.2, 1);
  --ease-emphasis: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Component-specific constant: the white gap kept visible between
     the industry-card slideshow photos as they translate. Referenced
     by .ind-static-bg and .ind-slide in components.css. */
  --ind-slide-gap: 12px;

  /* Live transcript popover (modal lightbox) — the centered panel is 65%
     of the viewport in each axis; --transcript-bubble-max caps a chat
     bubble's width inside it. --z-popover sits above the sticky nav so the
     overlay covers the whole page. */
  --transcript-width:      65vw;
  --transcript-height:     65vh;
  --transcript-bubble-max: 85%;
  --z-popover:             100;
}