/* ==========================================================================
   QUAILGENT MARKETING SITE — DESIGN TOKENS
   Generated from the Figma "Foundations" page (file oCpQ88t7EMRG6wCtENB3wY,
   node 21:2, "Foundations — Tokens"). Every custom property name below
   matches the Figma variable name exactly (Figma's own variables are
   already named as valid CSS custom properties, e.g. "text-primary") so
   this file is a direct, literal transcription, not a reinterpretation.

   Deliberately separate from CRM/static/style.css: that's a different
   product (the authenticated CRM app, dark "editorial dispatch" theme,
   DM Sans/JetBrains Mono). This is the public marketing site — light
   theme, pine/green/aqua palette, Parkinsans/Atkinson Hyperlegible Next.
   The two are not meant to look related, so they get separate token sets
   rather than one merged system.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Parkinsans:wght@400;600;700&family=Atkinson+Hyperlegible+Next:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

:root {
  /* ── Primitives: color ramps (50–900) ── */
  --color-pine-50: #f3f7f5;
  --color-pine-100: #e1eae6;
  --color-pine-200: #c5d3cd;
  --color-pine-300: #a2b4ad;
  --color-pine-400: #82958e;
  --color-pine-500: #667a73;
  --color-pine-600: #4a5e57;
  --color-pine-700: #33463f;
  --color-pine-800: #1f352e;
  --color-pine-900: #0f2a24;

  --color-green-50: #eafaf1;
  --color-green-100: #cdf3de;
  --color-green-200: #9ee8c0;
  --color-green-300: #66da9d;
  --color-green-400: #2fcb7a;
  --color-green-500: #1ead64;
  --color-green-600: #178c51;
  --color-green-700: #11744a;
  --color-green-800: #0d5638;
  --color-green-900: #0a3a27;

  --color-aqua-50: #e6f8fb;
  --color-aqua-100: #c4eff5;
  --color-aqua-200: #93e2ec;
  --color-aqua-300: #62d3e2;
  --color-aqua-400: #3cc4da;
  --color-aqua-500: #22a6bd;
  --color-aqua-600: #18869a;
  --color-aqua-700: #136a7a;
  --color-aqua-800: #0f4f5b;
  --color-aqua-900: #0b3740;

  --color-gold-50: #fff6dc;
  --color-gold-100: #ffeab0;
  --color-gold-200: #ffdd85;
  --color-gold-300: #ffd05e;
  --color-gold-400: #ffc23a;
  --color-gold-500: #f0a812;
  --color-gold-600: #c88800;
  --color-gold-700: #9a6700;
  --color-gold-800: #6e4a00;
  --color-gold-900: #4a3200;

  --color-pink-50: #ffeef5;
  --color-pink-100: #ffd6e6;
  --color-pink-200: #ffb5d1;
  --color-pink-300: #ff99bf;
  --color-pink-400: #ff7eb0;
  --color-pink-500: #f05595;
  --color-pink-600: #d13a79;
  --color-pink-700: #a8285e;
  --color-pink-800: #7a1d45;
  --color-pink-900: #52132e;

  --color-lilac-50: #f2eeff;
  --color-lilac-100: #e3daff;
  --color-lilac-200: #cdbeff;
  --color-lilac-300: #b9a4ff;
  --color-lilac-400: #a58bff;
  --color-lilac-500: #8b6bf5;
  --color-lilac-600: #7050de;
  --color-lilac-700: #5a3dba;
  --color-lilac-800: #432d8c;
  --color-lilac-900: #2e1f60;

  --color-red-50: #ffedeb;
  --color-red-100: #ffd5d0;
  --color-red-200: #ffb0a7;
  --color-red-300: #fa8578;
  --color-red-400: #f2604f;
  --color-red-500: #e5483b;
  --color-red-600: #cb3426;
  --color-red-700: #b3261e;
  --color-red-800: #851c16;
  --color-red-900: #5c130f;

  --color-white: #ffffff;

  /* ── Semantic: surfaces ── */
  --bg-primary: #ffffff;
  --bg-surface: #f3f7f5;
  --bg-surface-raised: #ffffff;
  --bg-sunken: #e1eae6;
  --bg-inverse: #0f2a24;
  --bg-disabled: #e1eae6;
  --bg-selected: #cdf3de;
  --bg-scrim: #0f2a2466;
  --bg-hover: #e1eae6;
  --bg-pressed: #c5d3cd;
  --bg-inverse-hover: #1f352e;
  --bg-tint-green: #eafaf1;
  --bg-tint-aqua: #e6f8fb;
  --bg-tint-gold: #fff6dc;
  --bg-tint-pink: #ffeef5;
  --bg-tint-lilac: #f2eeff;

  /* ── Semantic: text ── */
  --text-primary: #0f2a24;
  --text-secondary: #4a5e57;
  --text-tertiary: #667a73;
  --text-disabled: #82958e;
  --text-inverse: #ffffff;
  --text-on-brand: #0f2a24;
  --text-link: #11744a;
  --text-success: #11744a;
  --text-warning: #9a6700;
  --text-danger: #b3261e;

  /* ── Semantic: borders ── */
  --border-subtle: #e1eae6;
  --border-default: #c5d3cd;
  --border-strong: #0f2a24;
  --border-focus: #18869a;
  --border-danger: #e5483b;
  --border-brand: #2fcb7a;
  --border-inverse: #33463f;

  /* ── Semantic: icons ── */
  --icon-primary: #0f2a24;
  --icon-secondary: #4a5e57;
  --icon-inverse: #ffffff;
  --icon-brand: #178c51;
  --icon-rating: #c88800;
  --icon-danger: #cb3426;

  /* ── Semantic: brand ── */
  --brand-primary: #2fcb7a;
  --brand-primary-hover: #66da9d;
  --brand-primary-pressed: #1ead64;
  --brand-primary-subtle: #eafaf1;
  --brand-accent: #ffc23a;

  /* ── Semantic: accents (each with -subtle/-strong) ── */
  --accent-green: #2fcb7a;
  --accent-green-subtle: #cdf3de;
  --accent-green-strong: #178c51;
  --accent-aqua: #3cc4da;
  --accent-aqua-subtle: #c4eff5;
  --accent-aqua-strong: #18869a;
  --accent-gold: #ffc23a;
  --accent-gold-subtle: #ffeab0;
  --accent-gold-strong: #c88800;
  --accent-pink: #ff7eb0;
  --accent-pink-subtle: #ffd6e6;
  --accent-pink-strong: #d13a79;
  --accent-lilac: #a58bff;
  --accent-lilac-subtle: #e3daff;
  --accent-lilac-strong: #7050de;

  /* ── Semantic: status ── */
  --status-success: #1ead64;
  --status-success-subtle: #cdf3de;
  --status-warning: #f0a812;
  --status-warning-subtle: #ffeab0;
  --status-danger: #e5483b;
  --status-danger-subtle: #ffd5d0;
  --status-info: #22a6bd;
  --status-info-subtle: #c4eff5;

  /* ── Effects ── */
  --effect-shadow-soft: #0f2a2414;
  --effect-shadow-strong: #0f2a2429;
  --effect-focus: #18869a;
  --elevation-raised: 0 1px 2px var(--effect-shadow-soft), 0 6px 16px -6px var(--effect-shadow-soft);
  --elevation-floating: 0 2px 6px var(--effect-shadow-soft), 0 28px 56px -20px var(--effect-shadow-strong);
  --focus-ring: 0 0 0 3px var(--effect-focus);

  /* ── Mascot palette (Pip/Echo/Dash/Tally/Cal SVG illustrations) ── */
  --mascot-green-light: #9ee8c0;
  --mascot-green-base: #2fcb7a;
  --mascot-green-shade: #178c51;
  --mascot-aqua-light: #93e2ec;
  --mascot-aqua-base: #3cc4da;
  --mascot-aqua-shade: #18869a;
  --mascot-gold-light: #ffdd85;
  --mascot-gold-base: #ffc23a;
  --mascot-gold-shade: #c88800;
  --mascot-pink-light: #ffb5d1;
  --mascot-pink-base: #ff7eb0;
  --mascot-pink-shade: #d13a79;
  --mascot-lilac-light: #cdbeff;
  --mascot-lilac-base: #a58bff;
  --mascot-lilac-shade: #7050de;
  --mascot-ink-light: #4a5e57;
  --mascot-ink-base: #0f2a24;
  --mascot-gloss: #ffffff;
  --mascot-ground: #0f2a2429;

  /* ── Spacing scale ── */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-20: 20px;
  --space-40: 40px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-96: 96px;
  --space-128: 128px;

  /* ── Radius scale ── */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-full: 999px;

  /* ── Responsive layout tokens — Desktop (1440) values, the default;
     overridden for Tablet/Mobile below. Source: Figma "Section /
     Responsive Layout" table (node 26:57). ── */
  --layout-section-padding-y: 128px;
  --layout-block-gap: 64px;
  --layout-stack-gap: 24px;
  --layout-card-padding: 32px;
  --layout-page-margin: 120px;
  --layout-gutter: 24px;
  /* Fluid above the 1440 Figma reference width: at exactly 1440px viewport
     73vw = 1051px, which is below the 1200px floor, so this resolves to
     the same 1200px Figma value there (zero visual change at spec width)
     and only grows past it on wider screens -- e.g. ~1401px at 1920,
     capped at 1600px so line length stays readable on ultra-wide/4K
     monitors instead of the content column staying frozen at 1200px and
     leaving ever-larger blank margins. Tablet/Mobile below override this
     back to fixed values, matching their own Figma frames exactly. */
  --layout-content-max: clamp(1200px, 73vw, 1600px);
}

