/* =========================================================================
   Colegio El Pilar Valladolid — Colors & Type
   Marianist Catholic school, ages 1–18. Brand built on a stylized "M/house"
   silhouette in three colors: green, deep-teal, blue.
   ========================================================================= */

/* ---------- Webfonts (provided by the brand) -------------------------- */

@font-face {
  font-family: "LemonMilk";
  src: url("fonts/LEMONMILK-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "LemonMilk";
  src: url("fonts/LEMONMILK-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "LemonMilk";
  src: url("fonts/LEMONMILK-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Interstate";
  src: url("fonts/Interstate.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DIN Alternate";
  src: url("fonts/DIN-BlackAlternate.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* Open Sans fallback for body — matches the wordmark's humanist sans
   look on the live elpilarvalladolid.es site. */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&display=swap");
/* Caveat is the closest Google match for the "Marianistas" brush script.
   Flagged to user — please confirm or share the source script font. */
@import url("https://fonts.googleapis.com/css2?family=Caveat:wght@500;600;700&display=swap");

:root {
  /* ---------- Brand color palette (logo-derived) ---------------------- */
  --brand-green:        #4AB15C;  /* left wing of the M / Marianistas green */
  --brand-teal:         #007C58;  /* center house / deep green */
  --brand-blue:         #0086CD;  /* right wing of the M */
  --brand-blue-deep:    #005DA6;  /* SOMOS wordmark blue, darker variant   */
  --brand-green-leaf:   #4FAC53;  /* SOMOS Marianistas script green        */

  /* Tints (use sparingly for backgrounds, cards, fills) */
  --green-50:  #EAF6EC;
  --green-100: #C9E8CE;
  --green-200: #95D29F;
  --green-500: #4AB15C;
  --green-700: #2E7E3D;
  --green-900: #1C4E25;

  --teal-50:   #E4F2EC;
  --teal-100:  #B5DEC9;
  --teal-200:  #6FBE9C;
  --teal-500:  #007C58;
  --teal-700:  #005A3F;
  --teal-900:  #00382A;

  --blue-50:   #E5F2FA;
  --blue-100:  #B8DDF1;
  --blue-200:  #6BBCE3;
  --blue-500:  #0086CD;
  --blue-700:  #005DA6;
  --blue-900:  #003A6A;

  /* ---------- Neutrals --------------------------------------------------- */
  --ink:        #111418;  /* primary text — near-black */
  --ink-2:      #2A2F36;  /* secondary text */
  --ink-3:      #5A6470;  /* tertiary / meta */
  --ink-4:      #8A95A1;  /* placeholder, disabled */
  --line:       #E3E6EA;  /* hairline borders */
  --line-2:     #C9CFD6;
  --surface:    #FFFFFF;
  --surface-2:  #F5F7F9;  /* page-level wash */
  --surface-3:  #ECEFF2;  /* card on wash */
  --paper:      #FAF8F4;  /* warm paper, used on print/devotional pages */

  /* ---------- Semantic ---------------------------------------------------- */
  --fg:         var(--ink);
  --fg-muted:   var(--ink-3);
  --fg-on-dark: #FFFFFF;
  --bg:         var(--surface);
  --bg-muted:   var(--surface-2);
  --bg-inverse: #0B1620;     /* deep navy used as inverse surface       */

  --primary:        var(--brand-blue);
  --primary-hover:  var(--brand-blue-deep);
  --primary-press:  #00477F;
  --accent:         var(--brand-green);
  --accent-2:       var(--brand-teal);

  --success: #1F8A3A;
  --warning: #C77A00;
  --danger:  #C0392B;
  --info:    var(--brand-blue);

  --focus-ring: 0 0 0 3px rgba(0, 134, 205, 0.35);

  /* ---------- Type families --------------------------------------------- */
  /* Display: heavy, monolinear sans — used for the "SOMOS" lockup heads and
     "NUESTRA SEÑORA DEL PILAR" wordmark. Brand prefers LemonMilk Bold (heaviest
     available) for this slot; DIN Black Alternate stays as a fallback. */
  --font-display: "LemonMilk", "DIN Alternate", "Open Sans", system-ui, sans-serif;

  /* Headline: bold geometric sans — used for section headings, news titles.
     Brand chooses LemonMilk for this slot. Interstate stays as a humanist fallback. */
  --font-headline: "LemonMilk", "Interstate", "Open Sans", system-ui, sans-serif;

  /* Body: clean neo-grotesque sans. Brand chooses Helvetica. */
  --font-body: Helvetica, "Helvetica Neue", Arial, "Open Sans", system-ui, -apple-system, sans-serif;

  /* Script: warm brush, used for "Marianistas" sign-off / accent words.
     Use sparingly — never for body copy. */
  --font-script: "Caveat", "Brush Script MT", cursive;

  /* Mono: occasional code/forms; not part of the brand. */
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  /* ---------- Type scale (modular, 1.25) ------------------------------- */
  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-30: 1.875rem;
  --fs-36: 2.25rem;
  --fs-48: 3rem;
  --fs-64: 4rem;
  --fs-80: 5rem;

  /* ---------- Spacing (4px base) --------------------------------------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* ---------- Radius --------------------------------------------------- */
  --r-0: 0;
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* ---------- Elevation ------------------------------------------------ */
  --shadow-1: 0 1px 2px rgba(17, 20, 24, 0.06), 0 1px 1px rgba(17, 20, 24, 0.04);
  --shadow-2: 0 4px 12px rgba(17, 20, 24, 0.08), 0 2px 4px rgba(17, 20, 24, 0.04);
  --shadow-3: 0 12px 32px rgba(17, 20, 24, 0.12), 0 4px 8px rgba(17, 20, 24, 0.06);
  --shadow-photo: 0 2px 6px rgba(0, 60, 100, 0.08);

  /* ---------- Motion --------------------------------------------------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;
}

/* =========================================================================
   Semantic element styles
   ========================================================================= */

html, body {
  font-family: var(--font-body);
  color: var(--fg);
  background: var(--bg);
  font-size: var(--fs-16);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display — uppercase, condensed, tight, NEVER italic.
   Mirrors the "NUESTRA SEÑORA DEL PILAR" lockup. */
.display, .h-display {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.5rem, 6vw, 5rem);
  line-height: 0.95;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--ink);
  text-wrap: balance;
}

h1, .h1 {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: var(--fs-48);
  line-height: 1.08;
  letter-spacing: -0.005em;
  color: var(--ink);
  text-wrap: balance;
}
h2, .h2 {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: var(--fs-36);
  line-height: 1.12;
  letter-spacing: -0.005em;
  color: var(--ink);
  text-wrap: balance;
}
h3, .h3 {
  font-family: var(--font-headline);
  font-weight: 500;
  font-size: var(--fs-24);
  line-height: 1.22;
  color: var(--ink);
}
h4, .h4 {
  font-family: var(--font-headline);
  font-weight: 500;
  font-size: var(--fs-20);
  line-height: 1.3;
  color: var(--ink);
}

/* Eyebrow / kicker — small caps over a section title. Often blue or teal. */
.eyebrow {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: var(--fs-12);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-blue);
}

p, .p {
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: 1.65;
  color: var(--ink-2);
  text-wrap: pretty;
}
.lead {
  font-size: var(--fs-20);
  line-height: 1.55;
  color: var(--ink-2);
  font-weight: 400;
}
small, .meta {
  font-size: var(--fs-14);
  color: var(--ink-3);
}

/* Script accent word — for ONE word at a time, never a sentence. */
.script {
  font-family: var(--font-script);
  font-weight: 700;
  color: var(--brand-green);
  font-size: 1.4em;
  line-height: 0.9;
}

a {
  color: var(--brand-blue);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--brand-blue-deep); text-decoration: underline; }

::selection { background: var(--brand-green); color: #fff; }