/* =========================================================================
   Arlington Flip — Foundations
   Colors, type, spacing, radii, shadows.
   Import this into any HTML artifact:
     <link rel="stylesheet" href="colors_and_type.css">
   ========================================================================= */

/* ---------- Webfonts (all self-hosted, brand-supplied) -------------------
   Archivo Black   — display / wordmark / mastheads
   Inter           — UI / body
   Source Serif 4  — editorial flourish (pull quotes, breaks)
   ------------------------------------------------------------------------- */
@font-face {
  font-family: 'Archivo Black';
  src: url('assets/fonts/ArchivoBlack-Regular.ttf') format('truetype');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('assets/fonts/Inter-VariableFont_opsz_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('assets/fonts/Inter-Italic-VariableFont_opsz_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Source Serif 4';
  src: url('assets/fonts/SourceSerif4-VariableFont_opsz_wght.ttf') format('truetype-variations');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source Serif 4';
  src: url('assets/fonts/SourceSerif4-Italic-VariableFont_opsz_wght.ttf') format('truetype-variations');
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ===== Color: Ink (primary) ============================================
     The brand is monochromatic-first. "Ink" is the heaviest color and
     does almost all the typographic heavy lifting. Use it for headlines,
     wordmark, body text, and the masthead bar. Cool stone undertone —
     reads as a magazine masthead, not pure black. */
  --af-ink:           #2A2F3A; /* river-stone ink — cool, slightly blue */
  --af-ink-90:        #353B47;
  --af-ink-70:        #525866; /* secondary text on stone */
  --af-ink-50:        #7E8493; /* tertiary / metadata */
  --af-ink-30:        #B0B4BD; /* hairlines, disabled */
  --af-ink-15:        #D4D5D2; /* dividers on stone */

  /* ===== Color: Paper (background) =======================================
     Cool-warm stone — the page color of a modern publication.
     Avoid pure white; reads cold. Avoid cream; reads dated. */
  --af-paper:         #EFEEEA; /* canonical page color — cool stone */
  --af-paper-soft:    #F7F6F2; /* lighter — cards/insets */
  --af-paper-warm:    #E2E0D8; /* deeper — section blocks */
  --af-paper-deep:    #D5D3CA; /* deepest stone, for printed-feel callouts */

  /* ===== Color: Pop (bright teal) — primary accent =======================
     A single hot accent — used SPARINGLY. Never as a fill behind body
     copy. Reserved for CTAs, "new" indicators, the marker-style highlight
     wash, and tiny indicator dots. The "this is the action" signal. */
  --af-flip:          #22D3C5; /* bright teal — primary pop */
  --af-flip-deep:     #0FAA9F; /* hover/press */
  --af-flip-soft:     #A8EFE8; /* highlight wash behind text */

  /* ===== Color: Flag (hot pink) — secondary accent =======================
     Used for "featured", "look here", and editorial flags. NEVER together
     with --af-flip in the same component — they're alternate roles, not
     a duo. Use one OR the other in any given UI moment. */
  --af-flag:          #E5388A; /* hot magenta-pink — featured/flag */
  --af-flag-deep:     #B81E68; /* hover/press on pink elements */
  --af-flag-soft:     #FAC9DC; /* highlight wash behind text */

  /* ===== Color: Semantic ================================================
     Tuned to live inside Stone & Pop. Each semantic borrows DNA from the
     core palette so alerts feel like the publication, not generic UI. */
  --af-success:       #0FAA9F;     /* same as --af-flip-deep — teal pop carries "good" */
  --af-warning:       #B8860B;     /* ochre — stone-toned, never clownish orange */
  --af-error:         #9F2540;     /* deep crimson — Flag-family DNA, not generic red */
  --af-info:          var(--af-ink-70); /* soft stone — informational, not declarative */

  /* ===== Foreground / background tokens (semantic) ====================== */
  --af-bg:            var(--af-paper);
  --af-bg-elevated:   var(--af-paper-soft);
  --af-bg-section:    var(--af-paper-warm);
  --af-bg-inverse:    var(--af-ink);

  --af-fg:            var(--af-ink);
  --af-fg-muted:      var(--af-ink-70);
  --af-fg-subtle:     var(--af-ink-50);
  --af-fg-on-ink:     var(--af-paper);
  --af-fg-on-flip:    var(--af-ink);

  --af-border:        var(--af-ink-15);
  --af-border-strong: var(--af-ink);

  /* ===== Type families ================================================== */
  --af-font-display:  "Archivo Black", "Arial Black", "Helvetica Neue", sans-serif;
  --af-font-body:     "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --af-font-serif:    "Source Serif 4", "Source Serif Pro", Georgia, serif;
  --af-font-mono:     ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ===== Type scale (display) ===========================================
     Display sizes are heavy & tight — masthead-coded. Always pair with
     --af-tracking-display and --af-leading-display below. */
  --af-size-display-xl:  88px;  /* hero masthead */
  --af-size-display-lg:  64px;  /* section opener */
  --af-size-display-md:  48px;
  --af-size-display-sm:  36px;
  --af-size-display-xs:  28px;

  /* Body / UI scale */
  --af-size-h1:         32px;
  --af-size-h2:         24px;
  --af-size-h3:         20px;
  --af-size-h4:         18px;
  --af-size-body-lg:    18px;  /* newsletter body */
  --af-size-body:       16px;  /* default UI */
  --af-size-body-sm:    14px;
  --af-size-caption:    13px;
  --af-size-eyebrow:    12px;  /* uppercase label */

  /* Leading */
  --af-leading-display: 0.95;
  --af-leading-tight:   1.15;
  --af-leading-snug:    1.35;
  --af-leading-body:    1.55;
  --af-leading-loose:   1.7;

  /* Tracking */
  --af-tracking-display: -0.01em;  /* very slight squeeze on heavy display */
  --af-tracking-tight:   -0.015em;
  --af-tracking-normal:  0;
  --af-tracking-wide:    0.04em;
  --af-tracking-eyebrow: 0.14em;   /* uppercase masthead labels */

  /* ===== Spacing scale (4-px base) ====================================== */
  --af-space-0:   0;
  --af-space-1:   4px;
  --af-space-2:   8px;
  --af-space-3:  12px;
  --af-space-4:  16px;
  --af-space-5:  20px;
  --af-space-6:  24px;
  --af-space-8:  32px;
  --af-space-10: 40px;
  --af-space-12: 48px;
  --af-space-16: 64px;
  --af-space-20: 80px;
  --af-space-24: 96px;

  /* ===== Radii ==========================================================
     The brand is editorial — radii are mostly small. The exception is the
     wordmark "tab" pill (very rounded), which is reproduced via .af-tab. */
  --af-radius-0:    0;
  --af-radius-xs:   2px;
  --af-radius-sm:   4px;
  --af-radius-md:   8px;
  --af-radius-lg:   12px;
  --af-radius-pill: 999px;

  /* ===== Borders / hairlines =========================================== */
  --af-stroke-hairline: 1px;
  --af-stroke-rule:     2px;  /* canonical newsletter rule */
  --af-stroke-bold:     4px;  /* section dividers under display type */

  /* ===== Shadows ========================================================
     Editorial brand — shadows are restrained. Use crisp "stamp" offsets
     instead of soft blur clouds. */
  --af-shadow-stamp:    3px 3px 0 var(--af-ink);   /* press-impression card */
  --af-shadow-stamp-lg: 6px 6px 0 var(--af-ink);
  --af-shadow-soft:     0 1px 2px rgba(14, 17, 22, 0.08),
                        0 4px 12px rgba(14, 17, 22, 0.06);
  --af-shadow-pop:      0 8px 24px rgba(14, 17, 22, 0.12);

  /* ===== Motion ========================================================
     Snappy, never bouncy. The brand is "knowing", not exuberant. */
  --af-ease:        cubic-bezier(.2, .7, .2, 1);
  --af-ease-out:    cubic-bezier(0, 0, .2, 1);
  --af-dur-fast:    120ms;
  --af-dur-base:    180ms;
  --af-dur-slow:    320ms;
}

/* =========================================================================
   Base element styles
   ========================================================================= */

html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--af-bg);
  color: var(--af-fg);
  font-family: var(--af-font-body);
  font-size: var(--af-size-body);
  line-height: var(--af-leading-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Display type — used for the wordmark, mastheads, big section titles. */
.af-display, h1.af-h1 {
  font-family: var(--af-font-display);
  font-weight: 400;             /* Archivo Black has only one weight */
  letter-spacing: var(--af-tracking-display);
  line-height: var(--af-leading-display);
  text-transform: uppercase;
  color: var(--af-fg);
}

h1, .af-h1 {
  font-family: var(--af-font-display);
  font-size: var(--af-size-h1);
  letter-spacing: var(--af-tracking-tight);
  line-height: var(--af-leading-tight);
  text-transform: uppercase;
  margin: 0 0 var(--af-space-4);
}
h2, .af-h2 {
  font-family: var(--af-font-display);
  font-size: var(--af-size-h2);
  letter-spacing: var(--af-tracking-tight);
  line-height: var(--af-leading-tight);
  text-transform: uppercase;
  margin: 0 0 var(--af-space-3);
}
h3, .af-h3 {
  font-family: var(--af-font-body);
  font-weight: 700;
  font-size: var(--af-size-h3);
  letter-spacing: var(--af-tracking-tight);
  line-height: var(--af-leading-snug);
  margin: 0 0 var(--af-space-2);
}
h4, .af-h4 {
  font-family: var(--af-font-body);
  font-weight: 600;
  font-size: var(--af-size-h4);
  margin: 0 0 var(--af-space-2);
}

p { margin: 0 0 var(--af-space-4); }
a { color: var(--af-fg); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1.5px; }
a:hover { color: var(--af-flip-deep); text-decoration-color: var(--af-flip); }

small, .af-caption {
  font-size: var(--af-size-caption);
  color: var(--af-fg-muted);
  line-height: var(--af-leading-snug);
}

/* Editorial eyebrow — uppercase, tracked-out, often above a display title. */
.af-eyebrow {
  font-family: var(--af-font-body);
  font-weight: 700;
  font-size: var(--af-size-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--af-tracking-eyebrow);
  color: var(--af-fg-muted);
  display: inline-block;
}
.af-eyebrow--flip { color: var(--af-flip-deep); }
.af-eyebrow--flag { color: var(--af-flag); }

/* Pull quote / serif flourish */
.af-pullquote {
  font-family: var(--af-font-serif);
  font-style: italic;
  font-weight: 600;
  font-size: 28px;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--af-fg);
  border-left: var(--af-stroke-bold) solid var(--af-ink);
  padding-left: var(--af-space-5);
  margin: var(--af-space-8) 0;
}

