/* ==========================================================================
   Classic City Consulting — Base
   Fonts, reset, typography, layout containers, background/text pairings,
   buttons, and small text utilities. Depends on tokens.css.
   ========================================================================== */

/* --- Fonts (self-hosted) -------------------------------------------------- */

@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/quicksand-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/quicksand-700.woff2') format('woff2');
}

@font-face {
  font-family: 'Cultures Carnival';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/cultures-carnival.woff2') format('woff2');
}

/* --- Minimal reset -------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote,
ul, ol, dl, dd {
  margin: 0;
}

img,
svg {
  max-width: 100%;
  height: auto;
  display: block;
}

/* --- Document ------------------------------------------------------------- */

html {
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--ccc-canvas);
  color: var(--ccc-ink);
  font-family: var(--ccc-font-body);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.6;
}

/* --- Headings — Cultures Carnival is CCC's signature display face --------- */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ccc-font-heading);
  font-weight: 400;
  line-height: 1.15;
}

h1 { font-size: clamp(2.5rem, 2rem + 3vw, 4.5rem); }
h2 { font-size: clamp(1.9rem, 1.6rem + 1.8vw, 3rem); }
h3 { font-size: clamp(1.5rem, 1.35rem + 1vw, 2.1rem); }
h4 { font-size: clamp(1.25rem, 1.15rem + 0.6vw, 1.6rem); }
h5 { font-size: 1.25rem; }
h6 { font-size: 1.05rem; }

/* Oversized display text (bigger than h1 — hero numbers, splash titles) */
.ccc-display {
  font-family: var(--ccc-font-heading);
  font-weight: 400;
  font-size: clamp(3rem, 2rem + 6.7vw, 9rem);
  line-height: 1;
}

/* Flow spacing for long-form content */
p + p {
  margin-top: var(--ccc-space-1);
}

/* --- Links — pixel-block underline ---------------------------------------- */

a {
  color: inherit;
  font-weight: 600;
  text-decoration: none;
  background-image: linear-gradient(to right, var(--ccc-accent) 50%, transparent 50%);
  background-size: 6px 3px;
  background-repeat: repeat-x;
  background-position: 0 100%;
  padding-bottom: 3px;
}

a:hover,
a:focus-visible {
  background-image: linear-gradient(to right, var(--ccc-blue) 50%, transparent 50%);
}

/* Escape hatch for links that shouldn't carry the pixel underline
   (logos, cards-as-links, buttons) */
.ccc-plain-link {
  background-image: none;
  padding-bottom: 0;
}

/* --- Containers ----------------------------------------------------------- */

.ccc-container {
  max-width: var(--ccc-content-width);
  margin-inline: auto;
  padding-inline: var(--ccc-space-2);
}

.ccc-container--wide {
  max-width: var(--ccc-wide-width);
}

/* --- Background helpers (each pairs a background WITH its text color) -----
   The pairing is the point: put one of these on a section or card and the
   body text AND headings inside get the correct contrast color. */

.bg-canvas { background: var(--ccc-canvas); color: var(--ccc-ink); }
.bg-panel  { background: var(--ccc-panel);  color: var(--ccc-ink); }

.bg-ink  { background: var(--ccc-gray-80); color: var(--ccc-gray-10); }
.bg-dark { background: var(--ccc-gray-90); color: var(--ccc-gray-10); }

.bg-accent     { background: var(--ccc-gradient-accent); color: var(--ccc-ink-dark); }
.bg-sage       { background: var(--ccc-sage);            color: var(--ccc-ink-dark); }
.bg-gray-green { background: var(--ccc-gray-green);      color: var(--ccc-ink-dark); }

.bg-blue   { background: var(--ccc-blue);   color: var(--ccc-gray-10); }
.bg-purple { background: var(--ccc-purple); color: var(--ccc-gray-10); }

.bg-gray-30 { background: var(--ccc-gray-30); color: var(--ccc-ink-dark); }
.bg-gray-40 { background: var(--ccc-gray-40); color: var(--ccc-ink-dark); }
.bg-gray-50 { background: var(--ccc-gray-50); color: var(--ccc-ink-dark); }
.bg-gray-60 { background: var(--ccc-gray-60); color: var(--ccc-gray-10); }
.bg-gray-70 { background: var(--ccc-gray-70); color: var(--ccc-gray-10); }
.bg-gray-80 { background: var(--ccc-gray-80); color: var(--ccc-gray-10); }
.bg-gray-90 { background: var(--ccc-gray-90); color: var(--ccc-gray-10); }
.bg-gray-100 { background: var(--ccc-gray-100); color: var(--ccc-gray-10); }

