/* ============================================================
   EuroCollege — Colors & Type foundations
   Extracted from the eurocollege.nl Sage/Tailwind theme
   (tailwind.config.js + theme.json + resources/styles)
   ------------------------------------------------------------
   Import this file, then use the CSS variables below. Two
   layers are provided:
     1. BASE TOKENS   — raw palette + type scale (--blue-900, --fs-5xl …)
     2. SEMANTIC ROLES — meaning-based aliases (--fg, --bg, --accent …)
   ============================================================ */

/* ---------- FONT FACES ---------- */
@font-face {
  font-family: "Baskervville";
  font-weight: normal;
  font-style: normal;
  src: url("fonts/baskervville-v16-latin-regular.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "DIN-2014";
  font-weight: normal;
  font-style: normal;
  src:
    url("fonts/DIN-2014-Regular.woff2") format("woff2"),
    url("fonts/DIN-2014-Regular.woff") format("woff");
  font-display: swap;
}
@font-face {
  font-family: "DIN-2014";
  font-weight: bold;
  font-style: normal;
  src:
    url("fonts/DIN-2014-Bold.woff2") format("woff2"),
    url("fonts/DIN-2014-Bold.woff") format("woff");
  font-display: swap;
}

:root {
  /* ====================================================
     1. BASE COLOR TOKENS
     ==================================================== */

  /* Neutrals */
  --black: #000000;
  --grey-700: #aaaaaa;
  --white-700: #f8f8f896; /* ~59% white, used for translucent fills */
  --white-900: #ffffff;
  --cream: #f8efdb;       /* logo "wing" colour — warm off-white */

  /* Blue — the spine of the brand. 900/925/950 are the deep
     navies used for headings, header bar and footer. */
  --blue-50:  #eef0f3;
  --blue-100: #e6e8eb;
  --blue-200: #b3bbc6;
  --blue-300: #768dae;   /* muted slate — eyebrow/subtitle text */
  --blue-800: #35547d;   /* default body text colour */
  --blue-900: #132d52;   /* primary navy — headings, shadows tint */
  --blue-925: #001f4a;   /* deeper navy — heading ink */
  --blue-950: #0c0030;   /* near-black indigo — header & footer bg */

  /* Hero canvas — the saturated indigo behind the photo heroes */
  --hero-indigo: #2b2aa1;

  /* Accent — orange is the single call-to-action colour */
  --orange-500: #e55024;  /* primary accent / buttons */
  --orange-800: #bb3f1a;  /* accent hover (darker) */

  /* Alerts */
  --red-500: #d10808;

  /* Educations — per-programme accent colours. Used as small
     identity dabs on programme pages; NOT general UI colours. */
  --edu-orange:       #f36d21;
  --edu-dark-red:     #9c0000;
  --edu-light-blue:   #00aeef;
  --edu-blue:         #003c80;
  --edu-pink:         #f7a0a8;
  --edu-light-purple: #866aa5;
  --edu-purple:       #554089;
  --edu-green:        #75a540;
  --edu-yellow:       #fedf00;

  /* ====================================================
     2. TYPE SCALE  (fluid clamp, 400px → 1280px viewport)
     ==================================================== */
  --font-sans: "DIN-2014", ui-sans-serif, system-ui, sans-serif;
  --font-serif: "Baskervville", ui-serif, Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --fw-regular: 400; /* @kind font */
  --fw-bold: 700; /* @kind font */

  --fs-xs:   0.75rem;    /* @kind spacing */ /* 12px */
  --fs-xsm:  0.8125rem;  /* @kind spacing */ /* 13px */
  --fs-sm:   0.875rem;   /* @kind spacing */ /* 14px */
  --fs-base: clamp(0.9375rem, 0.9091rem + 0.1136vw, 1rem);   /* @kind spacing */ /* 15→16px */
  --fs-lg:   clamp(1rem, 0.9432rem + 0.2273vw, 1.125rem);    /* @kind spacing */ /* 16→18px */
  --fs-xl:   clamp(1.125rem, 1.0682rem + 0.2273vw, 1.25rem); /* @kind spacing */ /* 18→20px */
  --fs-xxl:  clamp(1.25rem, 1.2216rem + 0.1136vw, 1.3125rem);/* @kind spacing */ /* 20→21px */
  --fs-2xl:  clamp(1.25rem, 1.1364rem + 0.4545vw, 1.5rem);   /* @kind spacing */ /* 20→24px */
  --fs-3xl:  clamp(1.5rem, 1.3864rem + 0.4545vw, 1.75rem);   /* @kind spacing */ /* 24→28px */
  --fs-4xl:  clamp(1.6875rem, 1.4886rem + 0.7955vw, 2.125rem);/* @kind spacing */ /* 27→34px */
  --fs-5xl:  clamp(2rem, 1.5455rem + 1.8182vw, 3rem);        /* @kind spacing */ /* 32→48px */
  --fs-6xl:  clamp(2.125rem, 1.6989rem + 1.7045vw, 3.0625rem);/* @kind spacing */ /* 34→49px */
  --fs-7xl:  clamp(2.3125rem, 1.8295rem + 1.9318vw, 3.375rem);/* @kind spacing */ /* 37→54px */
  --fs-8xl:  clamp(2.625rem, 1.7727rem + 3.4091vw, 4.5rem);  /* @kind spacing */ /* 42→72px */

  /* ====================================================
     3. RADII, SHADOWS, LAYOUT
     ==================================================== */
  --radius-sm: 5px;    /* the brand radius — buttons, cards, inputs */
  --radius-md: 6px;    /* news/media thumbnails (rounded-md) */
  --radius-full: 9999px;

  /* All shadows are a soft, low-opacity navy (#132d52 @ ~6%) */
  --shadow-card-sm: 0px 5px 10px 0px #132d520f;
  --shadow-card-md: 0px 0px 30px 0px #132d520f;
  --shadow-card-lg: 0px 20px 30px 0px #132d520f;
  --shadow-input:   0px 20px 30px 0px #132d520f;
  /* Accent focus ring used on buttons/controls */
  --ring-accent: 0px 0px 0px 3px #e5502420;

  --container-max: 1149px;  /* .inner_wrapper */
  --container-content: 760px; /* reading width */

  /* ====================================================
     4. SEMANTIC ROLES
     ==================================================== */
  --fg:        var(--blue-800);   /* default body text */
  --fg-strong: var(--blue-925);   /* headings */
  --fg-muted:  var(--blue-300);   /* eyebrows, meta, captions */
  --fg-invert: var(--white-900);  /* text on dark/photo */

  --bg:        var(--white-900);
  --bg-subtle: var(--blue-50);    /* tinted panels, dropdowns */
  --bg-dark:   var(--blue-950);   /* header / footer */
  --bg-hero:   var(--hero-indigo);

  --accent:        var(--orange-500);
  --accent-hover:  var(--orange-800);
  --border:        var(--blue-200);
  --border-strong: var(--blue-300);
  --rule:          var(--blue-200); /* the short 80px heading underline */
}

/* ============================================================
   SEMANTIC ELEMENT DEFAULTS
   Apply these to get on-brand typography without utilities.
   ============================================================ */
.ec-body {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-base);
  line-height: 1.625;
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
}

