/* ============================================================
   BASE.CSS
   Design tokens, reset & base element styles
   ============================================================ */

/* ── Design Tokens ────────────────────────────────────────── */
:root {
  /* Brand */
  --velez-blue-main:      #07428A;
  --velez-blue-dark:      #040f22;
  --velez-blue-secondary: #023bef;
  --velez-white:          #ffffff;

  /* Accent */
  --blue-100: rgba(219, 234, 254, 0.9);

  /* Silver Tones (Adjusted for dark background contrast) */
  --silver-700: #f1f5f9;
  --silver-600: #e2e8f0;
  --silver-500: #cbd5e1;
  --silver-400: #94a3b8;
  --silver-200: rgba(255, 255, 255, 0.2);
  --silver-100: rgba(255, 255, 255, 0.1);

  /* Typography — UI */
  --font-heading: "Oswald", "Bebas Neue", sans-serif;
  --font-body:    "Barlow", "Inter", sans-serif;

  /* Typography — Editorial (News Reader) */
  --font-editorial-headline: "Playfair Display", "Georgia", serif;
  --font-editorial-body:     "Source Serif 4", "Georgia", serif;

  /* Editorial readability settings */
  --editorial-body-size:       1.125rem;
  --editorial-body-line-height: 1.9;
  --editorial-body-color:      #1a1a2e;

  /* Border radius */
  --radius-lg:  0;
  --radius-xl:  0;
  --radius-2xl: 0;

  /* Transitions */
  --transition-colors: color 0.2s, background-color 0.2s, border-color 0.2s;
}

/* ── Reset ────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  overflow-x: clip;
  scrollbar-gutter: stable;
  /* font-smoothing already set globally via the * reset above */
}

html.modal-open,
body.modal-open {
  overflow: hidden !important;
  scrollbar-gutter: auto !important;
}

body {
  min-height: 100vh;
  background-color: var(--velez-blue-dark);
  font-family: var(--font-body);
  color: var(--velez-white);
  line-height: 1.6;
  overflow-x: clip;
  /* font-smoothing already set globally via the * reset above */
}

/* ── Base Elements ────────────────────────────────────────── */
img {
  display: block;
  max-width: 100%;
}

a {
  text-decoration: none;
  color: inherit;
}

button {
  cursor: pointer;
  font-family: inherit;
  border: none;
  background: none;
}

ul {
  list-style: none;
}

::selection {
  background-color: var(--velez-blue-main);
  color: #fff;
}