/* Pebble Brand — entry stylesheet.
   Every rendered design receives this file's @import closure, so everything
   the design system offers is reachable from here. */

@import "./tokens/tokens.css";
@import "./fonts/fonts.css";

/* ── Base ──────────────────────────────────────────────────────────
   Inter is the workhorse. All Round Gothic is NEVER the base font —
   it is applied only via .pebble-wordmark / .pebble-accent-font.        */
:root { color-scheme: light; }

body {
  font-family: var(--pebble-font-body);
  background: var(--pebble-surface);
  color: var(--pebble-text);
  line-height: var(--pebble-leading-normal);
  font-size: var(--pebble-text-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Surfaces ── */
.pebble-surface      { background: var(--pebble-surface);      color: var(--pebble-text); }
.pebble-surface-dark { background: var(--pebble-surface-dark); color: var(--pebble-text-on-dark); }

/* ── Typography ── */
.pebble-heading {
  font-family: var(--pebble-font-body);
  font-weight: var(--pebble-weight-semibold);
  color: var(--pebble-text);
  line-height: var(--pebble-leading-tight);
  letter-spacing: var(--pebble-tracking-tight);
}
.pebble-body {
  font-family: var(--pebble-font-body);
  color: var(--pebble-text-body);
  line-height: var(--pebble-leading-normal);
}

/* Accent font — hero words & short titles ONLY. Never body copy or captions. */
.pebble-accent-font {
  font-family: var(--pebble-font-accent);
  letter-spacing: var(--pebble-tracking-tight);
}

/* The wordmark: always lowercase "pebble", All Round Gothic, Orange.
   Orange-on-light fails WCAG AA but is exempt (WCAG 1.4.11 — logos/brand names). */
.pebble-wordmark {
  font-family: var(--pebble-font-accent);
  font-weight: var(--pebble-weight-bold);
  color: var(--pebble-accent);
  text-transform: lowercase;
  letter-spacing: var(--pebble-tracking-tight);
}

/* ── Text colour helpers ── */
.pebble-text-blue   { color: var(--pebble-blue); }
.pebble-text-brown  { color: var(--pebble-brown); }
.pebble-text-orange { color: var(--pebble-orange); }
.pebble-text-teal   { color: var(--pebble-teal); }

/* ── CTAs ──────────────────────────────────────────────────────────
   Primary: Orange surface + Blue text (5.32:1, AA pass). No bare CTAs. */
.pebble-cta {
  display: inline-block;
  font-family: var(--pebble-font-body);
  font-weight: var(--pebble-weight-semibold);
  background: var(--pebble-accent);
  color: var(--pebble-blue);
  padding: var(--pebble-space-3) var(--pebble-space-6);
  border-radius: var(--pebble-radius);
  text-decoration: none;
}
/* Secondary: outline on light. */
.pebble-cta-secondary {
  display: inline-block;
  font-family: var(--pebble-font-body);
  font-weight: var(--pebble-weight-medium);
  background: transparent;
  color: var(--pebble-blue);
  border: 1.5px solid var(--pebble-blue);
  padding: var(--pebble-space-3) var(--pebble-space-6);
  border-radius: var(--pebble-radius);
  text-decoration: none;
}