/* =========================================================================
   WORDWAVE — DESIGN TOKENS
   Change fonts and colors ONLY here. Every other file reads from these
   custom properties, so one edit here re-themes the entire site.
   ========================================================================= */

@font-face {
  font-family: "Manrope";
  src: url("../assets/css/fonts/Manrope/static/Manrope-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Fonts ---------- */
  /* Display face: used for headings — carries the brand's personality */
  --ww-font-display: "Manrope", sans-serif;
  /* Body face: used for paragraphs, nav, buttons, forms */
  --ww-font-body: "Manrope", sans-serif;
  /* Utility face: eyebrows, labels, small caps, form hints */
  --ww-font-utility: "Manrope", sans-serif;

  /* ---------- Colors ---------- */
  --ww-color-bg: #FAF8F4;              /* page background — warm paper */
  --ww-color-bg-alt: #F1EDE4;          /* alternate section background */
  --ww-color-ink: #171A33;             /* primary text / deep navy-ink */
  --ww-color-ink-soft: #55597A;        /* secondary text */
  --ww-color-primary: #217a7e;         /* Wordwave indigo — main brand color */
  --ww-color-primary-dark: #024447;    /* deep indigo — dark sections */
  --ww-color-accent: #14B8A6;          /* teal wave accent */
  --ww-color-highlight: #217a7e;       /* coral — buttons / CTA highlight */
  --ww-color-highlight-dark: #1a5a5e;  /* coral hover state */
  --ww-color-surface: #FFFFFF;         /* card surfaces */
  --ww-color-border: rgba(23, 26, 51, 0.10);

  /* Gradients derived from the palette above (kept here so a palette edit
     stays a single source of truth) */
  --ww-gradient-wave: linear-gradient(120deg, var(--ww-color-primary) 0%, var(--ww-color-accent) 100%);
  --ww-gradient-dark: linear-gradient(135deg, var(--ww-color-primary-dark) 0%, #2C1F6B 100%);

  /* ---------- Layout ---------- */
  --ww-section-pad-x: 60px;
  --ww-section-pad-y: 10px;
  --ww-radius-sm: 10px;
  --ww-radius-md: 18px;
  --ww-radius-lg: 28px;
  --ww-shadow-card: 0 20px 45px -20px rgba(23, 26, 51, 0.25);
  --ww-shadow-soft: 0 10px 30px -12px rgba(23, 26, 51, 0.18);
  --ww-transition-base: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}