/* ============================================================
   Friends4 — Design Tokens (Edel / Apple-inspired refresh)
   Drop-in addition to public/style.css
   ============================================================ */

:root {
  /* ---------- Core (carbon, platinum) ---------- */
  --f4-carbon:         #1d1d1f;   /* primary text, CTA fill */
  --f4-graphite:       #2c2c2e;   /* dark surface, nav overlay */
  --f4-platinum:       #f5f5f7;   /* app canvas, section bg */
  --f4-porcelain:      #fbfbfd;   /* elevated surface, cards */

  /* ---------- Accent (signature blue) ---------- */
  --f4-signature:      #0071e3;   /* links, focus ring, primary CTA */
  --f4-signature-hov:  #0077ed;   /* hover */
  --f4-marine:         #004e9a;   /* visited, deep accent */

  /* ---------- Text ---------- */
  --f4-fg:             #1d1d1f;
  --f4-fg-muted:       #6e6e73;
  --f4-fg-silver:      #86868b;   /* meta, timestamps */
  --f4-fg-invert:      #f5f5f7;

  /* ---------- Status ---------- */
  --f4-success:        #34c759;
  --f4-error:          #ff3b30;
  --f4-warning:        #ff9500;

  /* ---------- Borders & shadow ---------- */
  --f4-hairline:       .5px solid rgba(0,0,0,.08);
  --f4-hairline-strong: .5px solid rgba(0,0,0,.14);
  --f4-shadow-card:    0 0 0 .5px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.03);
  --f4-shadow-float:   0 0 0 .5px rgba(0,0,0,.08), 0 30px 60px -10px rgba(0,0,0,.15);
  --f4-shadow-modal:   0 0 0 .5px rgba(0,0,0,.08), 0 40px 80px -20px rgba(0,0,0,.3);

  /* ---------- Radius ---------- */
  --f4-r-sm: 10px;
  --f4-r-md: 14px;
  --f4-r-lg: 18px;
  --f4-r-xl: 22px;
  --f4-r-pill: 980px;

  /* ---------- Type ---------- */
  --f4-font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", Arial, sans-serif;
  --f4-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --f4-track-hero: -.022em;   /* 40–64 px */
  --f4-track-h2:   -.018em;   /* 26–44 px */
  --f4-track-body: -.005em;
}

/* ---------- Primitives ---------- */
.f4-btn-primary {
  background: var(--f4-signature); color: #fff; border: none;
  border-radius: var(--f4-r-pill); padding: 10px 22px;
  font: 400 15px/1 var(--f4-font-sans); letter-spacing: -.01em;
  cursor: pointer; transition: background .15s;
}
.f4-btn-primary:hover { background: var(--f4-signature-hov); }

.f4-btn-dark {
  background: var(--f4-carbon); color: #fff; border: none;
  border-radius: var(--f4-r-pill); padding: 10px 22px;
  font: 400 15px/1 var(--f4-font-sans); letter-spacing: -.01em;
  cursor: pointer;
}

.f4-surface     { background: var(--f4-porcelain); box-shadow: var(--f4-shadow-card); border-radius: var(--f4-r-lg); }
.f4-glass-nav   {
  background: rgba(251,251,253,.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: var(--f4-hairline);
}

.f4-hero-title  { font: 600 clamp(40px,6vw,64px)/1.05 var(--f4-font-sans); letter-spacing: var(--f4-track-hero); color: var(--f4-carbon); }
.f4-section-title { font: 600 clamp(30px,4vw,44px)/1.1 var(--f4-font-sans); letter-spacing: -.022em; color: var(--f4-carbon); }
.f4-kicker     { font: 400 12px/1 var(--f4-font-sans); letter-spacing: .02em; text-transform: uppercase; color: var(--f4-fg-silver); }