/* Highlight wash — the "marker stroke" effect under one or two words.
   Half-height, full-saturation Pop teal — reads as a real highlighter,
   not a whisper. Slight horizontal padding makes the stroke breathe past
   the glyphs the way a marker does. */
.af-highlight {
  background-image: linear-gradient(180deg, transparent 50%, var(--af-flip) 50%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 0 0.18em;
  margin: 0 -0.04em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
/* Pink-Flag variant — for editorial "look here" emphasis instead of action. */
.af-highlight--flag {
  background-image: linear-gradient(180deg, transparent 50%, var(--af-flag) 50%);
  color: var(--af-paper);
}

/* The masthead "tab" — replicates the rounded-pill ARLINGTON shape from
   the logo. Use for date stamps, issue numbers, section flags. */
.af-tab {
  display: inline-block;
  background: var(--af-ink);
  color: var(--af-fg-on-ink);
  font-family: var(--af-font-body);
  font-weight: 700;
  font-size: var(--af-size-eyebrow);
  letter-spacing: var(--af-tracking-eyebrow);
  text-transform: uppercase;
  padding: 9px 14px 8px;
  border-radius: var(--af-radius-pill);
  line-height: 1.1;
}
.af-tab--flip { background: var(--af-flip); color: var(--af-fg-on-flip); }
.af-tab--flag { background: var(--af-flag); color: var(--af-paper); }

/* Newsletter rule — the canonical horizontal divider under headlines. */
.af-rule {
  border: 0;
  border-top: var(--af-stroke-rule) solid var(--af-ink);
  margin: var(--af-space-6) 0;
}
.af-rule--bold { border-top-width: var(--af-stroke-bold); }
.af-rule--hairline { border-top-width: 1px; border-color: var(--af-border); }

/* =========================================================================
   Utility classes (used across UI kits & cards)
   ========================================================================= */

.af-bg-paper      { background: var(--af-paper); }
.af-bg-paper-soft { background: var(--af-paper-soft); }
.af-bg-paper-warm { background: var(--af-paper-warm); }
.af-bg-ink        { background: var(--af-ink); color: var(--af-fg-on-ink); }
.af-bg-flip       { background: var(--af-flip); color: var(--af-fg-on-flip); }

.af-fg-ink        { color: var(--af-ink); }
.af-fg-muted      { color: var(--af-fg-muted); }
.af-fg-subtle     { color: var(--af-fg-subtle); }
.af-fg-flip       { color: var(--af-flip-deep); }
.af-fg-paper      { color: var(--af-paper); }