@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: local("Open Sans");
}

:root {
  color-scheme: var(--color-scheme, light);

  --color-premio-blue: #002855;
  --color-premio-yellow: #ffcd00;
  --color-hover-blue: #26486e;
  --color-hover-yellow: #e6b900;
  --color-link-blue: #004786;
  --color-dark-blue: #002042;
  --color-super-light-blue: #e6eaee;
  --color-price-tag-red: #c6162d;
  --color-price-tag-dark-red: #7e1117;
  --color-gray-5: #f7f7f7;
  --color-gray-10: #ededed;
  --color-gray-25: #d1d1d1;
  --color-gray-40: #b6b6b6;
  --color-gray-65: #777777;
  --color-gray-90: #424242;
  --color-black: #242424;
  --color-white: #ffffff;

  --font-family-base: "Open Sans", Arial, sans-serif;
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-md: 16px;
  --font-size-lg: 20px;
  --font-size-xl: 24px;
  --font-size-2xl: 32px;
  --line-height-tight: 1.2;
  --line-height-button: 20px;
  --line-height-body: 1.5;
  --line-height-heading: 1.15;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-weight-extra-bold: 800;

  --space-0: 0;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-8: 64px;
  --space-10: 80px;
  --space-12: 96px;

  --radius-none: 0;
  --radius-button: 3px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-2xl: 16px;
  --radius-full: 999px;

  --shadow-card: 0 2px 6px rgba(0, 0, 0, 0.08);
  --shadow-elevated: 0 12px 32px rgba(0, 40, 85, 0.16);
  --focus-ring: 0 0 0 3px rgba(255, 205, 0, 0.44);

  --bg: var(--color-gray-10);
  --bg-elevated: var(--color-white);
  --surface: var(--color-white);
  --surface-2: var(--color-gray-5);
  --surface-3: var(--color-super-light-blue);
  --line: var(--color-gray-25);
  --line-soft: var(--color-gray-10);
  --text: var(--color-gray-90);
  --text-muted: #5e5e5e;
  --text-soft: var(--color-gray-90);
  --brand-blue: var(--color-premio-blue);
  --primary: var(--color-premio-blue);
  --primary-hover: var(--color-hover-blue);
  --accent: var(--color-premio-yellow);
  --secondary: var(--color-link-blue);
  --accent-2: var(--color-hover-blue);
  --accent-ink: var(--color-white);
  --warning: var(--color-premio-yellow);
  --danger: var(--color-price-tag-red);
  --info: var(--color-link-blue);
  --success: #2e7d32;
  --neutral: var(--color-gray-65);
  --status-danger: var(--color-price-tag-red);
  --status-warning: var(--color-hover-yellow);
  --status-success: #2e7d32;
  --status-info: var(--color-link-blue);
  --status-neutral: var(--color-gray-65);
  --tint-danger: rgba(198, 22, 45, 0.12);
  --tint-warning: rgba(255, 205, 0, 0.2);
  --tint-success: rgba(46, 125, 50, 0.12);
  --tint-info: rgba(0, 71, 134, 0.12);
  --tint-neutral: rgba(119, 119, 119, 0.14);
  --transition-fast: 140ms ease;
  --shadow: var(--shadow-elevated);
  --shadow-soft: var(--shadow-card);
  --radius: var(--radius-md);
}

:root[data-theme="dark"] {
  --color-scheme: dark;
  --bg: #0d1520;
  --bg-elevated: #121d2b;
  --surface: #162334;
  --surface-2: #111c2a;
  --surface-3: #22344a;
  --line: #34475f;
  --line-soft: #24364b;
  --text: #f3f7fb;
  --text-muted: #bdcad8;
  --text-soft: #e4edf6;
  --secondary: #8bbdff;
  --accent-ink: var(--color-premio-blue);
  --success: #4fd28b;
  --neutral: #a8b5c3;
  --status-success: #4fd28b;
  --status-neutral: #a8b5c3;
  --tint-danger: rgba(198, 22, 45, 0.22);
  --tint-warning: rgba(255, 205, 0, 0.22);
  --tint-success: rgba(79, 210, 139, 0.16);
  --tint-info: rgba(139, 189, 255, 0.18);
  --tint-neutral: rgba(168, 181, 195, 0.18);
  --shadow-card: 0 2px 10px rgba(0, 0, 0, 0.32);
  --shadow-elevated: 0 16px 36px rgba(0, 0, 0, 0.38);
  --focus-ring: 0 0 0 3px rgba(255, 205, 0, 0.44);
  --shadow: var(--shadow-elevated);
  --shadow-soft: var(--shadow-card);
}

html,
body {
  font-family: var(--font-family-base);
  line-height: var(--line-height-body);
}

:focus-visible {
  outline: 2px solid var(--color-premio-yellow);
  outline-offset: 2px;
  box-shadow: var(--focus-ring);
}

:where(h1, h2, h3, .eyebrow, .page-intro):focus-visible {
  outline: none;
  box-shadow: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}