/* PetitionHQ design tokens — marketing site
   Aligned to the locked Style A product language (see
   petitionhq-attorney-portal/redesign/redesign.css, the canonical ramp).
   Principles: whitespace is the structure, hairlines second; color is
   information (blue = the action, red/amber = exceptions only); text
   carries hierarchy. */

:root {
  /* Brand */
  --brand:        #1932F7;
  --brand-deep:   #0B1AC8;
  --brand-soft:   #EEF0FE;

  /* Neutrals — one ramp, used everywhere */
  --ink:          #101426;
  --muted:        #5C6276;
  --faint:        #9096A8;
  --rule:         #ECEEF4;
  --rule-strong:  #DDE1EA;
  --canvas:       #FAFAFC;
  --paper:        #FFFFFF;
  --hover:        #F6F7FA;

  /* Exceptions only */
  --red:          #D92D20;
  --red-soft:     #FEF3F2;
  --amber:        #B54708;
  --amber-bright: #F79009;
  --amber-soft:   #FFFAEB;
  --green:        #117B45;
  --green-bright: #12B76A;
  --green-soft:   #EDFDF3;

  /* Legacy semantic aliases (older pages) */
  --ok:           #12B76A;
  --warn:         #F79009;
  --err:          #D92D20;

  /* Type */
  --font-sans:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale */
  --text-display: clamp(38px, 4.6vw, 58px);
  --text-h1:      clamp(32px, 3.6vw, 44px);
  --text-h2:      clamp(26px, 3vw, 36px);
  --text-h3:      17px;
  --text-lg:      17px;
  --text-base:    15px;
  --text-sm:      13.5px;
  --text-xs:      12.5px;

  /* Radii */
  --r-sm:         7px;
  --r-md:         10px;
  --r-lg:         14px;
  --r-pill:       999px;

  /* Spacing (8pt scale) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-8: 48px;
  --s-10: 64px;
  --s-12: 96px;
  --s-16: 128px;

  /* Shadows — used sparingly: the primary action, floating chrome,
     and the hero product window. Everything else is hairlines. */
  --shadow-btn:       0 1px 2px rgba(16, 20, 38, .16), 0 3px 8px rgba(25, 50, 247, .28);
  --shadow-btn-hover: 0 2px 3px rgba(16, 20, 38, .16), 0 5px 14px rgba(25, 50, 247, .34);
  --shadow-pop:       0 2px 4px rgba(16, 20, 38, .04), 0 12px 32px rgba(16, 20, 38, .10);
  --shadow-window:    0 1px 2px rgba(16, 20, 38, .04), 0 16px 40px rgba(16, 20, 38, .07), 0 48px 96px rgba(16, 20, 38, .09);

  /* Layout */
  --container:    1140px;
  --container-px: 24px;
  --header-h:     60px;
}