/* Headings inherit the pairing (they'd otherwise fall back to body ink) */
.bg-canvas h1, .bg-canvas h2, .bg-canvas h3, .bg-canvas h4, .bg-canvas h5, .bg-canvas h6,
.bg-panel h1, .bg-panel h2, .bg-panel h3, .bg-panel h4, .bg-panel h5, .bg-panel h6,
.bg-ink h1, .bg-ink h2, .bg-ink h3, .bg-ink h4, .bg-ink h5, .bg-ink h6,
.bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark h4, .bg-dark h5, .bg-dark h6,
.bg-accent h1, .bg-accent h2, .bg-accent h3, .bg-accent h4, .bg-accent h5, .bg-accent h6,
.bg-sage h1, .bg-sage h2, .bg-sage h3, .bg-sage h4, .bg-sage h5, .bg-sage h6,
.bg-gray-green h1, .bg-gray-green h2, .bg-gray-green h3, .bg-gray-green h4, .bg-gray-green h5, .bg-gray-green h6,
.bg-blue h1, .bg-blue h2, .bg-blue h3, .bg-blue h4, .bg-blue h5, .bg-blue h6,
.bg-purple h1, .bg-purple h2, .bg-purple h3, .bg-purple h4, .bg-purple h5, .bg-purple h6,
.bg-gray-30 h1, .bg-gray-30 h2, .bg-gray-30 h3, .bg-gray-30 h4, .bg-gray-30 h5, .bg-gray-30 h6,
.bg-gray-40 h1, .bg-gray-40 h2, .bg-gray-40 h3, .bg-gray-40 h4, .bg-gray-40 h5, .bg-gray-40 h6,
.bg-gray-50 h1, .bg-gray-50 h2, .bg-gray-50 h3, .bg-gray-50 h4, .bg-gray-50 h5, .bg-gray-50 h6,
.bg-gray-60 h1, .bg-gray-60 h2, .bg-gray-60 h3, .bg-gray-60 h4, .bg-gray-60 h5, .bg-gray-60 h6,
.bg-gray-70 h1, .bg-gray-70 h2, .bg-gray-70 h3, .bg-gray-70 h4, .bg-gray-70 h5, .bg-gray-70 h6,
.bg-gray-80 h1, .bg-gray-80 h2, .bg-gray-80 h3, .bg-gray-80 h4, .bg-gray-80 h5, .bg-gray-80 h6,
.bg-gray-90 h1, .bg-gray-90 h2, .bg-gray-90 h3, .bg-gray-90 h4, .bg-gray-90 h5, .bg-gray-90 h6,
.bg-gray-100 h1, .bg-gray-100 h2, .bg-gray-100 h3, .bg-gray-100 h4, .bg-gray-100 h5, .bg-gray-100 h6 {
  color: inherit;
}

/* --- Text utilities ------------------------------------------------------- */

.text-soft   { color: var(--ccc-ink-soft); }
.text-accent { color: var(--ccc-accent); }
.text-center { text-align: center; }

/* Small uppercase kicker line above headings */
.eyebrow {
  display: block;
  font-family: var(--ccc-font-body);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ccc-accent);
  margin-bottom: 0.5rem;
}

/* --- Buttons -------------------------------------------------------------- */

.ccc-btn {
  display: inline-block;
  font-family: var(--ccc-font-body);
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: inherit;
  background: var(--ccc-panel);
  padding: 1rem 1.5rem;
  border: var(--ccc-border-width) solid var(--ccc-line);
  border-radius: var(--ccc-radius);
  box-shadow: inset -5px -5px 0 rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease;
  /* neutralize link underline styles when .ccc-btn is an <a> */
  background-image: none;
  padding-bottom: 1rem;
}

.ccc-btn:hover,
.ccc-btn:focus-visible {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.25);
  background-image: none;
}

.ccc-btn:active {
  transform: translate(1px, 1px);
  box-shadow: none;
}

.ccc-btn--accent {
  background: var(--ccc-gradient-accent);
  color: var(--ccc-ink-dark);
  box-shadow: inset -5px -5px 0 rgba(0, 0, 0, 0.2);
}

.ccc-btn--accent:hover,
.ccc-btn--accent:focus-visible {
  background: var(--ccc-gradient-accent);
}