/* YesWas design tokens (wave 1, agent 01, 2026-10-27).
   Inert on its own: only custom properties. Components read them via the yw- classes in components.css.
   Contrast ratios for every pair are measured and listed in docs/DESIGN_SYSTEM.md. */

:root {
	/* Colour: brand */
	--yw-blue: #0052ff;            /* brand; white on it 5.75:1 */
	--yw-blue-hover: #0044d6;      /* white on it 7.51:1 */
	--yw-blue-active: #0038b3;     /* white on it 9.47:1 */
	--yw-blue-light: #4d8aff;      /* brand blue for text/icons on black, 6.39:1 */
	--yw-navy: #182879;            /* structure: headings accents, borders, pressed state; white on it 12.98:1 */
	--yw-navy-deep: #131e58;       /* navy hover; white on it 15.51:1 */

	/* Colour: ink and surfaces */
	--yw-ink: #181818;             /* body text; 17.76:1 on white */
	--yw-ink-muted: #484848;       /* meta text; 9.15:1 on white, 8.39:1 on surface-alt */
	--yw-surface: #ffffff;
	--yw-surface-alt: #f3f5fb;     /* quiet blue-grey band; ink 16.29:1 */
	--yw-surface-tint: #eef1ff;    /* hover fill on light controls; navy 11.53:1 */
	--yw-hero: #000000;            /* the black hero */
	--yw-border: #c9ccd6;          /* decorative dividers only (1.6:1, never the only cue) */
	--yw-border-strong: #5b6070;   /* form fields and any border that is the only cue; 6.27:1 on white */

	/* Colour: text on dark (hero black, navy bands) */
	--yw-on-dark: #ffffff;
	--yw-on-dark-muted: #c2c4f0;   /* 12.45:1 on black, 7.69:1 on navy */
	--yw-on-dark-link: #99d4ff;    /* 13.22:1 on black, 8.17:1 on navy */

	/* Colour: links, focus, status */
	--yw-link: #0b6ba0;            /* 5.79:1 on white, 5.31:1 on surface-alt (the colour readers already know) */
	--yw-link-hover: #084d73;      /* 9.05:1 on white */
	--yw-focus: #182879;           /* ring on light surfaces; 12.98:1 on white */
	--yw-focus-on-dark: #ffd60a;   /* ring on black/navy; 14.88:1 on black, 9.19:1 on navy */
	--yw-success: #0b5d2a;         /* 8.04:1 on white */
	--yw-success-bg: #e7f6ec;      /* success on it 7.19:1 */
	--yw-error: #9f1239;           /* 8.02:1 on white */
	--yw-error-bg: #fdecef;        /* error on it 7.03:1 */
	--yw-disabled-bg: #e9ebf1;     /* disabled controls are exempt from contrast but keep >= 4:1 on purpose */
	--yw-disabled-ink: #6b6f7b;    /* 4.21:1 on disabled-bg */

	/* Type: one family. Basier is loaded by Use Any Font as `basier-regular`; no new font files. */
	--yw-font: basier-regular, "Basier Square", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--yw-text-sm: 0.875rem;        /* 14px: meta line, badge */
	--yw-text-base: 1rem;          /* 16px: body floor */
	--yw-text-md: 1.125rem;        /* 18px: lead, card summary on wide screens */
	--yw-text-lg: 1.25rem;         /* 20px: card title */
	--yw-text-xl: 1.5rem;          /* 24px: section title */
	--yw-text-2xl: clamp(1.75rem, 1.4rem + 1.6vw, 2.375rem); /* 28 -> 38px: page / hero title */
	--yw-weight-regular: 400;
	--yw-weight-strong: 600;
	--yw-weight-bold: 700;
	--yw-leading-tight: 1.2;       /* titles */
	--yw-leading-snug: 1.4;        /* meta, buttons */
	--yw-leading-body: 1.6;        /* running text */
	--yw-measure: 68ch;            /* max line length for prose */

	/* Space: 4px base, used for padding, gaps and rhythm */
	--yw-space-1: 0.25rem;  /*  4 */
	--yw-space-2: 0.5rem;   /*  8 */
	--yw-space-3: 0.75rem;  /* 12 */
	--yw-space-4: 1rem;     /* 16 */
	--yw-space-5: 1.5rem;   /* 24 */
	--yw-space-6: 2rem;     /* 32 */
	--yw-space-7: 3rem;     /* 48 */
	--yw-space-8: 4.5rem;   /* 72: section rhythm on desktop */
	--yw-gutter: clamp(1rem, 4vw, 2rem);

	/* Shape: two radii and a pill. Cards are rounder than controls on purpose. */
	--yw-radius-sm: 6px;    /* badge */
	--yw-radius: 10px;      /* buttons, fields (matches what the site already uses most) */
	--yw-radius-lg: 14px;   /* cards */
	--yw-radius-pill: 999px;

	/* Elevation: almost none. Cards are outlined, not floating. */
	--yw-shadow-1: 0 1px 2px rgba(24, 24, 24, 0.08);
	--yw-shadow-2: 0 4px 14px rgba(24, 40, 121, 0.14);   /* hover on cards only */

	/* Focus ring */
	--yw-ring-width: 3px;
	--yw-ring-offset: 2px;
	--yw-ring-color: var(--yw-focus);

	/* Targets */
	--yw-target: 44px;      /* minimum touch/click size */

	/* Motion */
	--yw-dur-fast: 120ms;
	--yw-dur: 180ms;
	--yw-ease: cubic-bezier(0.2, 0, 0, 1);
}

/* Any dark surface flips the ring and link colours. Put .yw-on-dark on the section, not on single elements. */
.yw-on-dark {
	--yw-ring-color: var(--yw-focus-on-dark);
}

/* Reduced motion: durations collapse to zero; components never rely on motion to convey state. */
@media (prefers-reduced-motion: reduce) {
	:root {
		--yw-dur-fast: 0.01ms;
		--yw-dur: 0.01ms;
	}
}