/* Tablet (Figma reference frame: 768) */
@media (max-width: 1024px) {
  :root {
    --layout-section-padding-y: 96px;
    --layout-block-gap: 48px;
    --layout-stack-gap: 24px;
    --layout-card-padding: 24px;
    --layout-page-margin: 40px;
    --layout-gutter: 20px;
    --layout-content-max: 688px;
  }
}

/* Mobile (Figma reference frame: 390) */
@media (max-width: 600px) {
  :root {
    --layout-section-padding-y: 64px;
    --layout-block-gap: 32px;
    --layout-stack-gap: 16px;
    --layout-card-padding: 24px;
    --layout-page-margin: 20px;
    --layout-gutter: 16px;
    --layout-content-max: 350px;
  }
}

/* ==========================================================================
   Type scale — recreated as classes (mkt-type-*), not inline styles.
   Two families: Parkinsans (display/headings, Bold/SemiBold) for anything
   in the Desktop/Mobile groups below, Atkinson Hyperlegible Next (body/UI)
   for the Base/UI groups. Desktop styles are the default; Mobile overrides
   apply under the same 600px cutoff as the layout tokens above, since
   Figma's type scale only defines Desktop+Mobile variants (no separate
   Tablet type scale) plus the breakpoint-independent Base/UI groups.
   ========================================================================== */

