/* AWA Brand System — Canva-ready tokens
   ──────────────────────────────────────────────────────────
   TYPE — one family, one accent:
   • Outfit (self-hosted) — used for everything.
       600 SemiBold ...... headlines + wordmark
       500 Medium ........ subheadings, labels, CTAs
       400 Regular ....... body copy + captions
   • Lora Italic (self-hosted) — accent, used EXCLUSIVELY for
       "AWA Insight" callouts on client reports. No other use.
   ────────────────────────────────────────────────────────── */

/* ---------- Lora — self-hosted, AWA Insight accent only (variable italic) ---------- */
@font-face { font-family: 'Lora'; font-weight: 400 700; font-style: italic; font-display: swap; src: url('fonts/Lora-Italic-VariableFont_wght.ttf') format('truetype'); }

/* ---------- Outfit — self-hosted brand sans (the whole system) ---------- */
@font-face { font-family: 'Outfit'; font-weight: 100; font-style: normal; font-display: swap; src: url('fonts/Outfit-Thin.ttf') format('truetype'); }
@font-face { font-family: 'Outfit'; font-weight: 200; font-style: normal; font-display: swap; src: url('fonts/Outfit-ExtraLight.ttf') format('truetype'); }
@font-face { font-family: 'Outfit'; font-weight: 300; font-style: normal; font-display: swap; src: url('fonts/Outfit-Light.ttf') format('truetype'); }
@font-face { font-family: 'Outfit'; font-weight: 400; font-style: normal; font-display: swap; src: url('fonts/Outfit-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Outfit'; font-weight: 500; font-style: normal; font-display: swap; src: url('fonts/Outfit-Medium.ttf') format('truetype'); }
@font-face { font-family: 'Outfit'; font-weight: 600; font-style: normal; font-display: swap; src: url('fonts/Outfit-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'Outfit'; font-weight: 700; font-style: normal; font-display: swap; src: url('fonts/Outfit-Bold.ttf') format('truetype'); }
@font-face { font-family: 'Outfit'; font-weight: 800; font-style: normal; font-display: swap; src: url('fonts/Outfit-ExtraBold.ttf') format('truetype'); }
@font-face { font-family: 'Outfit'; font-weight: 900; font-style: normal; font-display: swap; src: url('fonts/Outfit-Black.ttf') format('truetype'); }

:root {
  /* Color */
  --indigo:    #2C3F61;
  --green:     #526B42;
  --cream:     #F7F3EC;
  --cream-2:   #EFE9DD; /* a touch deeper for layered surfaces */
  --dusty:     #6B7A99;
  --espresso:  #2A1F1A;
  --amber:     #C87A54;  /* Warm Amber — accent, sparingly */

  --ink:       #2A1F1A;
  --ink-soft:  rgba(42, 31, 26, 0.62);
  --ink-faint: rgba(42, 31, 26, 0.42);
  --hairline:  rgba(42, 31, 26, 0.18);
  --hairline-strong: rgba(42, 31, 26, 0.35);
  --hairline-indigo: rgba(44, 63, 97, 0.20);

  /* Type families */
  --sans:    'Outfit', 'Helvetica Neue', Arial, sans-serif; /* @kind font */
  /* AWA Insight (reports) only */
  --insight: 'Lora', Georgia, 'Times New Roman', serif; /* @kind font */

  /* Legacy aliases — everything is Outfit now; kept so any older
     var(--serif)/var(--mono) reference still resolves to the brand sans. */
  --serif:   var(--sans); /* @kind font */
  --mono:    var(--sans); /* @kind font */
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--sans);
  color: var(--ink);
  background: #ddd;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Reusable atoms ---------- */

/* Eyebrow / label — Outfit Medium, tracked caps */
.eyebrow {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 500;
}

/* Display / headline — Outfit SemiBold */
.display {
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.05;
  color: var(--indigo);
}

/* AWA Insight — Lora Italic. Reserved for report callouts ONLY. */
.awa-insight {
  font-family: var(--insight);
  font-style: italic;
  font-weight: 500;
  color: var(--indigo);
  letter-spacing: -0.005em;
  line-height: 1.3;
}

.hairline {
  height: 1px;
  background: var(--hairline);
  border: 0;
}

.hairline-ink {
  height: 1px;
  background: var(--ink);
  border: 0;
}

/* Small tracked label */
.mark {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* Blueprint grid background — subtle real-estate plan reference */
.grid-bg {
  background-image:
    linear-gradient(to right, var(--hairline-indigo) 1px, transparent 1px),
    linear-gradient(to bottom, var(--hairline-indigo) 1px, transparent 1px);
  background-size: 48px 48px;
}
.grid-bg-fine {
  background-image:
    linear-gradient(to right, rgba(44, 63, 97, 0.10) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(44, 63, 97, 0.10) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* Striped image placeholder — never fake illustrations */
.img-slot {
  position: relative;
  background:
    repeating-linear-gradient(
      135deg,
      rgba(44, 63, 97, 0.06) 0,
      rgba(44, 63, 97, 0.06) 12px,
      transparent 12px,
      transparent 24px
    ),
    var(--cream-2);
  border: 1px solid var(--hairline);
  display: flex;
  align-items: center;
  justify-content: center;
}
.img-slot::after {
  content: attr(data-label);
  font-family: var(--sans);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-align: center;
  padding: 0 16px;
}

/* Big stat number — Outfit SemiBold, tight */
.stat {
  font-family: var(--sans);
  font-weight: 600;
  color: var(--indigo);
  letter-spacing: -0.02em;
  line-height: 0.9;
}

/* Wordmark — typographic, never fake-logo. Outfit SemiBold, wide tracking. */
.wordmark {
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--indigo);
  font-size: 12px;
}
.wordmark .dot {
  display: inline-block;
  width: 4px;
  height: 4px;
  background: var(--amber);
  border-radius: 50%;
  margin: 0 8px 2px;
  vertical-align: middle;
}