/* ============================================================
   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,
   motion (durations + easings), the site-wide z-index scale and
   layout sizes - plus the canonical breakpoint scale (below).

   Load order: this file must load FIRST - base.css,
   components.css and sections.css all depend on these tokens.
   ============================================================ */

/* ============================================================
   CANONICAL BREAKPOINT SCALE - the single source of truth.
   CSS custom properties cannot be used inside @media conditions,
   so these exact pixel values are used verbatim in every
   stylesheet. The site is authored MOBILE-FIRST: base styles are
   the phone layout, and enhancements use min-width queries at
   (value + 1)px so a breakpoint value itself still renders the
   smaller layout (e.g. a 744px-wide tablet keeps the mobile nav):

     name | boundary | min-width query | used for
     -----+----------+-----------------+---------------------------
     sm   |  480px   |  (rare)         | small-phone tweaks
     md   |  744px   |  min-width: 745px  | phone -> tablet: nav, hero, stacking
     lg   |  960px   |  min-width: 961px  | tablet -> desktop: 2 -> 3 column grids
     xl   | 1128px   |  min-width: 1129px | content gutter step
     xxl  | 1240px   |  min-width: 1241px | pricing two-column

   One sanctioned off-scale query: min-width: 360px (the design
   minimum width) re-shows the nav bar's compact CTA that is
   hidden on the very smallest screens (mobile nav spec A.1).
   ============================================================ */
:root {
  /* Brand */
  --color-rausch:         #FF385C;
  --color-rausch-hover:   #E61E4D;
  --color-rausch-pressed: #D70466;
  --color-rausch-deep:    #BD1E59;
  --color-babu:           #00A699;
  --color-arches:         #FC642D;

  /* Success / "included" green - pricing checks, plan highlights, guarantee */
  --color-go:             #1a8f2e;

  /* 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);

  /* Duration of the one-shot nav fade-in once the visitor scrolls to the
     trigger section. Referenced by .nav's opacity transition in sections.css. */
  --nav-reveal-duration: 1s;

  /* Nav bar heights (also the scroll-margin under the sticky bar) and the
     nav's place on the z-index scale (see the scale note below). */
  --nav-height:        80px;
  --nav-height-mobile: 64px;
  --z-nav:             50;

  /* Minimum touch-target box on mobile layouts (WCAG 2.2 AA floor is 24px;
     44px is the usability standard this site uses). */
  --tap-target-min: 44px;

  /* 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;

  /* Brand logo image - rendered height of the logo lockup in the nav
     and footer. Aspect ratio is preserved (width: auto on .logo-img). */
  --logo-height: 22px;

  /* Brand wordmark ("Answerlux") sitting beside the mark, and the gap
     between mark and wordmark. The wordmark reuses the hero-H1 type
     (Cereal 800, -0.02em) and its two-tone ink + Rausch colouring. */
  --logo-word-size: 20px;
  --logo-gap:       8px;

  /* Live transcript popover (modal lightbox) - on desktop the centered
     panel is 65% of the viewport in each axis; on phones it fills the
     viewport minus --transcript-inset-mobile on each side.
     --transcript-bubble-max caps a chat bubble's width inside it.
     --z-popover sits above the sticky nav so the overlay covers the page. */
  --transcript-width:         65vw;
  --transcript-height:        65vh;
  --transcript-inset-mobile:  8px;
  --transcript-bubble-max:    85%;
  --z-popover:                100;

  /* Connecting overlay (voice demo) - the blocking modal shown while the call
     connects: Maya's avatar ringed by a spinner. Reuses --color-scrim and the
     --z-popover layer above (the connecting overlay and the transcript modal
     never show at once - connecting hands off to the transcript on call start). */
  --connecting-avatar-size: 84px;   /* diameter of the round Maya avatar        */
  --connecting-ring-width:  3px;    /* thickness of the spinner ring around it  */

  /* Booking page (book.html) - minimum height of the inline scheduling-embed
     container, so its box is reserved before the calendar iframe paints (no CLS). */
  --booking-min-height: 720px;

  /* Cookie consent banner - fixed bottom bar; above the nav, below the call modal. */
  --z-cookie-banner:       90;

  /* Site-wide z-index scale (overlay order, bottom to top):
       --z-nav (50)  <  --z-cookie-banner (90)  <  --z-popover (100)
     Purely local stacking inside a section stays raw by design. */
}