/* ============= EFFRA (variable font, corporate) ============= */
@font-face {
  font-family: 'Effra';
  src: url('/Assets/Font/EffraVF_Wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Effra';
  src: url('/Assets/Font/EffraVF_WghtItal.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Brand colors (Manual de Marca Bioraltech) */
  --color-cyan-light: #67D2DF;
  --color-cyan: #B5C900;
  --color-blue-deep: #007DB4;

  /* Secondary */
  --color-gold: #AD841F;
  --color-cream: #EBE0CF;
  --color-black: #000000;

  /* UI system */
  --color-bg: #FAFAFA;
  --color-bg-soft: #F0F2FF;
  --color-bg-deep: #007DB4;
  --color-text: #1A2332;
  --color-text-soft: #4A5568;
  --color-text-muted: #6B7280;
  --color-border: #E2E8F0;
  --color-border-soft: #EDF2F7;

  /* Brand gradient (cyan family) */
  --gradient-brand: linear-gradient(135deg, #67D2DF 0%, #B5C900 50%, #007DB4 100%);
  --gradient-brand-soft: linear-gradient(135deg, rgba(103, 210, 223, 0.10) 0%, rgba(181, 201, 0, 0.12) 50%, rgba(0, 125, 180, 0.10) 100%);

  /* Typography */
  --font-display: 'Effra', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Effra', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Fluid type scale — Meridian editorial sizes */
  --fs-h1: clamp(2.25rem, 4.5vw + 0.85rem, 4.25rem);
  --fs-h2: clamp(2rem, 3.5vw + 0.6rem, 3.5rem);
  --fs-h3: clamp(1.375rem, 1.6vw + 0.85rem, 1.75rem);
  --fs-h4: clamp(1.125rem, 0.8vw + 0.9rem, 1.375rem);
  --fs-body: clamp(1rem, 0.4vw + 0.9rem, 1.125rem);
  --fs-lead: clamp(1.125rem, 0.5vw + 0.95rem, 1.3125rem);
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.75rem;
  --fs-stat: clamp(3.5rem, 7vw + 1rem, 6.5rem);

  /* Section padding (uniform rhythm across all sections) */
  --sp-section: clamp(3.5rem, 5.5vw, 5.5rem);

  /* Spacing (8pt scale) */
  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2rem;
  --sp-5: 3rem;
  --sp-6: 4rem;
  --sp-7: 6rem;
  --sp-8: 8rem;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* Shadow */
  --shadow-sm: 0 1px 3px rgba(0, 125, 180, 0.08);
  --shadow-md: 0 4px 16px rgba(0, 125, 180, 0.12);
  --shadow-lg: 0 12px 40px rgba(0, 125, 180, 0.18);
  --shadow-up: 0 -4px 16px rgba(0, 0, 0, 0.08);

  /* Animation */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 180ms;
  --dur: 280ms;
  --dur-slow: 480ms;

  /* Layout */
  --container-max: 1480px;
  --container-pad: clamp(1rem, 5vw, 5rem);
  --nav-h: 72px;

  /* Safe areas */
  --safe-top: env(safe-area-inset-top);
  --safe-bottom: env(safe-area-inset-bottom);
  --safe-left: env(safe-area-inset-left);
  --safe-right: env(safe-area-inset-right);

  /* Focus */
  --focus-ring: 3px solid var(--color-cyan);
  --focus-offset: 2px;
}