/* GlazeQuote design tokens. The single source of every value on this site.
   Nothing in styles.css hard-codes a colour, a size, a radius or a duration:
   if a number needs changing, it changes here.

   The idiom is Material 3: tonal surfaces instead of borders, pill buttons,
   generous whitespace, large confident type, soft shape, restrained motion.
   The palette is our own, seeded on deep teal with a warm accent. No Google
   palette, wordmark, logo or product name appears anywhere on this site, and
   the typeface is served from our own origin, not Google's. */

:root {

  /* ---------------------------------------------------------------- colour
     A Material 3 tonal set. The "container" roles are the low-emphasis
     surfaces that carry a tint; the "on-" roles are what may be written on
     them. Every pair used on the site is measured in
     scripts/check_contrast.py and held to WCAG 2.1 AA. */

  --primary: #14606B;
  --on-primary: #FFFFFF;
  --primary-container: #B3ECF5;
  --on-primary-container: #002F36;

  --secondary: #4A6267;
  --secondary-container: #CDE7EC;

  --tertiary: #B8642A;
  --tertiary-container: #FFDCC5;
  --on-tertiary-container: #351000;

  --surface: #FBFCFD;
  --surface-container: #F0F4F5;
  --surface-container-high: #E7EDEE;

  --inverse-surface: #2B3133;

  --on-surface: #171D1E;
  --on-surface-variant: #3F484A;

  --outline: #6F797B;
  --outline-variant: #C6CFD1;

  --error: #BA1A1A;

  /* Derived roles. Not in the brief's list, needed to write text on the
     surfaces the brief does define. Each is an existing token reused rather
     than a new colour invented, so the set stays closed. */
  --on-secondary-container: var(--on-surface);
  --inverse-on-surface: var(--surface);
  --inverse-on-surface-variant: #C0C8C9;

  /* ------------------------------------------------------------------ type
     Plus Jakarta Sans, self-hosted as one variable file covering 200 to 800.
     The fallback stack is the system UI face on each platform, so a blocked
     or slow font never leaves the page unreadable. */

  --font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
          Roboto, "Helvetica Neue", Arial, sans-serif;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-extrabold: 800;

  /* The scale is display 57/64, headline 36/44, title 22/28, body-large
     18/28, body 16/26, label 14/20. The two largest steps are fluid, because
     57px does not fit a 390px viewport; each tops out at its stated size and
     never goes below the floor. Body sizes are fixed and never below 16px. */
  --size-display: clamp(2.5rem, 1.6rem + 3.9vw, 3.5625rem);   /* -> 57px */
  --line-display: 1.12;                                        /* 64/57 */
  --size-headline: clamp(1.75rem, 1.35rem + 1.75vw, 2.25rem);  /* -> 36px */
  --line-headline: 1.22;                                       /* 44/36 */
  --size-title: 1.375rem;                                      /* 22px */
  --line-title: 1.27;                                          /* 28/22 */
  --size-body-large: 1.125rem;                                 /* 18px */
  --line-body-large: 1.56;                                     /* 28/18 */
  --size-body: 1rem;                                           /* 16px */
  --line-body: 1.625;                                          /* 26/16 */
  --size-label: 0.875rem;                                      /* 14px */
  --line-label: 1.43;                                          /* 20/14 */

  --tracking-display: -0.02em;
  --tracking-headline: -0.015em;
  --tracking-label: 0.01em;

  /* ----------------------------------------------------------------- shape
     8 for small elements, 16 for cards and panels, 28 for large surfaces,
     and a full pill for buttons. */

  --shape-small: 8px;
  --shape-medium: 16px;
  --shape-large: 28px;
  --shape-pill: 999px;

  /* ---------------------------------------------------------------- layout
     1200px of content, centred, in 24px gutters. Spacing is a 4px grid. */

  --content-width: 1200px;
  --gutter: 24px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* --------------------------------------------------------------- control
     Buttons are 48px tall at minimum with 24px of horizontal padding, medium
     weight, sentence case, fully rounded. */

  --control-height: 48px;
  --control-padding-inline: 24px;
  --focus-ring-width: 3px;
  --focus-ring-offset: 3px;

  /* ---------------------------------------------------------------- motion
     One entrance for sections and nothing else: 400ms, fading up 16px,
     triggered once on scroll. The press feedback on a button is the only
     other transition on the site. */

  --motion-duration: 400ms;
  --motion-easing: cubic-bezier(0.2, 0, 0, 1);
  --motion-rise: 16px;
  --motion-stagger: 60ms;
  --press-duration: 120ms;

  /* The seconds after which anything the scroll observer has not reached is
     revealed anyway. A marketing page that hides its own copy because a
     script did not fire is worse than one that does not animate. */
  --reveal-failsafe: 2500;
}