.mkt-display, .mkt-h1, .mkt-h2, .mkt-h3, .mkt-h4, .mkt-stat {
  font-family: 'Parkinsans', sans-serif;
  margin: 0;
}

.mkt-body-l, .mkt-body-m, .mkt-body-s, .mkt-body-m-strong, .mkt-body-s-strong,
.mkt-label, .mkt-label-s, .mkt-caption,
.mkt-button, .mkt-button-s, .mkt-button-l,
.mkt-ui-title, .mkt-ui-metric, .mkt-ui-micro {
  font-family: 'Atkinson Hyperlegible Next', sans-serif;
  margin: 0;
}

.mkt-button, .mkt-button-s, .mkt-button-l, .mkt-ui-metric {
  font-family: 'Parkinsans', sans-serif;
}

/* Desktop (default) */
.mkt-display { font-weight: 700; font-size: 72px; line-height: 80px; letter-spacing: -2px; }
.mkt-h1      { font-weight: 700; font-size: 60px; line-height: 68px; letter-spacing: -2px; }
.mkt-h2      { font-weight: 700; font-size: 48px; line-height: 56px; letter-spacing: -1.5px; }
.mkt-h3      { font-weight: 600; font-size: 36px; line-height: 44px; letter-spacing: -1px; }
.mkt-h4      { font-weight: 600; font-size: 24px; line-height: 32px; letter-spacing: -0.5px; }
.mkt-stat    { font-weight: 700; font-size: 56px; line-height: 60px; letter-spacing: -2px; }
.mkt-body-l  { font-weight: 400; font-size: 20px; line-height: 32px; }

/* Mobile (<=600px) */
@media (max-width: 600px) {
  .mkt-display { font-size: 44px; line-height: 52px; letter-spacing: -1.5px; }
  .mkt-h1      { font-size: 40px; line-height: 48px; letter-spacing: -1.5px; }
  .mkt-h2      { font-size: 32px; line-height: 40px; letter-spacing: -1px; }
  .mkt-h3      { font-size: 28px; line-height: 36px; letter-spacing: -0.5px; }
  .mkt-h4      { font-size: 20px; line-height: 28px; letter-spacing: 0; }
  .mkt-stat    { font-size: 40px; line-height: 44px; letter-spacing: -1.5px; }
  .mkt-body-l  { font-size: 18px; line-height: 28px; }
}

