/**
 * Hungary Visa -- Design Tokens
 * CSS custom properties for colors, typography, spacing, radii, shadows.
 *
 * Colour system follows the same convention as OM Theme:
 *   - Three families (primary / contrast / neutral), 5 stops each.
 *   - 100 = lightest tint, 500 = base, 900 = deepest.
 */

:root {
	/* ============================================================
	 * Colour -- Primary (forest green)
	 * Professional, trustworthy, authoritative. Green conveys
	 * security and stability -- appropriate for legal/immigration
	 * services where trust is the primary conversion driver.
	 *
	 * Base extracted from live site: rgb(26, 77, 46) = #1A4D2E.
	 * 5-stop scale built around that anchor.
	 * ============================================================ */
	--hv-color-primary-100: #e7f5ec; /* tint -- badge/tag bg, light washes */
	--hv-color-primary-300: #a3d4b5; /* light -- borders, disabled states */
	--hv-color-primary-500: #2d8a52; /* mid -- secondary accents */
	--hv-color-primary-700: #1a4d2e; /* BASE -- buttons, section bg, CTA */
	--hv-color-primary-900: #0e2e1a; /* deep -- hover states */

	/* ============================================================
	 * Colour -- Contrast (gold / amber)
	 * Eye-catching accent for trust badges, labels ("FULL GUIDE",
	 * "LICENSED"), and highlight CTAs. Warm gold against forest
	 * green creates a classic, authoritative palette.
	 *
	 * Base extracted from live site: rgb(244, 197, 66) = #F4C542.
	 * ============================================================ */
	--hv-color-contrast-100: #fef6dc;
	--hv-color-contrast-300: #f7d97a;
	--hv-color-contrast-500: #f4c542; /* BASE */
	--hv-color-contrast-700: #c99e2a;
	--hv-color-contrast-900: #7d6218;

	/* ============================================================
	 * Colour -- Neutral
	 * Body chrome. Cool-leaning to balance the warm gold and
	 * complement the green. Near-black headings read as
	 * authoritative; muted text stays readable.
	 * ============================================================ */
	--hv-color-neutral-100: #f8f9fa; /* page bg-soft -- light grey wash */
	--hv-color-neutral-300: #dee2e6; /* borders, dividers */
	--hv-color-neutral-500: #6c757d; /* muted text */
	--hv-color-neutral-700: #343a40; /* body copy */
	--hv-color-neutral-900: #1a1a2e; /* headings, near-black */

	/* ============================================================
	 * Status -- semantic colours (alerts, form feedback)
	 * Same muted, magazine-style approach as OM.
	 * ============================================================ */
	--hv-color-success: #4f7a55;
	--hv-color-warning: #b88a2c;
	--hv-color-danger:  #a4453d;
	--hv-color-info:    #46698a;

	--hv-color-success-tint: #eaf0eb;
	--hv-color-warning-tint: #f5ecd9;
	--hv-color-danger-tint:  #f3e2df;
	--hv-color-info-tint:    #e6ecf2;

	--hv-color-info-text:    #2a3d52;
	--hv-color-success-text: #2f4a32;
	--hv-color-warning-text: #7d5a16;
	--hv-color-danger-text:  #6a2a25;

	/* ============================================================
	 * Link colour
	 * Using primary-700 for links so they read as branded but
	 * distinct from body copy. Underlines carry the affordance.
	 * ============================================================ */
	--hv-color-link:       var(--hv-color-primary-700);
	--hv-color-link-hover: var(--hv-color-primary-900);

	/* ============================================================
	 * Convenience aliases
	 * ============================================================ */
	--hv-color-primary:    var(--hv-color-primary-700);

	--hv-color-accent:      var(--hv-color-contrast-500);
	--hv-color-accent-dark: var(--hv-color-contrast-700);

	--hv-color-text:       var(--hv-color-neutral-700);
	--hv-color-text-muted: var(--hv-color-neutral-500);
	--hv-color-heading:    var(--hv-color-neutral-900);

	--hv-color-bg:      #ffffff;
	--hv-color-bg-alt:  #ffffff;
	--hv-color-bg-soft: var(--hv-color-neutral-100);
	--hv-color-border:  var(--hv-color-neutral-300);

	--hv-color-white: #ffffff;
	--hv-color-black: #000000;

	/* ============================================================
	 * Typography
	 * Switching from Roboto (current live) to Inter for
	 * consistency across Crown Media sites. Inter reads clean
	 * at every size and supports the full weight range needed.
	 * ============================================================ */
	--hv-font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--hv-font-heading: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	--hv-text-xs:   0.75rem;
	--hv-text-sm:   0.875rem;
	--hv-text-base: 1rem;
	--hv-text-md:   1.125rem;
	--hv-text-lg:   1.25rem;
	--hv-text-xl:   1.5rem;
	--hv-text-2xl:  2rem;
	--hv-text-3xl:  2.75rem;

	--hv-leading-tight:  1.15;
	--hv-leading-normal: 1.6;

	/* ============================================================
	 * Spacing
	 * ============================================================ */
	--hv-space-xs:  0.25rem;
	--hv-space-sm:  0.5rem;
	--hv-space-md:  1rem;
	--hv-space-lg:  1.5rem;
	--hv-space-xl:  2.5rem;
	--hv-space-2xl: 4rem;

	/* ============================================================
	 * Radii
	 * ============================================================ */
	--hv-radius-sm:   4px;
	--hv-radius-btn:  6px;
	--hv-radius-md:   12px;
	--hv-radius-lg:   16px;
	--hv-radius-xl:   24px;
	--hv-radius-pill: 999px;

	/* ============================================================
	 * Shadows
	 * ============================================================ */
	--hv-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.08);
	--hv-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.06);
	--hv-shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.10), 0 4px 8px rgba(0, 0, 0, 0.06);

	/* ============================================================
	 * Layout
	 * ============================================================ */
	--hv-container: 1320px;
	--hv-container-narrow: 760px;
}