.ec-h1 { font-family: var(--font-sans); font-weight: var(--fw-bold); font-size: var(--fs-8xl); line-height: 1; color: var(--fg-strong); }
.ec-h2 { font-family: var(--font-sans); font-weight: var(--fw-bold); font-size: var(--fs-5xl); line-height: 1; color: var(--fg-strong); }
.ec-h3 { font-family: var(--font-sans); font-weight: var(--fw-bold); font-size: var(--fs-2xl); line-height: 1.1; color: var(--fg-strong); }
.ec-display { font-family: var(--font-sans); font-weight: var(--fw-bold); font-size: var(--fs-8xl); line-height: 1; color: var(--fg-strong); }

/* Eyebrow / subtitle that sits above section headings */
.ec-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-xxl);
  text-transform: uppercase;
  color: var(--fg-muted);
  margin: 0;
}

/* Serif pull-quote / review quote */
.ec-quote {
  font-family: var(--font-serif);
  font-size: var(--fs-6xl);
  letter-spacing: -1px;
  line-height: 1.05;
  color: var(--fg-strong);
}

.ec-link {
  color: var(--accent);
  text-decoration: underline;
  transition: all 0.2s ease;
}
.ec-link:hover { color: var(--accent-hover); text-decoration: none; }

.ec-meta { font-size: var(--fs-sm); color: var(--fg-muted); }