/* =============================================================================
   BASE.CSS — Tokens, Fonts, Reset
   Traumatólogo GDL · Design System v1.2
   Load order: 1 of 4 (must be first)
   ============================================================================= */

/* -----------------------------------------------------------------------
   LOCAL FONTS — Variable WOFF2 (single file per family, all weights)
   ~47 KB total vs ~1.5 MB+ for 10 separate TTFs
   ----------------------------------------------------------------------- */
@font-face {
  font-family: 'Inter';
  src: url('../Fonts/Inter/InterVariable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Work Sans';
  src: url('../Fonts/Work%20Sans/WorkSansVariable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* -----------------------------------------------------------------------
   FALLBACK METRIC OVERRIDES - adjusts Arial to match Inter/Work Sans
   so the font swap is visually imperceptible (no layout shift)
   ----------------------------------------------------------------------- */
@font-face {
  font-family: 'Inter-fallback';
  src: local('Arial'), local('Helvetica Neue');
  ascent-override: 90%;
  descent-override: 22.5%;
  line-gap-override: 0%;
  size-adjust: 107%;
}
@font-face {
  font-family: 'WorkSans-fallback';
  src: local('Arial'), local('Helvetica Neue');
  ascent-override: 95%;
  descent-override: 24%;
  line-gap-override: 0%;
  size-adjust: 103%;
}


/* -----------------------------------------------------------------------
   CSS DESIGN TOKENS — Design Guide v1.2
   Never hardcode these values elsewhere. Always use var(--token).
   ----------------------------------------------------------------------- */
:root {
  /* NAVIES */
  --color-navy:        #183F66;
  --color-navy-panel:  #36546C;
  --color-navy-deep:   #2C4A62;
  --color-navy-dk:     #00448B;
  --color-border-dk:   #36546C;

  /* ACENTOS */
  --color-primary:     #357EB3;
  --color-primary-alt: #3A80AD;
  --color-primary-dk:  #00448B;
  --color-accent-soft: #ADCDE2;
  --color-green:       #63FF84;
  --color-green-mid:   #4DDBAC;
  --color-pulse:       #F5A623;

  /* TEXTO */
  --color-text-high:   #EDF6FF;
  --color-text-dark:   #183F66;
  --color-text-body:   #36546C;
  --color-text-mid:    #ADCDE2;
  --color-text-low:    #7A9AB8; /* decorative only — fails contrast on white */

  /* SUPERFICIES CLARAS */
  --color-bg-base:     #F4F7FF;
  --color-bg-alt:      #F9FCFE;
  --color-bg-card:     #FFFFFF;
  --color-bg-soft:     #E8EFFF;
  --color-border-lt:   #C8DFF0;

  /* GRADIENTES */
  --gradient-hero:       linear-gradient(145deg, #C5D8ED 0%, #D4E4F3 30%, #E2EEF9 55%, #EDF3FC 75%, #F4F7FF 100%);
  --gradient-cta:        linear-gradient(135deg, #357EB3 0%, #3A80AD 100%);
  --gradient-cta-hover:  linear-gradient(135deg, #00448B 0%, #2C6A9A 100%);
  --gradient-shimmer-lt: linear-gradient(135deg, rgba(53,126,179,0.06) 0%, rgba(53,126,179,0.02) 100%);
  --gradient-badge-green: linear-gradient(135deg, rgba(99,255,132,0.15) 0%, rgba(77,219,172,0.08) 100%);

  /* SOMBRAS */
  --shadow-card-lt:       0 2px 16px rgba(24,63,102,0.08);
  --shadow-card-lt-hover: 0 8px 32px rgba(53,126,179,0.14);
  --shadow-btn:           0 4px 20px rgba(53,126,179,0.30);
  --shadow-btn-hover:     0 6px 24px rgba(0,68,139,0.35);
  --shadow-green:         0 4px 16px rgba(99,255,132,0.40);
  --shadow-card-dk:       0 4px 32px rgba(0,0,0,0.28);
  --shadow-img:           0 8px 48px rgba(24,63,102,0.12);

  /* TIPOGRAFÍA */
  --font-heading: 'Inter', 'Inter-fallback', system-ui, sans-serif;
  --font-body:    'Work Sans', 'WorkSans-fallback', system-ui, sans-serif;

  --text-display: clamp(48px, 6vw, 80px);
  --text-h1:      clamp(38px, 4.5vw, 56px);
  --text-h2:      clamp(28px, 3.5vw, 42px);
  --text-h3:      clamp(22px, 2.5vw, 30px);
  --text-h4:      clamp(18px, 2vw, 22px);
  --text-body-l:  18px;
  --text-body-m:  16px;
  --text-body-s:  14px;
  --text-label:   12px;

  /* ESPACIADO */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-32: 128px;

  /* BORDES */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-full: 9999px;

  /* TRANSICIONES */
  --transition-fast: 0.15s ease;
  --transition-base: 0.25s ease;
  --transition-slow: 0.4s ease;

  /* SEMANTIC COLORS */
  --color-success:  #059669;
  --color-danger:   #B91C1C;
  --color-warning:  #B45309;
}

/* -----------------------------------------------------------------------
   RESET & BASE ELEMENTS
   ----------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  background-color: var(--color-bg-base);
  color: var(--color-text-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* -----------------------------------------------------------------------
   GLOBAL FOCUS STYLE — WCAG 2.1 AA (3:1 contrast against all surfaces)
   ----------------------------------------------------------------------- */
:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* -----------------------------------------------------------------------
   SKIP NAVIGATION — accessibility, visually hidden until focused
   ----------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  padding: var(--space-2) var(--space-4);
  background: var(--color-navy);
  color: var(--color-text-high);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  z-index: 9999;
  transition: top var(--transition-fast);
}

.skip-link:focus {
  top: var(--space-4);
}