/* ============================================================
   PODE.expert — Brand design tokens
   Drop this in once and reference the variables everywhere.
   ============================================================ */

:root {
  /* ---- Core palette ---- */
  --pode-ink:        #0F2A43;  /* Ink Navy — anchor, text, headers */
  --pode-ink-deep:   #0A1E30;  /* Ink Deep — darkest surfaces, footers */
  --pode-teal:       #0E7C86;  /* Teal — signature: links, focal dot */
  --pode-teal-deep:  #0C5B61;  /* Teal Deep — hover / small text on light */
  --pode-teal-light: #4FC3C9;  /* Teal Light — accents on dark */
  --pode-amber:      #E9A64D;  /* Amber — warm spark, primary CTAs */
  --pode-amber-ink:  #3D2A08;  /* text colour to sit ON amber */

  /* ---- Neutrals ---- */
  --pode-bone:       #F5F1E8;  /* warm paper — page background */
  --pode-sand:       #EAE4D6;  /* warm tint — alternating sections */
  --pode-mist:       #E7EDEC;  /* cool tint — chips, subtle surfaces */
  --pode-white:      #FFFFFF;
  --pode-slate:      #5A6B78;  /* secondary text on light */
  --pode-line:       rgba(15, 42, 67, 0.12); /* hairline borders */

  /* ---- Type ---- */
  --pode-font-display: 'Schibsted Grotesk', system-ui, sans-serif; /* headings, buttons, logo */
  --pode-font-body:    'Hanken Grotesk', system-ui, sans-serif;    /* body, UI */

  /* Type scale (desktop) */
  --pode-h1: 52px;   /* 34–64, weight 800, letter-spacing -0.02em */
  --pode-h2: 28px;   /* 24–28, weight 600–700 */
  --pode-lead: 19px; /* 18–20, weight 400–600 */
  --pode-body: 16px; /* weight 400, line-height 1.6 */
  --pode-eyebrow: 12px; /* weight 600, letter-spacing .14em, UPPERCASE */

  /* ---- Shape ---- */
  --pode-radius-sm: 8px;
  --pode-radius:    12px;
  --pode-radius-lg: 18px;
  --pode-radius-pill: 999px;

  /* ---- Shadows ---- */
  --pode-shadow-card: 0 4px 16px rgba(15, 42, 67, 0.06);
  --pode-shadow-lift: 0 30px 70px rgba(15, 42, 67, 0.20);
}

/* Handy base helpers (optional) */
.pode-eyebrow {
  font-family: var(--pode-font-display);
  font-weight: 600;
  font-size: var(--pode-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pode-teal);
}