/* ============================================================
   AK Agency — Colors & Type
   ============================================================
   Source: official Brand Guidelines PDF (uploads/brand-guidelines.pdf).
   Palette: white-led, soft blush/peach neutrals, slate-charcoal ink,
   one vivid royal indigo accent.
   Type:    Quiche Sans (primary display) + Poppins (secondary body).
   ============================================================ */

/* ---------- Webfonts ---------- */
@font-face { font-family: "Quiche Sans"; src: url("fonts/QuicheSans-Light.otf")    format("opentype"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Quiche Sans"; src: url("fonts/QuicheSans-Regular.otf")  format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Quiche Sans"; src: url("fonts/QuicheSans-Italic.otf")   format("opentype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Quiche Sans"; src: url("fonts/QuicheSans-Medium.otf")   format("opentype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Quiche Sans"; src: url("fonts/QuicheSans-Bold.otf")     format("opentype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Quiche Sans"; src: url("fonts/QuicheSans-ExtraBold.otf") format("opentype"); font-weight: 800; font-style: normal; font-display: swap; }

@font-face { font-family: "Poppins"; src: url("fonts/Poppins-Light.ttf")    format("truetype"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/Poppins-Regular.ttf")  format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/Poppins-Italic.ttf")   format("truetype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/Poppins-Medium.ttf")   format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/Poppins-SemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/Poppins-Bold.ttf")     format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }

/* ============================================================
   Tokens — drawn directly from the Brand Guidelines PDF
   ============================================================ */
:root {

  /* ---------- BRAND COLOURS (canonical) ---------- */
  --ak-white:       #FFFFFF;     /* primary background */
  --ak-ink:         #252836;     /* slate-charcoal — primary text */
  --ak-blush:       #EFD3CE;     /* soft pink — secondary surface */
  --ak-peach:       #F8D8C0;     /* warm cream — secondary surface */
  --ak-mist:        #EDF4F6;     /* pale sky — tertiary surface */
  --ak-indigo:      #0D019E;     /* deep royal blue — single accent */

  /* ---------- Derived neutrals (slate ramp from ink) ---------- */
  --ak-ink-soft:    #2F3340;     /* slightly lighter ink for nested text */
  --ak-slate-700:   #3D4150;
  --ak-slate-600:   #565A6A;
  --ak-slate-500:   #757987;
  --ak-slate-400:   #9C9FAB;
  --ak-slate-300:   #C2C5CE;
  --ak-slate-200:   #DCDEE4;
  --ak-slate-100:   #ECEDF1;
  --ak-slate-50:    #F6F7F9;

  /* ---------- Derived accents (for hover/tints; use sparingly) ---------- */
  --ak-blush-soft:  #F6E4E0;     /* lighter blush — large fields */
  --ak-blush-deep:  #E0BAB3;     /* deeper blush — hover on blush surface */
  --ak-peach-soft:  #FCE7D6;
  --ak-mist-deep:   #D6E4E9;
  --ak-indigo-hover:#0A017A;     /* darker indigo for hover */
  --ak-indigo-soft: rgba(13, 1, 158, 0.08); /* faint indigo wash */

  /* ---------- Foreground roles ---------- */
  --fg-1:           var(--ak-ink);
  --fg-2:           var(--ak-slate-600);
  --fg-3:           var(--ak-slate-500);
  --fg-inverse:     var(--ak-white);
  --fg-muted:       var(--ak-slate-400);
  --fg-accent:      var(--ak-indigo);

  /* ---------- Background roles ---------- */
  --bg-1:           var(--ak-white);
  --bg-2:           var(--ak-slate-50);
  --bg-3:           var(--ak-blush-soft);
  --bg-soft:        var(--ak-peach-soft);
  --bg-mist:        var(--ak-mist);
  --bg-dark:        var(--ak-ink);
  --bg-dark-2:      #1A1D27;

  /* ---------- Lines & borders ---------- */
  --line-1:         var(--ak-slate-200);
  --line-2:         var(--ak-slate-300);
  --line-strong:    var(--ak-ink);
  --line-on-dark:   rgba(255, 255, 255, 0.18);
  --line-accent:    var(--ak-indigo);

  /* ---------- Semantic (kept editorial, not punchy) ---------- */
  --ok:             #2F6B4C;
  --warn:           #B07A2A;
  --danger:         #8E3A2E;
  --info:           var(--ak-indigo);

  /* ---------- Type: families ---------- */
  --font-display:   "Quiche Sans", "Cormorant Garamond", "Didot", Georgia, serif;
  --font-body:      "Poppins", "Helvetica Neue", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono:      "JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace;

  /* ---------- Type: scale ---------- */
  --fs-xs:          12px;
  --fs-sm:          14px;
  --fs-base:        16px;
  --fs-md:          18px;
  --fs-lg:          22px;
  --fs-xl:          28px;
  --fs-2xl:         36px;
  --fs-3xl:         48px;
  --fs-4xl:         64px;
  --fs-5xl:         84px;
  --fs-6xl:         112px;

  /* ---------- Type: weights ---------- */
  --fw-light:       300;
  --fw-regular:     400;
  --fw-medium:      500;
  --fw-semibold:    600;
  --fw-bold:        700;
  --fw-extrabold:   800;

  /* ---------- Type: tracking ---------- */
  --tracking-tight: -0.02em;
  --tracking-snug:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:  0.06em;
  --tracking-wider: 0.14em;
  --tracking-widest: 0.24em;       /* the wordmark tracking */

  /* ---------- Type: line heights ---------- */
  --lh-tight:       1.05;
  --lh-snug:        1.15;
  --lh-normal:      1.45;
  --lh-relaxed:     1.6;

  /* ---------- Spacing (4px base) ---------- */
  --s-0:  0;     --s-1:  4px;   --s-2:  8px;   --s-3:  12px;
  --s-4:  16px;  --s-5:  20px;  --s-6:  24px;  --s-7:  32px;
  --s-8:  40px;  --s-9:  56px;  --s-10: 72px;  --s-11: 96px;
  --s-12: 128px; --s-13: 160px;

  /* ---------- Radii — minimal ---------- */
  --r-0:    0;
  --r-xs:   2px;
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-pill: 999px;
  --r-circle: 50%;

  /* ---------- Shadows — extremely subtle ---------- */
  --shadow-1: 0 1px 2px rgba(37, 40, 54, 0.05),
              0 1px 1px rgba(37, 40, 54, 0.04);
  --shadow-2: 0 2px 6px rgba(37, 40, 54, 0.06),
              0 6px 16px rgba(37, 40, 54, 0.06);
  --shadow-3: 0 8px 20px rgba(37, 40, 54, 0.08),
              0 16px 40px rgba(37, 40, 54, 0.08);

  /* ---------- Motion ---------- */
  --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:      140ms;
  --dur-base:      220ms;
  --dur-slow:      420ms;
  --dur-grand:     700ms;

  /* ---------- Layout ---------- */
  --container-max: 1280px;
  --container-pad: clamp(20px, 4vw, 56px);
}

/* ============================================================
   Public semantic classes
   ============================================================ */

html, body {
  background: var(--bg-1);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.ak-display-1, h1.ak-h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: clamp(56px, 9vw, var(--fs-6xl));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin: 0;
}
.ak-display-2, h2.ak-h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: clamp(40px, 6vw, var(--fs-5xl));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin: 0;
}
.ak-h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: var(--fs-3xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
}
.ak-h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
}

/* The canonical wordmark style — extra-light tracked caps */
.ak-wordmark {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--fg-1);
}

.ak-eyebrow {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--fg-2);
}

.ak-body, p.ak-p {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--fg-1);
  text-wrap: pretty;
}
.ak-body-lg {
  font-family: var(--font-body);
  font-weight: var(--fw-light);
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
}
.ak-body-sm {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}
.ak-caption {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  color: var(--fg-3);
  letter-spacing: 0.01em;
}

.ak-quote {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-style: italic;
  font-size: clamp(28px, 4vw, var(--fs-3xl));
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.ak-rule { border: 0; border-top: 1px solid var(--line-strong); margin: var(--s-7) 0; }
.ak-rule--soft { border-top-color: var(--line-1); }
.ak-rule--accent { border-top-color: var(--ak-indigo); }

/* Indigo accent — used for the single primary CTA + active link */
.ak-accent { color: var(--ak-indigo); }
.ak-accent-bg { background: var(--ak-indigo); color: var(--ak-white); }