/* =========================================================================
   ASPIRE FC — Design tokens & base styles
   Brand placeholders: colors & fonts are CSS variables so the Tweaks panel
   can re-skin the whole site to match the official brand guide in one move.
   ========================================================================= */

:root {
  /* --- Color system (official AFC brand: black + gold) --- */
  --ink:        #1F1D1D;   /* brand dark gray — primary dark surface */
  --ink-2:      #2A2727;   /* raised dark surface */
  --ink-3:      #423E3D;   /* hairlines on dark */
  --black:      #000000;   /* pure black */
  --paper:      #FCFBFA;   /* warm page white */
  --paper-2:    #F3F1ED;   /* warm light section */
  --paper-3:    #E4DFD8;   /* warm borders on light */
  --muted:      #6E6A66;   /* warm secondary text on light */
  --muted-dim:  #A6A6A6;   /* brand grey — muted text on dark */

  /* Accent (TWEAKABLE — default brand gold #CBA379). */
  --accent:     #CBA379;
  --accent-ink: #8C6D43;   /* deeper bronze for accent text on light */
  --accent-fg:  #1A1818;   /* near-black text on gold */

  /* --- Type (TWEAKABLE — brand: Anton + Montserrat) --- */
  --font-display: 'Anton', 'Arial Narrow', sans-serif;
  --font-head:    'Montserrat', system-ui, sans-serif;
  --font-body:    'Montserrat', system-ui, sans-serif;

  /* --- Geometry --- */
  --maxw: 1280px;
  --gut: clamp(20px, 5vw, 72px);
  --radius: 5px;
  --nav-h: 76px;

  --shadow-sm: 0 1px 2px rgba(20,16,12,.06), 0 1px 3px rgba(20,16,12,.05);
  --shadow-md: 0 10px 30px -12px rgba(20,16,12,.28);
  --shadow-lg: 0 30px 60px -20px rgba(20,16,12,.45);
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.55;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
ul { list-style: none; }

::selection { background: var(--accent); color: var(--accent-fg); }

/* --- Typographic primitives --- */
.display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.0;
  letter-spacing: -0.005em;
  text-transform: uppercase;
}
.head {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.02;
  text-transform: uppercase;
  letter-spacing: 0.005em;
}
.eyebrow {
  font-family: var(--font-head);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 13px;
}

/* --- Layout helpers --- */
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }
.section { padding-block: clamp(64px, 9vw, 130px); }
.stack { display: flex; flex-direction: column; }

/* --- Buttons --- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-head); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; font-size: 15px; line-height: 1;
  padding: 16px 26px; border-radius: var(--radius);
  transition: transform .15s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn--accent { background: var(--accent); color: var(--accent-fg); }
.btn--accent:hover { box-shadow: 0 12px 24px -10px var(--accent); transform: translateY(-2px); }
.btn--ink { background: var(--ink); color: var(--paper); }
.btn--ink:hover { background: var(--ink-2); transform: translateY(-2px); }
.btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--paper-3); }
.btn--ghost:hover { box-shadow: inset 0 0 0 2px var(--ink); }
.btn--on-dark { background: rgba(255,255,255,.08); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.25); backdrop-filter: blur(6px); }
.btn--on-dark:hover { background: rgba(255,255,255,.16); }
.btn .arrow { transition: transform .2s ease; }
.btn:hover .arrow { transform: translateX(4px); }
.btn--lg { padding: 19px 32px; font-size: 16px; }

/* --- Placeholder imagery (striped, with mono label) --- */
.ph {
  position: relative; overflow: hidden;
  background-color: var(--ink-2);
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(255,255,255,.045) 0 2px,
    transparent 2px 11px
  );
  display: grid; place-items: center;
}
.ph::after {
  content: attr(data-label);
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(255,255,255,.5);
  padding: 6px 10px; border: 1px solid rgba(255,255,255,.18); border-radius: 3px;
  text-align: center; max-width: 80%;
}
.ph--light { background-color: var(--paper-3); }
.ph--light::after { color: var(--muted); border-color: rgba(0,0,0,.14); }

/* --- Crest placeholder --- */
.crest {
  display: grid; place-items: center; flex: none;
  background: var(--accent); color: var(--accent-fg);
  font-family: var(--font-display); border-radius: 3px;
  aspect-ratio: 1; line-height: 1; user-select: none;
}

/* --- Pills / tags --- */
.tag {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-head); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.1em; font-size: 12px; white-space: nowrap;
  padding: 7px 12px; border-radius: 999px;
}
.tag--line { box-shadow: inset 0 0 0 1.5px var(--paper-3); color: var(--muted); }
.tag--accent { background: color-mix(in oklch, var(--accent) 14%, transparent); color: var(--accent-ink); }
.tag--dot::before { content:""; width:7px; height:7px; border-radius:50%; background: var(--accent); }

/* --- Reveal on scroll --- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* --- Utility --- */
.hr { height: 1px; background: var(--paper-3); border: 0; }
.hr--dark { background: var(--ink-3); }
.center { text-align: center; }
.grid { display: grid; }