/* =========================================================================
   Rotorua Business Chamber — Colors & Type
   The single source of truth for tokens. Components compose from these.
   ========================================================================= */

/* ---- Fonts ------------------------------------------------------------- */
/* Body/UI: Manrope (variable, self-hosted in fonts/) — supplied by brand.
   Display: DM Serif Display is a substitute for the (unprovided) custom
   wordmark serif. Swap when the real display font lands. */
@font-face {
  font-family: "Manrope";
  src: url("fonts/Manrope-VariableFont_wght.ttf") format("truetype-variations"),
       url("fonts/Manrope-VariableFont_wght.ttf") format("truetype");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&display=swap');

:root {
  /* ---- Primary palette -------------------------------------------------- */
  --rc-deep-teal:   #26424E;   /* P1 — body text, primary surfaces, wordmark */
  --rc-lake-blue:   #477C95;   /* P2 — links, secondary surfaces, mid stripe */
  --rc-bush-green:  #808B53;   /* P3 — tags, status, supporting */
  --rc-olive:       #6F6B3E;   /* P4 — editorial accents */
  --rc-pumice:      #D2CCBD;   /* P5 — soft surfaces, dividers */
  --rc-ink:         #1A1919;   /* N1 — hard contrast black */
  --rc-cream:       #F3EEE6;   /* N2 — page background */

  /* ---- Secondary tints (30% tints of primaries) ------------------------- */
  --rc-cool-gray:   #AFB4BB;
  --rc-sky:         #C7D2DC;
  --rc-sage:        #C9CBB2;
  --rc-khaki:       #BEB9A3;
  --rc-paper:       #F1EFEB;

  /* ---- Feature ---------------------------------------------------------- */
  --rc-coral:       #E04E4E;   /* F1 — sparing CTAs, urgent moments */

  /* ---- Semantic surface tokens ----------------------------------------- */
  --bg:             var(--rc-cream);
  --bg-elevated:    #FFFFFF;            /* inset cards, inputs */
  --bg-deep:        var(--rc-deep-teal);
  --bg-paper:       var(--rc-paper);
  --surface-pumice: var(--rc-pumice);

  /* Foreground */
  --fg:             var(--rc-deep-teal);       /* default text */
  --fg-strong:      var(--rc-ink);             /* extra contrast */
  --fg-muted:       rgba(26, 25, 25, 0.62);
  --fg-subtle:      rgba(26, 25, 25, 0.42);
  --fg-on-deep:     var(--rc-cream);           /* text on Deep Teal */
  --fg-on-deep-muted: rgba(243, 238, 230, 0.72);

  /* Lines */
  --line:           rgba(26, 25, 25, 0.10);
  --line-strong:    rgba(26, 25, 25, 0.20);
  --line-on-deep:   rgba(243, 238, 230, 0.12);

  /* Accents */
  --accent:         var(--rc-coral);
  --link:           var(--rc-lake-blue);
  --link-hover:     var(--rc-deep-teal);

  /* ---- Type ------------------------------------------------------------- */
  --font-display:   "DM Serif Display", "Recoleta", "Times New Roman", serif;
  --font-body:      "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:      ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, monospace;

  /* Sizes (clamped for fluid scaling on hero/page headings) */
  --fs-display:     clamp(2.75rem, 1.6rem + 4.5vw, 5.5rem);   /* hero */
  --fs-h1:          clamp(2.25rem, 1.3rem + 3vw, 3.5rem);
  --fs-h2:          clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
  --fs-h3:          1.5rem;
  --fs-h4:          1.25rem;
  --fs-lead:        1.125rem;
  --fs-body:        1rem;
  --fs-small:       0.875rem;
  --fs-xs:          0.75rem;
  --fs-eyebrow:     0.75rem;

  --lh-tight:       1.05;
  --lh-display:     1.1;
  --lh-heading:     1.2;
  --lh-body:        1.55;
  --lh-loose:       1.7;

  --tracking-eyebrow: 0.14em;
  --tracking-caps:    0.06em;
  --tracking-tight:  -0.01em;

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

  /* ---- Radii ------------------------------------------------------------ */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* ---- Shadows (tint toward Deep Teal, not black) ---------------------- */
  --shadow-sm: 0 1px 2px rgba(38, 66, 78, 0.06), 0 1px 3px rgba(38, 66, 78, 0.08);
  --shadow-md: 0 4px 16px rgba(38, 66, 78, 0.10), 0 1px 3px rgba(38, 66, 78, 0.06);
  --shadow-lg: 0 16px 40px rgba(38, 66, 78, 0.14), 0 4px 12px rgba(38, 66, 78, 0.08);

  /* ---- Motion ----------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 120ms;
  --dur: 200ms;
  --dur-slow: 350ms;
}

/* =========================================================================
   Semantic type classes — apply these directly to elements
   ========================================================================= */

html { font-family: var(--font-body); color: var(--fg); background: var(--bg); }
body { font-family: var(--font-body); color: var(--fg); background: var(--bg); margin: 0; -webkit-font-smoothing: antialiased; }

.rc-display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}

.rc-h1, h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  margin: 0 0 var(--s-5);
}

.rc-h2, h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  margin: 0 0 var(--s-4);
}

.rc-h3, h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
  color: var(--fg);
  margin: 0 0 var(--s-3);
}

.rc-h4, h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-h4);
  line-height: var(--lh-heading);
  color: var(--fg);
  margin: 0 0 var(--s-3);
}

.rc-eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--rc-lake-blue);
}

.rc-lead, .rc-lede {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-lead);
  line-height: var(--lh-loose);
  color: var(--fg-muted);
}

.rc-body, p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg);
  margin: 0 0 var(--s-4);
}

.rc-small {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--fg-muted);
}

.rc-caps {
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.rc-wordmark-bar {
  /* Matches "BUSINESS CHAMBER" bar under the logo wordmark */
  font-family: var(--font-body);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

a {
  color: var(--link);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--link) 60%, transparent);
  text-underline-offset: 3px;
  transition: color var(--dur) var(--ease), text-decoration-color var(--dur) var(--ease);
}

a:hover {
  color: var(--link-hover);
  text-decoration-color: var(--link-hover);
}

::selection {
  background: color-mix(in srgb, var(--rc-lake-blue) 28%, transparent);
  color: var(--rc-deep-teal);
}