/* Fundación Barceló - tokens de marca (MAR 2026).
   Generado concatenando tokens/{fonts,colors,typography,spacing,base}.css del design system. */

/* ============================================================
   Universidad Barceló — Webfonts
   ------------------------------------------------------------
   Brand type system (from the Manual de Identidad):
   - TITLES / headlines:  Sofia Pro (Adobe Fonts, licensed)
   - DIGITAL fallback:    Montserrat (Google Fonts) — used when
                          Sofia Pro is unavailable.
   - BODY / long text:    Source Sans 3 (Google Fonts)

   NOTE ON SUBSTITUTION
   Sofia Pro is an Adobe Fonts (Typekit) family and cannot be
   self-hosted or loaded from a public CDN without a licensed
   kit. This design system therefore ships **Montserrat** as the
   display face — which the brand manual explicitly designates as
   the approved digital replacement for Sofia Pro. If you have an
   Adobe Fonts kit for Sofia Pro, add its <link> and swap the
   --font-display value in typography.css to "sofia-pro".
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;0,900;1,400;1,600&family=Source+Sans+3:ital,wght@0,300;0,400;0,600;0,700;0,900;1,400;1,600&display=swap');

/* ============================================================
   Universidad Barceló — Color tokens
   Source: Manual de Identidad y estándares marcarios (MAR 2026)
   ============================================================ */
:root {
  /* --- Institutional palette (exact brand values) --- */
  --barcelo-blue:      #0061F0; /* Principal · Pantone 2728 C */
  --barcelo-navy:      #06038D; /* Secundario · Pantone 2738 C */
  --barcelo-cyan:      #00D1FF; /* Secundario · Pantone 306 C  */
  --barcelo-white:     #FFFFFF; /* Secundario · Blanco         */
  --barcelo-black:     #000000; /* Versión negra · Pantone Black 6 C */
  --barcelo-gray:      #888B8D; /* Versión gris · Pantone Cool Gray 8 C */

  /* --- Blue tints & shades (system-extended, harmonic w/ #0061F0) --- */
  --blue-50:   #EAF2FE;
  --blue-100:  #D0E2FD;
  --blue-200:  #A3C6FB;
  --blue-300:  #6BA1F7;
  --blue-400:  #337EF4;
  --blue-500:  #0061F0; /* = --barcelo-blue */
  --blue-600:  #044FC7;
  --blue-700:  #0A3E9E;
  --blue-800:  #06038D; /* = --barcelo-navy */
  --blue-900:  #050270;

  /* --- Cyan tints (accent) --- */
  --cyan-100:  #CAF6FF;
  --cyan-200:  #8FEAFF;
  --cyan-300:  #4CDCFF;
  --cyan-400:  #00D1FF; /* = --barcelo-cyan */
  --cyan-600:  #00A6CC;

  /* --- Neutral / gray ramp (built around Cool Gray 8 C) --- */
  --gray-0:    #FFFFFF;
  --gray-50:   #F5F6F7;
  --gray-100:  #ECEDEE;
  --gray-200:  #DCDEDF;
  --gray-300:  #C4C6C8;
  --gray-400:  #A6A9AB;
  --gray-500:  #888B8D; /* = --barcelo-gray */
  --gray-600:  #6C6F71;
  --gray-700:  #4E5052;
  --gray-800:  #303233;
  --gray-900:  #171819;
  --ink:       #0B0C0D;

  /* --- Semantic aliases --- */
  --color-primary:        var(--barcelo-blue);
  --color-primary-hover:  var(--blue-600);
  --color-primary-active: var(--blue-700);
  --color-secondary:      var(--barcelo-navy);
  --color-accent:         var(--barcelo-cyan);

  --surface-page:      var(--barcelo-white);
  --surface-raised:    var(--gray-50);
  --surface-card:      var(--barcelo-white);
  --surface-brand:     var(--barcelo-blue);
  --surface-brand-deep:var(--barcelo-navy);
  --surface-inverse:   var(--ink);

  --text-strong:   var(--ink);
  --text-body:     var(--gray-800);
  --text-muted:    var(--gray-500);
  --text-on-brand: var(--barcelo-white);
  --text-link:     var(--barcelo-blue);

  --border-subtle: var(--gray-200);
  --border-default:var(--gray-300);
  --border-strong: var(--gray-500);
  --border-brand:  var(--barcelo-blue);

  /* semantic status (kept in-family; blue-forward brand) */
  --color-success: #1E9E5A;
  --color-warning: #E8A400;
  --color-danger:  #D8352A;
  --color-info:    var(--barcelo-blue);

  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--barcelo-cyan) 65%, transparent);
}

