/* ============================================================
   AKM BUILDING & DESIGN — Core Foundations
   Colors + Typography tokens for the AKMBD design system.
   ------------------------------------------------------------
   FONTS: Display / tracked caps are set in the licensed
   "Sackers Gothic Std" (Monotype) — self-hosted from fonts/.
   It is an all-caps engraver's gothic; all display usage is
   uppercase. Body copy is "Hanken Grotesk" (Google Fonts CDN).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@300;400;500;600;700&display=swap');

@font-face {
  font-family: 'Sackers Gothic Std';
  src: url('fonts/Monotype__-_SackersGothicStd-Medium.otf') format('opentype');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- BRAND CORE ---------- */
  --akm-indigo:        #201C70; /* primary — logo block */
  --akm-indigo-800:    #1A1659; /* hover / pressed */
  --akm-indigo-900:    #100D38; /* deep ground, dark sections */
  --akm-indigo-700:    #353092; /* lifted / focus ring */
  --akm-indigo-300:    #9C99C6; /* muted indigo on light */
  --akm-indigo-100:    #E6E5F1; /* tint surface */
  --akm-indigo-50:     #F2F1F8; /* faint wash */

  --akm-charcoal:      #030404; /* logo ink (true near-black) */

  /* ---------- INK / NEUTRAL TEXT ---------- */
  --ink-1:  #15151A;  /* primary text */
  --ink-2:  #4A4A52;  /* secondary text, body on light */
  --ink-3:  #76767F;  /* tertiary, captions, meta */
  --ink-4:  #A6A6AE;  /* disabled, faint labels */

  /* ---------- SURFACES ---------- */
  --surface-0:  #FFFFFF;  /* base card / paper */
  --surface-1:  #F8F8FA;  /* page background (blueprint paper) */
  --surface-2:  #EFEFF2;  /* recessed / alt rows */
  --surface-3:  #E4E4E8;  /* dividers in fills */
  --surface-dark: #100D38; /* indigo-grounded dark surface */

  /* ---------- LINES / BORDERS ---------- */
  --line-1:  #E2E2E6;  /* hairline border */
  --line-2:  #D2D2D8;  /* standard border */
  --line-3:  #BCBCC4;  /* strong / blueprint line */
  --line-on-dark: rgba(255,255,255,0.16);

  /* ---------- SEMANTIC ---------- */
  --focus:   #353092;
  --success: #2F7D54;
  --warning: #B5862B;
  --danger:  #A8392F;
  --on-indigo: #FFFFFF;

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: 'Sackers Gothic Std', 'Century Gothic', 'Jost', sans-serif;
  --font-body:    'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;

  /* ---------- TYPE SCALE (1.25 major-third-ish) ---------- */
  --fs-display:  clamp(44px, 6vw, 88px);
  --fs-h1:       clamp(34px, 4.4vw, 60px);
  --fs-h2:       clamp(26px, 3vw, 40px);
  --fs-h3:       22px;
  --fs-h4:       18px;
  --fs-body-lg:  19px;
  --fs-body:     16px;
  --fs-small:    14px;
  --fs-eyebrow:  13px;
  --fs-caption:  12px;

  /* ---------- TRACKING ---------- */
  --track-display: 0.04em;  /* tracked geometric caps */
  --track-eyebrow: 0.22em;  /* wide engraver's tracking */
  --track-label:   0.14em;
  --track-body:    0.005em;

  /* ---------- RADII (architectural: minimal) ---------- */
  --radius-0:  0px;    /* default — square, structural */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-pill: 999px;

  /* ---------- SPACING (8px base) ---------- */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;
  --space-4: 16px;  --space-5: 24px;  --space-6: 32px;
  --space-7: 48px;  --space-8: 64px;  --space-9: 96px;
  --space-10: 128px;

  /* ---------- ELEVATION (soft, low, cool) ---------- */
  --shadow-1: 0 1px 2px rgba(16,13,56,0.06);
  --shadow-2: 0 2px 10px rgba(16,13,56,0.07);
  --shadow-3: 0 12px 36px rgba(16,13,56,0.10);
  --shadow-4: 0 24px 60px rgba(16,13,56,0.14);
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   ============================================================ */
.akm-eyebrow {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--akm-indigo);
}
.akm-display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-display);
  letter-spacing: var(--track-display);
  line-height: 1.02;
  color: var(--ink-1);
  text-transform: uppercase;
}
.akm-h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h1);
  letter-spacing: var(--track-display);
  line-height: 1.06;
  color: var(--ink-1);
  text-transform: uppercase;
}
.akm-h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h2);
  letter-spacing: 0.03em;
  line-height: 1.12;
  color: var(--ink-1);
  text-transform: uppercase;
}
.akm-h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h3);
  letter-spacing: var(--track-label);
  line-height: 1.2;
  color: var(--ink-1);
  text-transform: uppercase;
}
.akm-h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-h4);
  letter-spacing: 0;
  line-height: 1.35;
  color: var(--ink-1);
}
.akm-body-lg {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body-lg);
  line-height: 1.6;
  color: var(--ink-2);
}
.akm-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: 1.65;
  letter-spacing: var(--track-body);
  color: var(--ink-2);
}
.akm-small {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--ink-3);
}
.akm-label {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-small);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-2);
}
.akm-caption {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-caption);
  letter-spacing: 0.02em;
  line-height: 1.4;
  color: var(--ink-3);
}