/* ==========================================================================
   Design Tokens — PetitionIQ.ai
   Source of truth for color, type, spacing, radius, shadow and motion.
   ========================================================================== */

:root {
  /* ---- Color: brand ---- */
  --color-navy-900: #0c203c;
  --color-navy-800: #0f2a4f;
  --color-navy-700: #13294b;

  --color-gold-600: #ba9430;
  --color-gold-500: #c59c38;
  --color-gold-400: #cba648;
  --color-gold-300: #cfa63a;
  --color-gold-tint: #f5edda;

  /* Gold for small text. The display golds above sit at 2.0-2.9:1 on white,
     which is fine for 64px headline type but fails WCAG AA for labels,
     eyebrows and chips. This one clears AA on white (5.26:1) and on the
     cream band (4.67:1); use it wherever gold text is under ~24px. */
  --color-gold-text: #8a6618;

  /* Blue used only by the resource category tags. */
  --color-blue-tag: #185fa5;
  --color-blue-tag-bg: rgba(24, 95, 165, 0.1);

  /* Gradient pair behind the attorney-partnership CTA, plus the deeper ink
     navy the attorney page sets its type in. */
  --color-gold-grad-from: #c9a84c;
  --color-gold-grad-to: #e8c96a;
  --color-gold-accent: #d8b85b;
  --color-navy-ink: #0a1d38;

  --color-cream-100: #f4f1ec;
  --color-white-off: #fafaf7;
  --color-white: #ffffff;

  --color-green-bg: #eaf5ee;
  --color-green-text: #0a3d2b;
  --color-green-dot: #2db887;

  --color-amber-dot: #d97706;
  --color-red-dot: #e4512c;
  --color-grey-dot: #6b7280;

  /* ---- Color: text ---- */
  --color-text-heading: var(--color-navy-700);
  --color-text-body: #4f5e70;
  --color-text-body-strong: #0b2e59;
  /* Every form placeholder, on inputs, textareas and the select
     placeholder options alike, so the hint text reads the same weight
     wherever it appears. */
  --color-text-placeholder: #6b7280;
  --color-text-on-dark: rgba(250, 250, 247, 0.85);
  --color-text-on-dark-muted: #c7c7c7;
  --color-text-on-dark-faint: rgba(255, 255, 255, 0.65);

  --color-border-subtle: rgba(12, 32, 60, 0.08);
  --color-border-light: rgba(230, 230, 230, 0.9);
  --color-border-on-dark: rgba(255, 255, 255, 0.16);

  /* ---- Color: forms, stepper and dialogs ---- */
  --color-form-ink: #0f2540;
  --color-dialog-heading: #1a202c;
  --color-step-current: #c5a059;
  /* 4.83:1 on white; the old #9ca3af was 2.54:1. */
  --color-step-idle: #6b7280;
  --color-border-control: #e5e7eb;
  --color-border-rail: #d1d5db;

  /* ---- Color: disabled buttons ----
     One shared treatment for every .btn variant (see the "Disabled
     buttons" rule block in components.css). Filled/primary CTAs swap to
     this muted gold + muted text pair rather than each keeping its own
     resting color; outlined/secondary buttons keep their own colors and
     dim by --btn-disabled-opacity instead, since a single fixed color
     can't work for both a navy-on-white outline button and a
     white-on-navy one. */
  --color-btn-disabled-bg: #baa56a;
  --color-btn-disabled-text: #5c6b81;
  --btn-disabled-opacity: 0.45;

  /* ---- Typography ---- */
  --font-display: 'Cormorant Garamond', 'Georgia', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-quote: 'Source Serif 4', Georgia, serif;

  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Fluid type scale — clamps let hero/section headings scale smoothly
     between mobile and the 1440px desktop comp instead of jumping at
     breakpoints. */
  --fs-display-xl: clamp(2.5rem, 1.7rem + 3.4vw, 4rem);      /* hero H1: 64px desktop */
  --fs-display-lg: clamp(2.25rem, 1.6rem + 2.8vw, 3.5rem);   /* section H2: 56px desktop */
  --fs-display-md: clamp(1.75rem, 1.4rem + 1.6vw, 2rem);     /* 32px */

  --fs-body-lg: 1.125rem;   /* 18px */
  --fs-body: 1rem;          /* 16px */
  --fs-body-sm: 0.875rem;   /* 14px */
  --fs-caption: 0.75rem;    /* 12px */

  --lh-heading: 1.2;
  --lh-body: 1.625;

  /* ---- Spacing scale ---- */
  --space-2xs: 0.25rem;   /* 4px */
  --space-xs: 0.5rem;     /* 8px */
  --space-sm: 0.75rem;    /* 12px */
  --space-md: 1rem;       /* 16px */
  --space-lg: 1.5rem;     /* 24px */
  --space-xl: 2rem;       /* 32px */
  --space-2xl: 2.5rem;    /* 40px */
  --space-3xl: 3rem;      /* 48px */
  --space-4xl: 4rem;      /* 64px */
  --space-5xl: 6rem;      /* 96px */
  --space-6xl: 7.5rem;    /* 120px */

  /* ---- Layout ---- */
  --container-max: 1280px;
  --container-pad: clamp(1.25rem, 4vw, 5rem);
  --header-height: 76px;

  /* ---- Radius ---- */
  --radius-sm: 4px;
  --radius-md: 12px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* ---- Shadow ---- */
  --shadow-xs: 0px 1px 3px 0px rgba(31, 49, 84, 0.06);
  --shadow-md: 0px 4px 12px 0px rgba(13, 10, 44, 0.06);
  --shadow-lg: 0px 8px 24px rgba(13, 10, 44, 0.1);

  /* ---- Motion ----
     --ease-glide is a gentle S-curve for large, slow moves (the audience
     gallery expansion). Its soft start counterweights the fact that width
     derived from flex-grow advances fastest at the beginning, and its long
     tail lets the card settle rather than stop. */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-glide: cubic-bezier(0.45, 0.05, 0.55, 0.95);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;
  --duration-slower: 600ms;

  /* Scroll-reveal. Long and heavily decelerated on purpose: the move has to
     finish well before the element reaches the middle of the screen, so it
     reads as content settling rather than as something still arriving.

     The travel is deliberately small. A short rise paired with a couple of
     percent of scale reads as the element resolving into place; a longer
     slide reads as it being thrown in, and gets tiring over a long page. */
  --duration-reveal: 800ms;
  --ease-reveal: cubic-bezier(0.16, 1, 0.3, 1);
  --reveal-rise: 12px;
  --reveal-scale: 0.98;
  --reveal-stagger: 90ms;
}

/* Phones tighten the page gutter one step, from the clamp's 20px floor to
   16px. Everything that positions against --container-pad follows — the
   header, the mobile drawer, .container and the audience row — so the page
   keeps a single horizontal margin rather than each band setting its own.
   Tablet and desktop keep the clamp untouched. */
@media (max-width: 639px) {
  :root {
    --container-pad: var(--space-md); /* 16px */
  }
}

/* One vertical step for every landing section on phones. It sits between
   --space-2xl (40px) and --space-3xl (48px) rather than on the scale, so it
   is named here instead of repeated as a bare value at each section. */
:root {
  --section-pad-mobile: 2.75rem; /* 44px */
}