/* Base (breakpoint-independent body/UI text) */
.mkt-body-m        { font-weight: 400; font-size: 16px; line-height: 26px; }
.mkt-body-m-strong { font-weight: 600; font-size: 16px; line-height: 26px; }
.mkt-body-s        { font-weight: 400; font-size: 14px; line-height: 22px; }
.mkt-body-s-strong { font-weight: 600; font-size: 14px; line-height: 22px; }
.mkt-label         { font-weight: 600; font-size: 14px; line-height: 20px; }
.mkt-label-s       { font-weight: 600; font-size: 12px; line-height: 16px; }
.mkt-caption       { font-weight: 400; font-size: 12px; line-height: 16px; letter-spacing: 1px; }

/* UI group */
.mkt-button   { font-weight: 600; font-size: 16px; line-height: 24px; }
.mkt-button-s { font-weight: 600; font-size: 14px; line-height: 20px; }
.mkt-button-l { font-weight: 600; font-size: 18px; line-height: 24px; }
.mkt-ui-title { font-weight: 700; font-size: 18px; line-height: 24px; }
.mkt-ui-metric{ font-weight: 700; font-size: 28px; line-height: 32px; letter-spacing: -1px; }
.mkt-ui-micro { font-weight: 500; font-size: 11px; line-height: 14px; letter-spacing: 1px; }

/* ==========================================================================
   Base element defaults
   ========================================================================== */

* {
  box-sizing: border-box;
}

body.mkt-body {
  margin: 0;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-family: 'Atkinson Hyperlegible Next', sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* The scroll-reveal animations park cards 48px off to the side until they come into view, which made the page
   scroll sideways on phones. Clip the page content at its edges (clip, unlike hidden, creates no scroll container). */
main { overflow-x: hidden; }
@supports (overflow: clip) {
  main { overflow-x: clip; }
}

/* Plain heading tags (most templates write <h1>/<h2>/<h3> directly rather
   than the .mkt-h* utility classes above) need the same Parkinsans display
   font and Figma type scale by default, or they silently fall back to the
   body font at browser-default sizes. Lower specificity than any
   component-specific heading rule (e.g. .mkt-home-hero h1), so those still
   win on size where a page needs something other than the default scale. */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Parkinsans', sans-serif;
  margin: 0;
}
h1 { font-weight: 700; font-size: 60px; line-height: 68px; letter-spacing: -2px; }
h2 { font-weight: 700; font-size: 48px; line-height: 56px; letter-spacing: -1.5px; }
h3 { font-weight: 600; font-size: 36px; line-height: 44px; letter-spacing: -1px; }
h4, h5, h6 { font-weight: 600; font-size: 24px; line-height: 32px; letter-spacing: -0.5px; }

@media (max-width: 600px) {
  h1 { font-size: 40px; line-height: 48px; letter-spacing: -1.5px; }
  h2 { font-size: 32px; line-height: 40px; letter-spacing: -1px; }
  h3 { font-size: 28px; line-height: 36px; letter-spacing: -0.5px; }
  h4, h5, h6 { font-size: 20px; line-height: 28px; letter-spacing: 0; }
}

/* An author `display` rule (flex/grid/etc) on an element beats the browser's
   own `[hidden] { display: none }` default regardless of selector
   specificity, since author styles always outrank the UA stylesheet. Every
   component here that's toggled via the `hidden` attribute (showcase
   panels, auth forms, disclosure buttons, ...) would otherwise stay in
   flow -- taking up space and painting at opacity/height 0 -- instead of
   actually collapsing. This blanket rule is the one place that guarantee
   is restored for the whole site. */
[hidden] { display: none !important; }

.mkt-container {
  max-width: calc(var(--layout-content-max) + 2 * var(--layout-page-margin));
  margin: 0 auto;
  padding-left: var(--layout-page-margin);
  padding-right: var(--layout-page-margin);
}

.mkt-section {
  padding-top: var(--layout-section-padding-y);
  padding-bottom: var(--layout-section-padding-y);
}