/* LKE Institute — shared design tokens (v2).
   The SAME file is loaded by the OJS child theme, so both sites stay in sync.
   Change colours, fonts and radii here only; components reference these variables. */

/* Self-hosted variable fonts (SIL Open Font License, see assets/fonts/). */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-var-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('../fonts/source-serif-4-var-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url('../fonts/source-serif-4-var-latin-italic.woff2') format('woff2');
}

:root {
  /* Brand */
  --brand-primary:   #17345A; /* navy: headings, primary buttons */
  --brand-ink:       #0E2240; /* deep navy: hero, footer, eco bar */
  --brand-secondary: #0F766E; /* teal: links, secondary actions, open badges */
  --brand-accent:    #D9A13B; /* warm gold: highlights on dark, countdown, CFP */
  --accent-ink:      #8A5A0B; /* gold for text on light backgrounds (AA) */
  --accent-soft:     #FBF3E2;
  --teal-soft:       #E3F1EF;
  --brand-shopee:    #EE4D2D; /* Shopee button only */
  --brand-wa:        #128C4B; /* WhatsApp button only */

  /* Neutrals (warm, paper-like) */
  --text:       #1C2433;
  --text-muted: #5B6474;
  --surface:    #F7F5F0;
  --surface-2:  #EFEBE3;
  --border:     #E6E1D6;
  --white:      #FFFFFF;

  /* Type */
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-head: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --fs-display: clamp(2.4rem, 1.5rem + 3.6vw, 4.1rem);
  --fs-h1: clamp(2.1rem, 1.5rem + 2.4vw, 3.1rem);
  --fs-h2: clamp(1.75rem, 1.35rem + 1.5vw, 2.45rem);
  --fs-h3: clamp(1.15rem, 1.05rem + .4vw, 1.35rem);
  --fs-lead: clamp(1.06rem, 1rem + .3vw, 1.2rem);
  --fs-small: .875rem;

  /* Shape and depth */
  --radius:    10px;
  --radius-lg: 18px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(14, 34, 64, .06), 0 1px 1px rgba(14, 34, 64, .04);
  --shadow-md: 0 10px 30px -12px rgba(14, 34, 64, .18), 0 2px 6px rgba(14, 34, 64, .05);
  --shadow-lg: 0 28px 60px -24px rgba(14, 34, 64, .35);
  --ease: cubic-bezier(.2, .7, .2, 1);

  /* Layout */
  --wrap: 1200px;
  --header-h: 76px;
  --space-1: 8px;  --space-2: 16px; --space-3: 24px;
  --space-4: 32px; --space-6: 48px; --space-8: 64px; --space-12: 96px;
  --section-y: clamp(56px, 4rem + 3vw, 104px);
}
@media (max-width: 767px) {
  :root { --header-h: 64px; }
}

/* Ecosystem bar: identical markup on WordPress and OJS */
.eco-bar { background: var(--brand-ink); color: rgba(255,255,255,.82); font: 500 13px/38px var(--font-body); letter-spacing: .01em; }
.eco-bar a { color: rgba(255,255,255,.82); text-decoration: none; transition: color .2s; }
.eco-bar a:hover, .eco-bar a:focus-visible { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }