/* ===========================================================
   Apto 52 — Design tokens
   Color, typography, spacing, radii, shadows, motion.
   Importable into any HTML file in the system.
   =========================================================== */

/* Webfonts ---------------------------------------------------- */
/* Substitutions flagged in README.md
   Inter / Inter Display  → SF Pro Display / SF Pro Text
   Instrument Serif       → editorial accent
   JetBrains Mono         → mono / specs
*/
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500&display=swap");

/* For "Inter Display" feel, we use Inter at heavy weights with tight tracking.
   When Apto 52 licenses SF Pro or a bespoke face, swap this @font-face block. */

:root {
  /* ── Color: neutrals ──────────────────────────────────────── */
  --bg:           #F5F5F7;
  --bg-elevated: #FBFBFD;
  --surface:     #FFFFFF;
  --surface-2:   #F9F9FB;
  --fg-1:        #1D1D1F;
  --fg-2:        #6E6E73;
  --fg-3:        #86868B;
  --fg-on-accent:#FFFFFF;
  --rule:        #D2D2D7;
  --rule-strong: #B0B0B5;

  /* ── Color: brand ─────────────────────────────────────────── */
  --accent:        #0071E3;
  --accent-hover:  #0077ED;
  --accent-pressed:#0060C4;
  --accent-soft:   #E8F1FD;

  /* ── Color: semantic ──────────────────────────────────────── */
  --success:     #1F8A5B;
  --success-soft:#E4F3EC;
  --warn:        #B25000;
  --warn-soft:   #FBEDE0;
  --danger:      #C8261D;

  /* ── Color: photographic accents (drawn from hero imagery) ─ */
  --coral:       #FF7E6B;
  --rose:        #FFA6B2;
  --sky:         #9EC9FF;
  --cobalt:      #2A6FDB;

  /* ── Type ─────────────────────────────────────────────────── */
  --font-display: "Inter", "Inter Display", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-serif:   "Instrument Serif", "Times New Roman", serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Display scale */
  --t-hero:    clamp(56px, 7vw, 96px);
  --t-h1:      clamp(40px, 5vw, 64px);
  --t-h2:      clamp(28px, 3.2vw, 40px);
  --t-h3:      24px;
  --t-h4:      19px;
  --t-body:    17px;
  --t-small:   14px;
  --t-eyebrow: 11px;

  /* Line height */
  --lh-tight:   1.05;
  --lh-snug:    1.15;
  --lh-normal:  1.45;
  --lh-relaxed: 1.6;

  /* Tracking */
  --tr-tight:   -0.022em;
  --tr-snug:    -0.01em;
  --tr-normal:  0;
  --tr-loose:   0.005em;
  --tr-wide:    0.06em;

  /* Font weight */
  --w-regular:  400;
  --w-medium:   500;
  --w-semibold: 600;
  --w-bold:     700;

  /* ── Spacing (8-point grid) ──────────────────────────────── */
  --s-0: 0;
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;
  --s-11: 160px;

  /* ── Radii ───────────────────────────────────────────────── */
  --r-0:       0;
  --r-btn:     12px;
  --r-card:    18px;
  --r-section: 22px;
  --r-pill:    999px;

  /* ── Elevation / shadows ─────────────────────────────────── */
  --el-0: none;
  --el-1: 0 1px 0 rgba(0,0,0,0.04), 0 8px 24px -12px rgba(0,0,0,0.08);
  --el-2: 0 10px 30px -8px rgba(0,0,0,0.15);
  --el-3: 0 24px 60px -12px rgba(0,0,0,0.22);

  /* ── Motion ──────────────────────────────────────────────── */
  --ease:       cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --d-fast:     120ms;
  --d-base:     220ms;
  --d-slow:     420ms;

  /* ── Layout ──────────────────────────────────────────────── */
  --container-narrow:  720px;
  --container:         1024px;
  --container-wide:    1440px;
}

/* ── Semantic element styles ──────────────────────────────── */
html {
  background: var(--bg);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body { margin: 0; }

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  letter-spacing: var(--tr-tight);
  line-height: var(--lh-tight);
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); line-height: var(--lh-snug); }
h3 { font-size: var(--t-h3); line-height: var(--lh-snug); letter-spacing: var(--tr-snug); }
h4 { font-size: var(--t-h4); line-height: var(--lh-snug); letter-spacing: var(--tr-snug); }

p {
  margin: 0;
  font-size: var(--t-body);
  line-height: var(--lh-normal);
}

small {
  font-size: var(--t-small);
  color: var(--fg-2);
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--d-fast) var(--ease);
}
a:hover { color: var(--accent-hover); }

code, pre, kbd {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

/* ── Reusable helper classes used across kit + previews ───── */
.eyebrow {
  font-size: var(--t-eyebrow);
  font-weight: var(--w-semibold);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--fg-2);
}

.headline {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  letter-spacing: var(--tr-tight);
  line-height: var(--lh-tight);
  font-size: var(--t-hero);
  color: var(--fg-1);
  text-wrap: balance;
}
.headline .accent { color: var(--accent); display: block; }

.serif-accent {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
}

.btn {
  display: inline-flex; align-items: center; gap: var(--s-2);
  height: 44px; padding: 0 22px;
  border-radius: var(--r-pill);
  font: var(--w-medium) 15px/1 var(--font-body);
  letter-spacing: var(--tr-loose);
  cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--d-fast) var(--ease),
              transform var(--d-fast) var(--ease),
              color var(--d-fast) var(--ease),
              border-color var(--d-fast) var(--ease);
}
.btn:active { transform: scale(0.98); }
.btn--primary { background: var(--accent); color: var(--fg-on-accent); }
.btn--primary:hover { background: var(--accent-hover); }
.btn--secondary { background: transparent; color: var(--accent); }
.btn--secondary:hover { color: var(--accent-hover); }
.btn--ghost { background: transparent; color: var(--fg-1); border-color: var(--rule); }
.btn--ghost:hover { border-color: var(--rule-strong); }

.card {
  background: var(--surface);
  border-radius: var(--r-card);
  padding: var(--s-7);
}