/* Design tokens - shared by every page. Contract: plan section A.6 */
:root {
  --blue-900: #0A2A5E; --blue-700: #0F3F8C; --blue-500: #1E63D6; --blue-300: #6FA3F0;
  --sky-200: #CFE5FB; --sky-100: #E9F3FD; --sky-50: #F5FAFF;
  --red-600: #D7263D; --red-100: #FDE8EB;
  --ink: #15223A; --muted: #5B6B85; --line: #D9E2EF; --white: #FFFFFF;
  --ok: #1B9C5B; --warn: #C98A00;
  /* gold: the premium plan only (animated frame + crown, see .gold-frame / .gold-crown) */
  --gold-100: #FFF7DA; --gold-300: #F6E27A; --gold-500: #D4AF37; --gold-700: #A67C00;
  --radius: 14px; --radius-sm: 8px;
  --shadow-1: 0 2px 8px rgba(10,42,94,.08); --shadow-2: 0 10px 30px rgba(10,42,94,.14);
  --font: 'Rubik', system-ui, sans-serif;
  --maxw: 1120px; --gutter: 16px;

  /* Extra tokens (not in the contract, safe to use) */
  --ok-100: #E6F6EC;
  --warn-100: #FFF6E0;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --control-h: 48px;
  --header-h: 72px;          /* phones: logo 46px + a one-line tagline */
  /* S (7.11, a11y #25): the focus ring of fields is a real 3px ring now (was .25 = 1.4:1 on white) */
  --ring: 0 0 0 3px rgba(30, 99, 214, .55);
  --transition: 160ms ease;

  /* ESTA GO redesign (R, 6.11): navy header/strip, red marketing CTAs, sky hero */
  --navy-900: #0B2A5B; --navy-700: #0F3F8C;
  --navy-grad: linear-gradient(100deg, #0B2A5B 0%, #0F3F8C 100%);
  --red-500: #E3262F;            /* logo "GO", swooshes, decorative */
  --red-cta: #D41E29;            /* red buttons: white text 5.1:1 */
  --red-cta-dark: #B5161F;       /* hover / gradient end */
  --sky-hero: linear-gradient(180deg, #DCEBFB 0%, #EEF6FE 55%, #F7FBFF 100%);
  --shadow-soft: 0 12px 40px rgba(15, 63, 140, .10), 0 2px 8px rgba(15, 63, 140, .05);

  /* One radius per kind of thing (S, 7.11; final design review 10–12). Before: 5 button radii and
     5 card radii across the site. Pills (999px, .btn--pill) are only for the marketing CTAs:
     the header button, the big hero button and the plan cards. */
  --radius-btn: 12px;        /* every .btn */
  --radius-field: 10px;      /* .input, .select, yes/no, boxed checkbox; fields stay 48px high */
  --radius-card: 20px;       /* white cards */
  --radius-card-lg: 24px;    /* the one big card of a page (form card, "how it works") */
  /* the sky opening of the inner pages (page-hero.css .sky-page; status / pay-bit can use it too) */
  --sky-page: linear-gradient(180deg, #D9E9FB 0, #E8F2FD 300px, #F2F8FE 640px, #F8FBFF 1100px);
  --sky-page-end: #F8FBFF;   /* the last colour: body + the strip above the footer wave */
}
/* the header is taller on desktop (logo + tagline line) */
@media (min-width: 1024px) {
  :root { --header-h: 84px; }
}