/* =========================================================================
   Oncocentro / Acerey — Colors & Type
   Shared foundations for both brands. Brand-specific accents live in
   [data-brand="oncocentro"] and [data-brand="acerey"] scopes below.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Typography — Webfont imports
   System v0.2 — a digital evolution of the Manual de Marca Oncocentro 2019.
   The manual's geometric DNA is kept, but the body/UI workhorse is upgraded
   from Roboto to Hanken Grotesk (warmer, more humane, single-family system).
     • Display/Hero : Montserrat — kept from the manual for big hero titles
                      and campaign headlines. Bold / ExtraBold. Impact only.
     • UI + Body    : Hanken Grotesk — everything else: H2-H6, running text,
                      labels, controls. Geometric-humanist, calm, legible.
     • Descriptor   : Nunito Sans Light — tagline lockup (from manual).
     • Logotipo     : Arial Unicode MS — logo only; not loaded as webfont.
   Mono: JetBrains Mono — addition for clinical data / IDs / lab values.
   ------------------------------------------------------------------------- */
/* @import de Google Fonts eliminado: las fuentes se sirven self-hosted via fonts.css (unica desviacion respecto del design system; ver tema/descargar-fuentes.ps1) */

:root {
  /* =====================================================================
     COLOR — Brand primitives (sampled directly from supplied logo files)
     ===================================================================== */

  /* Oncocentro */
  --oc-orange:        #FF8533;  /* Accent curve — reserved for moments of warmth */
  --oc-orange-600:    #EB6E1A;
  --oc-orange-700:    #C95B12;  /* hover/press step for the primary action orange */
  --oc-orange-100:    #FFE8D6;
  --oc-orange-50:     #FFF4EA;

  --oc-slate:         #6B798E;  /* Wordmark — primary neutral identity (Pantone 2361 · 60% of Azul Grafito) */
  --oc-slate-700:     #4E5A71;
  --oc-slate-800:     #3A455B;

  /* Acerey */
  --ac-teal:          #1893B1;  /* Primary clinical/research accent */
  --ac-teal-700:      #0F7792;
  --ac-teal-100:      #D4EEF4;
  --ac-teal-50:       #EBF7FA;

  /* Shared navy — ties both brands together. This is the anchor color. */
  --navy:             #202E47;
  --navy-800:         #2C3B57;
  --navy-700:         #3B4A66;

  /* =====================================================================
     COLOR — Neutral scale (warm-cool neutral, sits between both brands)
     ===================================================================== */
  --neutral-0:        #FFFFFF;
  --neutral-50:       #F8F9FB;
  --neutral-100:      #F1F3F7;
  --neutral-200:      #E4E8EF;
  --neutral-300:      #D1D7E0;
  --neutral-400:      #A9B2C1;
  --neutral-500:      #7B8699;
  --neutral-600:      #5B6679;
  --neutral-700:      #404A5C;
  --neutral-800:      #2A3242;
  --neutral-900:      #161C2A;

  /* =====================================================================
     COLOR — Semantic (status / feedback)
     Kept muted; errors are clear but never alarming.
     ===================================================================== */
  --success:          #2E7D63;
  --success-bg:       #E6F2EC;
  --warning:          #B5741F;
  --warning-bg:       #FBEFD9;
  --danger:           #B4433A;      /* Muted, not red-alarm */
  --danger-bg:        #FBE8E6;
  --info:             #2D6A9F;
  --info-bg:          #E4EEF7;

  /* =====================================================================
     COLOR — Semantic roles (brand-neutral defaults)
     App surfaces default to Oncocentro patient-care tone.
     Scopes override --accent only.
     ===================================================================== */
  --bg:               var(--neutral-0);
  --bg-subtle:        var(--neutral-50);
  --bg-muted:         var(--neutral-100);
  --surface:          var(--neutral-0);
  --surface-raised:   var(--neutral-0);

  --fg:               var(--navy);         /* Primary text */
  --fg-1:             var(--navy);
  --fg-2:             var(--neutral-700);  /* Secondary text */
  --fg-3:             var(--neutral-500);  /* Tertiary / captions */
  --fg-4:             var(--neutral-400);  /* Disabled */
  --fg-on-accent:     var(--neutral-0);

  --border:           var(--neutral-200);
  --border-strong:    var(--neutral-300);
  --divider:          var(--neutral-100);

  /* Accent defaults to Oncocentro orange. Override per brand below. */
  --accent:           var(--oc-orange);
  --accent-hover:     var(--oc-orange-600);
  --accent-soft:      var(--oc-orange-100);
  --accent-wash:      var(--oc-orange-50);
  --accent-fg:        var(--neutral-0);

  /* =====================================================================
     TYPE — Families (v0.2 — evolution of Manual Oncocentro 2019)
     --font-sans     : Hanken Grotesk — UI + body + H2-H6 (the workhorse)
     --font-display  : Montserrat — hero titles / campaign headlines only
     --font-descriptor: Nunito Sans Light — tagline / descriptor lockup
     --font-mono     : JetBrains Mono — clinical data (addition, not manual)
     ===================================================================== */
  --font-sans:        'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --font-display:     'Montserrat', 'Hanken Grotesk', -apple-system, 'Segoe UI', Arial, sans-serif;
  --font-descriptor:  'Nunito Sans', 'Hanken Grotesk', -apple-system, sans-serif;
  --font-mono:        'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* =====================================================================
     TYPE — Scale (modular, modest ratio — calm/clinical, not theatrical)
     Base 16px, ratio ~1.2
     ===================================================================== */
  --text-xs:          0.75rem;      /* 12 */
  --text-sm:          0.875rem;     /* 14 */
  --text-base:        1rem;         /* 16 */
  --text-md:          1.125rem;     /* 18 */
  --text-lg:          1.25rem;      /* 20 */
  --text-xl:          1.5rem;       /* 24 */
  --text-2xl:         1.875rem;     /* 30 */
  --text-3xl:         2.25rem;      /* 36 */
  --text-4xl:         3rem;         /* 48 */
  --text-5xl:         3.75rem;      /* 60 */
  --text-6xl:         4.5rem;       /* 72 */

  /* Weight — Roboto: 300/400/500/700 · Montserrat: 600/700/800 */
  --fw-light:         300;  /* @kind font */
  --fw-regular:       400;  /* @kind font */
  --fw-medium:        500;  /* @kind font */
  --fw-semibold:      600;  /* @kind font */
  --fw-bold:          700;  /* @kind font */
  --fw-extrabold:     800;  /* @kind font */

  /* Leading */
  --leading-tight:    1.15;
  --leading-snug:     1.3;
  --leading-normal:   1.5;
  --leading-relaxed:  1.65;

  /* Tracking */
  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.02em;
  --tracking-eyebrow: 0.12em;   /* Small-caps eyebrow labels */

  /* =====================================================================
     SPACING — 4px baseline grid
     ===================================================================== */
  --space-1:          4px;
  --space-2:          8px;
  --space-3:          12px;
  --space-4:          16px;
  --space-5:          20px;
  --space-6:          24px;
  --space-8:          32px;
  --space-10:         40px;
  --space-12:         48px;
  --space-16:         64px;
  --space-20:         80px;
  --space-24:         96px;
  --space-32:         128px;

  /* =====================================================================
     RADII — Rounded but not playful
     ===================================================================== */
  --radius-xs:        4px;
  --radius-sm:        6px;
  --radius-md:        10px;
  --radius-lg:        14px;
  --radius-xl:        20px;
  --radius-2xl:       28px;
  --radius-pill:      999px;

  /* =====================================================================
     SHADOWS — Restrained. Prefer borders over drop shadows for cards.
     ===================================================================== */
  --shadow-xs:        0 1px 2px rgba(32, 46, 71, 0.04);
  --shadow-sm:        0 1px 3px rgba(32, 46, 71, 0.06), 0 1px 2px rgba(32, 46, 71, 0.04);
  --shadow-md:        0 4px 10px -2px rgba(32, 46, 71, 0.08), 0 2px 4px -2px rgba(32, 46, 71, 0.05);
  --shadow-lg:        0 12px 24px -6px rgba(32, 46, 71, 0.10), 0 4px 8px -4px rgba(32, 46, 71, 0.06);
  --shadow-focus:     0 0 0 3px rgba(24, 147, 177, 0.22);
  --shadow-focus-oc:  0 0 0 3px rgba(255, 133, 51, 0.28);

  /* =====================================================================
     MOTION — Calm, never bouncy
     ===================================================================== */
  --ease-standard:    cubic-bezier(0.2, 0.0, 0.2, 1);  /* @kind other */
  --ease-out:         cubic-bezier(0.16, 1, 0.3, 1);  /* @kind other */
  --dur-fast:         120ms;  /* @kind other */
  --dur-base:         200ms;  /* @kind other */
  --dur-slow:         320ms;  /* @kind other */

  /* =====================================================================
     LAYOUT
     ===================================================================== */
  --container-sm:     640px;
  --container-md:     768px;
  --container-lg:     1024px;
  --container-xl:     1200px;
  --container-2xl:    1440px;
}