/* ============================================================
   Universidad Barceló — Typography tokens
   Titles: Sofia Pro → shipped as Montserrat (approved digital
   substitute per the manual). Body: Source Sans 3.
   ============================================================ */
:root {
  /* Families */
  --font-display: 'Montserrat', 'Sofia Pro', system-ui, sans-serif;
  --font-body:    'Source Sans 3', system-ui, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Weights — display (Montserrat / Sofia Pro) */
  --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-black:     900; /* @kind font */

  /* Type scale (rem, 16px base) — Perfect-ish 1.25 major-third */
  --text-xs:    0.75rem;   /* 12 */
  --text-sm:    0.875rem;  /* 14 */
  --text-base:  1rem;      /* 16 */
  --text-md:    1.125rem;  /* 18 */
  --text-lg:    1.375rem;  /* 22 */
  --text-xl:    1.75rem;   /* 28 */
  --text-2xl:   2.25rem;   /* 36 */
  --text-3xl:   3rem;      /* 48 */
  --text-4xl:   4rem;      /* 64 */
  --text-5xl:   5.5rem;    /* 88 */

  /* Line heights */
  --lh-tight:   1.05;  /* @kind other */
  --lh-snug:    1.2;   /* @kind other */
  --lh-normal:  1.5;   /* @kind other */
  --lh-relaxed: 1.65;  /* @kind other */

  /* Letter-spacing — geometric display tightens slightly; the
     brand uses generous tracking on small uppercase labels */
  --ls-display:  -0.02em; /* @kind other */
  --ls-tight:    -0.01em; /* @kind other */
  --ls-normal:   0;       /* @kind other */
  --ls-label:    0.08em;  /* @kind other */
  --ls-wide:     0.14em;  /* @kind other */
}

/* ============================================================
   Universidad Barceló — Spacing, radius, shadow, motion tokens
   The brand's core morphology is the "stadium / pill" (fully
   rounded ends), derived from the letter B. Radii reflect that.
   ============================================================ */
:root {
  /* Spacing scale (4px base grid) */
  --space-0:  0;
  --space-1:  0.25rem;  /* 4  */
  --space-2:  0.5rem;   /* 8  */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.5rem;   /* 24 */
  --space-6:  2rem;     /* 32 */
  --space-7:  2.5rem;   /* 40 */
  --space-8:  3rem;     /* 48 */
  --space-9:  4rem;     /* 64 */
  --space-10: 6rem;     /* 96 */

  /* Radius — brand favours generous, capsule-like curvature */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-2xl:  40px;
  --radius-pill: 999px;   /* the signature "stadium" shape */

  /* Elevation — soft, blue-tinted, never harsh */
  --shadow-xs:  0 1px 2px rgba(6, 3, 141, 0.06);
  --shadow-sm:  0 2px 6px rgba(6, 3, 141, 0.08);
  --shadow-md:  0 8px 20px rgba(6, 3, 141, 0.10);
  --shadow-lg:  0 18px 40px rgba(6, 3, 141, 0.14);
  --shadow-brand: 0 12px 30px rgba(0, 97, 240, 0.28);

  /* Borders */
  --border-width: 1.5px;

  /* Layout */
  --container-max: 1200px;    /* @kind spacing */
  --container-narrow: 760px;  /* @kind spacing */
  --gutter: var(--space-5);   /* @kind spacing */

  /* Motion — calm, confident easing; fades over bounces */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);   /* @kind other */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);  /* @kind other */
  --ease-in:       cubic-bezier(0.5, 0, 0.75, 0);  /* @kind other */
  --dur-fast:   140ms;  /* @kind other */
  --dur-base:   240ms;  /* @kind other */
  --dur-slow:   420ms;  /* @kind other */
}

/* ============================================================
   Universidad Barceló — Base element defaults
   Light, optional resets + brand typographic defaults. Scoped
   so they enhance without fighting a consumer's own reset.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--text-strong);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  font-weight: var(--fw-bold);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}
h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-md); letter-spacing: var(--ls-label); text-transform: uppercase; }

p { margin: 0 0 var(--space-4); text-wrap: pretty; }

a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Uppercase eyebrow / label helper the brand uses widely */
.eyebrow {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  font-size: var(--text-sm);
  color: var(--color-primary);
}

::selection { background: var(--barcelo-cyan); color: var(--barcelo-navy); }