/* =========================================================================
   WAYA — Colors & Type
   The single source of truth for brand foundations. Import this anywhere.
   ========================================================================= */

/* ---------- Fonts ----------------------------------------------------- */
/* Both families now loaded from local brand files. */

@font-face {
  font-family: "Space Grotesk";
  src: url("fonts/SpaceGrotesk-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("fonts/SpaceGrotesk-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("fonts/SpaceGrotesk-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("fonts/SpaceGrotesk-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("fonts/SpaceGrotesk-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("fonts/SpaceGrotesk-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("fonts/PlusJakartaSans-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("fonts/PlusJakartaSans-Italic-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("fonts/PlusJakartaSans-ExtraLight.ttf") format("truetype");
  font-weight: 200; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("fonts/PlusJakartaSans-Light.ttf") format("truetype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("fonts/PlusJakartaSans-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("fonts/PlusJakartaSans-Italic.ttf") format("truetype");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("fonts/PlusJakartaSans-Medium.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("fonts/PlusJakartaSans-MediumItalic.ttf") format("truetype");
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("fonts/PlusJakartaSans-SemiBold.ttf") format("truetype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("fonts/PlusJakartaSans-SemiBoldItalic.ttf") format("truetype");
  font-weight: 600; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("fonts/PlusJakartaSans-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("fonts/PlusJakartaSans-BoldItalic.ttf") format("truetype");
  font-weight: 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("fonts/PlusJakartaSans-ExtraBold.ttf") format("truetype");
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("fonts/PlusJakartaSans-ExtraBoldItalic.ttf") format("truetype");
  font-weight: 800; font-style: italic; font-display: swap;
}

:root {
  /* ---------- Brand palette (from Color Palette.pdf) ----------------- */
  --waya-charcoal:        #383F3B;   /* primary brand ink — used for the logo */
  --waya-sage:            #6A9D8A;   /* primary accent — calm, grounded green */
  --waya-mint:            #D3E9E0;   /* sage tint, soft surfaces */
  --waya-rust:            #D16C02;   /* high-energy accent, burnt orange */
  --waya-tan:             #D0AE89;   /* warm neutral, sepia-mountain tone */
  --waya-mustard:         #EAB62F;   /* highlight, signal yellow */

  /* Extended neutrals (derived; harmonised with charcoal) */
  --waya-ink:             #1F2422;   /* deeper than charcoal, body text on light */
  --waya-stone:           #6B6F6C;   /* muted body / secondary text */
  --waya-fog:             #B8BBB6;   /* hairline borders, dividers */
  --waya-paper:           #F4F1EA;   /* warm off-white background */
  --waya-cream:           #FAF7F1;   /* lightest cream surface */
  --waya-white:           #FFFFFF;

  /* Semantic foreground / background */
  --fg-1:                 var(--waya-ink);        /* primary text */
  --fg-2:                 var(--waya-stone);      /* secondary text */
  --fg-3:                 #8E928E;                /* tertiary, captions */
  --fg-on-dark:           var(--waya-cream);      /* text on charcoal/sage */
  --fg-accent:            var(--waya-sage);
  --fg-warning:           var(--waya-rust);
  --fg-highlight:         var(--waya-mustard);

  --bg-1:                 var(--waya-cream);      /* page */
  --bg-2:                 var(--waya-paper);      /* panel */
  --bg-3:                 #ECE7DC;                /* sunk surface */
  --bg-dark:              var(--waya-charcoal);   /* hero / footer */
  --bg-mint:              var(--waya-mint);

  --border-1:             rgba(56, 63, 59, 0.14); /* default hairline */
  --border-2:             rgba(56, 63, 59, 0.28); /* emphasised */
  --border-strong:        var(--waya-charcoal);

  /* ---------- Type scale -------------------------------------------- */
  --font-display:         "Space Grotesk", "Inter Tight", system-ui, -apple-system, sans-serif;
  --font-body:            "Plus Jakarta Sans", "Inter", system-ui, -apple-system, sans-serif;
  --font-mono:            ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;

  /* Sizes — modular, ratio ~1.2 */
  --text-xs:    12px;
  --text-sm:    14px;
  --text-base:  16px;
  --text-md:    18px;
  --text-lg:    22px;
  --text-xl:    28px;
  --text-2xl:   36px;
  --text-3xl:   48px;
  --text-4xl:   64px;
  --text-hero:  84px;

  /* Line heights */
  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.45;
  --lh-loose:   1.7;

  /* Letter spacing — Space Grotesk has tight defaults; nudge tighter on display */
  --ls-display: -0.015em;   /* Display headlines */
  --ls-eyebrow: 0.16em;     /* SMALL CAPS EYEBROW */
  --ls-body:    0;
  --ls-tight:   -0.01em;

  /* Weights */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ---------- Spacing & shape -------------------------------------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-10: 128px;

  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 22px;
  --radius-pill: 999px;

  --shadow-1: 0 1px 2px rgba(31, 36, 34, 0.06), 0 1px 1px rgba(31, 36, 34, 0.04);
  --shadow-2: 0 4px 14px rgba(31, 36, 34, 0.08), 0 1px 2px rgba(31, 36, 34, 0.05);
  --shadow-3: 0 18px 40px rgba(31, 36, 34, 0.14), 0 2px 6px rgba(31, 36, 34, 0.06);
  --shadow-inset: inset 0 0 0 1px rgba(56, 63, 59, 0.10);

  /* Motion */
  --ease-standard:  cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-emphasized: cubic-bezier(0.2, 0.0, 0, 1);
  --dur-fast: 120ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;
}

/* ---------- Semantic typography classes ------------------------------ */

.eyebrow {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: var(--text-xs);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--fg-2);
}

.display {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--fg-1);
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-3xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--fg-1);
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-display);
  color: var(--fg-1);
}

h3, .h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: var(--text-xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-display);
  color: var(--fg-1);
}

h4, .h4 {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--text-lg);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
}

p, .body {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-body);
  color: var(--fg-1);
}

.body-sm {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--text-sm);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}

.caption {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--text-xs);
  line-height: var(--lh-normal);
  letter-spacing: 0.02em;
  color: var(--fg-3);
}

.lead {
  font-family: var(--font-body);
  font-weight: var(--fw-light);
  font-size: var(--text-md);
  line-height: var(--lh-loose);
  color: var(--fg-1);
}

code, kbd, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  letter-spacing: 0;
}