/* ============================================================
   amplifly// — Colors & Type
   v4.0 · The locked system (May 2026)
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Serifon Editorial";
  src: url("fonts/SerifonEditorial-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Serifon Editorial";
  src: url("fonts/SerifonEditorial-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* Alternate display faces (not locked, kept for legacy / exploration) */
@font-face {
  font-family: "Exclusive Editorial";
  src: url("fonts/ExclusiveEditorial-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Exclusive Editorial Cond";
  src: url("fonts/ExclusiveEditorialCond-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Figo Shiftz Editorial";
  src: url("fonts/FigoShiftzEditorial-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Figo Shiftz Editorial";
  src: url("fonts/FigoShiftzEditorial-Italic.ttf") format("truetype");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Velique";
  src: url("fonts/Velique-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}

/* Inter — load from Google Fonts when online; falls back to system sans */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");


:root {
  /* ============================================================
     COLOR — The locked palette
     Every family has a Whisper (muted) and a Land (bold) state.
     The middle is never used. Whisper or Land. No mumble.
     ============================================================ */

  /* Framework — structure, not brand */
  --linen:           #F2EDE6;  /* canvas, every background */
  --ink:             #141210;  /* type, buttons, detail — warm near-black */
  --ink-mid:         #4A3F35;  /* body copy (Ink at ~70%) */
  --sage:            #898F64;  /* the // mark, eyebrows, labels */

  /* Coral — warmth · action · human pop */
  --coral-whisper:   #F5D0BC;  /* Soft Peach */
  --coral-land:      #FF6B5A;  /* Signal Coral */
  --coral-text:      #4A1B0C;  /* type colour on Coral surfaces */

  /* Citrus — sun · premium · optimism pop */
  --citrus-whisper:  #FAEDC4;  /* Pale Cream-Yellow */
  --citrus-land:     #FFC93F;  /* Vivid Citrus */
  --citrus-text:     #412402;  /* type colour on Citrus surfaces */

  /* Blush — editorial · warm */
  --blush-whisper:   #EAE0D8;  /* Blush */
  --blush-land:      #D4856F;  /* Rose Clay */

  /* Sage — signature · the // mark */
  --sage-whisper:    #DDE0C8;  /* Sage Pale */
  --sage-land:       #898F64;  /* Sage (same as framework sage) */

  /* Blue — carrier · cool · digital lane */
  --blue-whisper:    #AECCD8;  /* Baby Blue */
  --blue-land:       #3D7FA8;  /* Bold Blue */

  /* Green — quiet confidence · grounding */
  --green-whisper:   #D8DCC2;  /* Soft Autumn Green */
  --green-land:      #6B7F3A;  /* Autumn Green */

  /* ---------- Semantic foreground / background ---------- */
  --bg:              var(--linen);
  --bg-elevated:     #FFFFFF;     /* the "white content card" in emails */
  --fg:              var(--ink);
  --fg-muted:        var(--ink-mid);
  --fg-quiet:        var(--sage);
  --border-hairline: rgba(20, 18, 16, 0.10);
  --border-dashed:   rgba(20, 18, 16, 0.15);

  /* ============================================================
     TYPE — Two typefaces. Three roles. Aeki discipline.
     ============================================================ */

  --font-display: "Serifon Editorial", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-label:   "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Scale (display) */
  --fs-hero:      88px;
  --fs-display:   64px;
  --fs-h1:        48px;
  --fs-h2:        40px;
  --fs-h3:        32px;

  /* Scale (body / UI — Inter range 11–28) */
  --fs-lead:      22px;
  --fs-body:      16px;
  --fs-small:     14px;
  --fs-caption:   13px;
  --fs-label:     11px;
  --fs-micro:     10px;

  /* Tracking */
  --tr-display:   -0.025em;
  --tr-headline:  -0.02em;
  --tr-tight:     -0.01em;
  --tr-body:      0em;
  --tr-label:     0.22em;
  --tr-eyebrow:   0.28em;

  /* Leading */
  --lh-hero:      0.95;
  --lh-display:   1.0;
  --lh-headline:  1.05;
  --lh-body:      1.6;
  --lh-tight:     1.45;

  /* ============================================================
     SPACING — 8pt scale
     ============================================================ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ============================================================
     RADII
     - Pill buttons are 999px.
     - Cards are 14px.
     - Tiles / images are 10–12px.
     ============================================================ */
  --radius-pill:    999px;
  --radius-card:    14px;
  --radius-tile:    12px;
  --radius-chip:    10px;
  --radius-input:   8px;

  /* ============================================================
     ELEVATION
     The brand prefers hairlines + linen-on-linen tone over shadow.
     Shadows are subtle and only used on floating surfaces.
     ============================================================ */
  --shadow-hairline: inset 0 0 0 0.5px rgba(20, 18, 16, 0.10);
  --shadow-card:     0 1px 2px rgba(20, 18, 16, 0.04), 0 8px 24px rgba(20, 18, 16, 0.06);
  --shadow-pop:      0 12px 40px rgba(20, 18, 16, 0.10);

  /* ============================================================
     MOTION
     Considered. Never bouncy. Cubic eases, ~200–320ms.
     ============================================================ */
  --ease-out:    cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-inout:  cubic-bezier(0.6, 0, 0.2, 1);
  --dur-fast:    160ms;
  --dur-base:    240ms;
  --dur-slow:    320ms;
}

/* ============================================================
   SEMANTIC TYPE — apply directly to elements
   ============================================================ */

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Display headlines — Serifon, tight, sentence-case */
h1, .h1, .a-hero {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-hero);
  line-height: var(--lh-hero);
  letter-spacing: var(--tr-display);
  color: var(--fg);
  margin: 0;
}
h2, .h2, .a-display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  color: var(--fg);
  margin: 0;
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h1);
  line-height: var(--lh-headline);
  letter-spacing: var(--tr-headline);
  color: var(--fg);
  margin: 0;
}
h4, .h4 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: var(--lh-headline);
  letter-spacing: var(--tr-headline);
  margin: 0;
}
h5, .h5 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h3);
  line-height: var(--lh-headline);
  letter-spacing: var(--tr-headline);
  margin: 0;
}

/* Italic pull-quote / tagline — Serifon Italic */
.a-italic, blockquote, .pullquote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.005em;
}

/* Lead paragraph */
.lead, .a-lead {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-lead);
  line-height: 1.45;
  color: var(--fg-muted);
}

/* Body */
p, .a-body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-muted);
  margin: 0;
}

/* Small body, caption */
small, .a-small {
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--fg-muted);
}
.a-caption {
  font-size: var(--fs-caption);
  line-height: 1.55;
  color: var(--fg-muted);
}

/* Eyebrow / label — Inter 500, uppercase, tracked */
.a-eyebrow, .eyebrow {
  font-family: var(--font-label);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--sage);
}
.a-label {
  font-family: var(--font-label);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--sage);
}
.a-mono {
  font-family: var(--font-label);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--sage);
}

/* The structural // mark — always Sage on light surfaces */
.slash {
  color: var(--sage);
  font-style: normal;
}

/* Links — inline, ink, hairline underline */
a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(20, 18, 16, 0.30);
  transition: text-decoration-color var(--dur-fast) var(--ease-out);
}
a:hover { text-decoration-color: var(--ink); }