/* =============================================================
   AVALON DESIGN SYSTEM
   One source of truth — change here, applies to all pages.
   ============================================================= */

:root {
  /* ---- Palette ----
     Off-white, grey, white, red. No more beige. */
  --ink:          #0A0A0A;     /* text + outlines */
  --ink-soft:     #2a2a2a;
  --paper:        #FAFAFA;     /* page background (was beige #F2EEE6) */
  --paper-2:      #F0F0F0;     /* alt section background */
  --paper-3:      #E6E6E6;     /* deeper alt for cards/footer */
  --line:         #DDDDDD;     /* hairlines */
  --line-soft:    #ECECEC;
  --white:        #FFFFFF;
  --accent:       #D4001A;     /* signal red */
  --accent-dim:   #A30015;
  --muted:        rgba(10,10,10,0.55);

  /* ---- Typography ---- */
  --font-display: 'Archivo Black', 'Arial Black', system-ui, sans-serif;     /* slogan + big headings */
  --font-sans:    'Inter', system-ui, -apple-system, sans-serif;             /* body, menu */
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;                  /* labels, specs */

  --tracking-tight:  -0.025em;
  --tracking-normal: 0;
  --tracking-label:  0.16em;
  --tracking-mono:   0.06em;

  /* ---- Layout ---- */
  --maxw: 1400px;
  --gutter: 40px;
  --gutter-mobile: 20px;
  --nav-pad-y: 32px;       /* breathing in the nav */
  --nav-pad-y-mobile: 20px;

  /* ---- Motion ---- */
  --t-fast: 120ms ease;
  --t-med: 240ms ease;
}

/* ---- Base reset ---- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--paper); color: var(--ink); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
a { color: inherit; }
button { font-family: inherit; }
img { display: block; max-width: 100%; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--paper-2); }
::-webkit-scrollbar-thumb { background: #c8c8c8; }
::-webkit-scrollbar-thumb:hover { background: #a8a8a8; }

input:focus, textarea:focus { border-color: var(--ink) !important; outline: none; }

/* ---- Utility classes for shared chrome ---- */
.av-wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }

/* Red rule — small accent line, replaces the red mono caps subheadings.
   Use above a heading instead of a label text. */
.av-rule { display: block; width: 56px; height: 2px; background: var(--accent); }
.av-rule-sm { display: block; width: 36px; height: 2px; background: var(--accent); }

.av-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tracking-label); color: var(--accent); text-transform: uppercase; }
.av-h-display { font-family: var(--font-display); font-weight: 400; letter-spacing: var(--tracking-tight); line-height: 0.94; margin: 0; }
.av-h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(48px, 7.5vw, 96px); letter-spacing: var(--tracking-tight); line-height: 0.96; margin: 0; }
.av-h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(40px, 5.5vw, 72px); letter-spacing: var(--tracking-tight); line-height: 0.98; margin: 0; }
.av-h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(28px, 3.5vw, 48px); letter-spacing: var(--tracking-tight); line-height: 1.02; margin: 0; }
.av-body { font-family: var(--font-sans); font-size: 15px; line-height: 1.55; }

/* italic substitute when display font has no italic (Archivo Black has only one weight/style),
   skew slightly so the "falling for" cadence still reads italic */
.av-italic { font-style: italic; }
.av-red { color: var(--accent); }

/* ---- Buttons ---- */
.av-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em;
  padding: 13px 22px; cursor: pointer; text-decoration: none; transition: var(--t-fast); border: 1px solid transparent;
}
.av-btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.av-btn-primary:hover { background: var(--accent-dim); border-color: var(--accent-dim); }
.av-btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.av-btn-ghost:hover { background: var(--ink); color: var(--paper); }
.av-btn-solid { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.av-btn-solid:hover { background: #000; }

/* ---- Mobile ---- */
@media (max-width: 820px) {
  .av-wrap { padding: 0 var(--gutter-mobile); }
}