/* =========================================================================
   Brand scopes — apply to <html> or any container with data-brand="…"
   ========================================================================= */
[data-brand="oncocentro"] {
  --accent:         var(--oc-orange);
  --accent-hover:   var(--oc-orange-600);
  --accent-soft:    var(--oc-orange-100);
  --accent-wash:    var(--oc-orange-50);
  --shadow-focus:   var(--shadow-focus-oc);
}

[data-brand="acerey"] {
  --accent:         var(--ac-teal);
  --accent-hover:   var(--ac-teal-700);
  --accent-soft:    var(--ac-teal-100);
  --accent-wash:    var(--ac-teal-50);
}

/* =========================================================================
   Semantic element defaults
   Consumers can either use these directly or pick up the vars above.
   ========================================================================= */
body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  color: var(--fg-1);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  margin: 0;
  text-wrap: balance;
}

/* H1 / hero keeps the manual's Montserrat voice; H2-H6 use Hanken Grotesk */
h1 { font-size: var(--text-4xl); font-family: var(--font-display); font-weight: var(--fw-bold); }
h2 { font-size: var(--text-3xl); letter-spacing: var(--tracking-tight); }
h3 { font-size: var(--text-2xl); letter-spacing: var(--tracking-normal); }
h4 { font-size: var(--text-xl); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-normal); }
h5 { font-size: var(--text-lg); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-normal); }
h6 { font-size: var(--text-md); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-normal); }

p  { margin: 0; line-height: var(--leading-relaxed); color: var(--fg-2); text-wrap: pretty; }

small { font-size: var(--text-sm); color: var(--fg-3); }

code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

/* Eyebrow label — small-caps, wide tracking, calm */
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--fg-3);
}

/* Display utility — for hero headlines (Montserrat ExtraBold per manual) */
.display {
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  font-size: var(--text-5xl);
}

/* Descriptor utility — tagline lockup (Nunito Sans Light per manual) */
.descriptor {
  font-family: var(--font-descriptor);
  font-weight: var(--fw-light);
  letter-spacing: var(--tracking-wide);
  color: var(--fg-2);
}

a { color: var(--navy); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--border-strong); transition: color var(--dur-fast) var(--ease-standard), text-decoration-color var(--dur-fast) var(--ease-standard); }
a:hover { color: var(--accent-hover); text-decoration-color: currentColor; }

*:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-sm);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}