/* ============================================================
   Danny Kenny — Colors & Type tokens
   ============================================================
   Monochrome system anchored on deep emerald.
   Type is a pure Swiss-grotesque stack:
     Primary  — Helvetica Neue
     Combination — Helvetica
     Display / Secondary — ER Univers KOI-8 (substituted: Helvetica Neue light/heavy
       since the two faces are visually adjacent on screen).
   ============================================================ */

:root {
  /* ---------- COLOR ---------- */

  /* Primary */
  --dk-black:           #000000;
  --dk-white:           #FFFFFF;

  /* Secondary */
  --dk-emerald:         #266556;  /* the brand accent */
  --dk-emerald-deep:    #1F5447;  /* hover on emerald CTAs (light bg) */
  --dk-emerald-soft:    #2F7B68;  /* hover on emerald CTAs (dark bg) */

  /* Gold — sanctioned accent for HIGH-IMPACT MOMENTS only.
     See brand.md §13. Use sparingly: max one gold moment per surface.
     Authorized uses today:
       1. Author archetype OG share card (the "made it" archetype)
       2. /talks pivot questions (1–2 per talk)
       3. Product PDFs — destination/completion moments
          (e.g., the "You made it" aside, completion rule)
     Off-brand uses to avoid:
       — Gold on body text, eyebrows, footers, footnote markers
       — More than one gold element per page
       — Gold on the four problem-archetype touchpoints (Climber/Defendant/
         Lifer/Passenger) — those stay emerald to reinforce the journey
         from problem → Author. */
  --dk-gold:            #C9A227;

  --dk-grey:            #C1C1C1;
  --dk-grey-light:      #F2F2F2;

  /* Semantic surfaces */
  --dk-bg:              var(--dk-white);
  --dk-bg-soft:         var(--dk-grey-light);
  --dk-bg-inverse:      var(--dk-emerald);

  /* Semantic foreground */
  --dk-fg-1:            var(--dk-black);     /* primary text */
  --dk-fg-2:            #4A4A4A;             /* secondary text */
  --dk-fg-3:            #7A7A7A;             /* tertiary / meta */
  --dk-fg-on-emerald:   var(--dk-white);
  --dk-fg-disabled:     var(--dk-grey);

  /* Semantic structure */
  --dk-border:          var(--dk-grey);
  --dk-border-soft:     #E6E6E6;
  --dk-divider:         #E6E6E6;

  /* Brand accent semantics */
  --dk-accent:          var(--dk-emerald);
  --dk-accent-hover:    var(--dk-emerald-deep);
  --dk-accent-fg:       var(--dk-white);

  /* Focus */
  --dk-focus-ring:      var(--dk-emerald);

  /* ---------- TYPE ---------- */

  /* Families — pure Swiss-grotesque stack */
  --dk-font-body:       'Helvetica Neue', Helvetica, Arial, sans-serif;
  --dk-font-display:    'Helvetica Neue', Helvetica, 'Univers', 'Arial Narrow', Arial, sans-serif;
  --dk-font-mono:       ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Scale — editorial, generous */
  --dk-fs-display-xl:   clamp(56px, 8.5vw, 120px);
  --dk-fs-display-lg:   clamp(44px, 6vw, 84px);
  --dk-fs-display-md:   clamp(36px, 4.5vw, 64px);
  --dk-fs-h1:           clamp(32px, 3.6vw, 48px);
  --dk-fs-h2:           clamp(26px, 2.6vw, 36px);
  --dk-fs-h3:           22px;
  --dk-fs-h4:           18px;
  --dk-fs-body:         17px;
  --dk-fs-body-sm:      15px;
  --dk-fs-caption:      13px;
  --dk-fs-label:        12px;

  /* Weights */
  --dk-fw-light:        300;
  --dk-fw-regular:      400;
  --dk-fw-medium:       500;
  --dk-fw-semibold:     600;
  --dk-fw-bold:         700;
  --dk-fw-black:        900;

  /* Leading */
  --dk-lh-display:      0.98;
  --dk-lh-heading:      1.1;
  --dk-lh-body:         1.55;
  --dk-lh-tight:        1.25;

  /* Tracking */
  --dk-tracking-tag:    0.08em;   /* the all-caps tagline & section labels */
  --dk-tracking-tight:  -0.02em;  /* large display headlines */
  --dk-tracking-normal: 0;

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

  /* ---------- RADIUS ---------- */
  --dk-radius-sm: 4px;
  --dk-radius-md: 8px;
  --dk-radius-lg: 12px;          /* sparingly */

  /* ---------- SHADOW (single elevation system) ---------- */
  --dk-shadow-1: 0 8px 24px -12px rgba(0, 0, 0, 0.18);

  /* ---------- MOTION ---------- */
  --dk-ease:       cubic-bezier(0.2, 0, 0, 1);
  --dk-dur-fast:   140ms;
  --dk-dur-base:   220ms;
  --dk-dur-slow:   360ms;
}

/* ============================================================
   Semantic helpers — drop these classes on elements directly.
   ============================================================ */

.dk-display-xl,
.dk-display-lg,
.dk-display-md {
  font-family: var(--dk-font-display);
  font-weight: var(--dk-fw-bold);
  line-height: var(--dk-lh-display);
  letter-spacing: var(--dk-tracking-tight);
  color: var(--dk-fg-1);
  text-wrap: balance;
  margin: 0;
}
.dk-display-xl { font-size: var(--dk-fs-display-xl); }
.dk-display-lg { font-size: var(--dk-fs-display-lg); }
.dk-display-md { font-size: var(--dk-fs-display-md); }

.dk-h1, .dk-h2, .dk-h3, .dk-h4 {
  font-family: var(--dk-font-body);
  color: var(--dk-fg-1);
  font-weight: var(--dk-fw-medium);
  line-height: var(--dk-lh-heading);
  letter-spacing: var(--dk-tracking-tight);
  text-wrap: balance;
  margin: 0;
}
.dk-h1 { font-size: var(--dk-fs-h1); font-weight: var(--dk-fw-bold); }
.dk-h2 { font-size: var(--dk-fs-h2); font-weight: var(--dk-fw-bold); }
.dk-h3 { font-size: var(--dk-fs-h3); }
.dk-h4 { font-size: var(--dk-fs-h4); }

.dk-body {
  font-family: var(--dk-font-body);
  font-size: var(--dk-fs-body);
  line-height: var(--dk-lh-body);
  color: var(--dk-fg-1);
  text-wrap: pretty;
}
.dk-body-sm {
  font-family: var(--dk-font-body);
  font-size: var(--dk-fs-body-sm);
  line-height: var(--dk-lh-body);
  color: var(--dk-fg-2);
}
.dk-caption {
  font-family: var(--dk-font-body);
  font-size: var(--dk-fs-caption);
  line-height: 1.45;
  color: var(--dk-fg-3);
}

/* The brand's signature all-caps detail — section labels, taglines, eyebrows. */
.dk-eyebrow {
  font-family: var(--dk-font-body);
  font-size: var(--dk-fs-label);
  font-weight: var(--dk-fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--dk-emerald);
}
.dk-tagline {
  font-family: var(--dk-font-body);
  font-weight: var(--dk-fw-bold);
  font-size: var(--dk-fs-h4);
  text-transform: uppercase;
  letter-spacing: var(--dk-tracking-tag);
  color: var(--dk-fg-1);
}

/* The big editorial pull — large Helvetica bold. */
.dk-pull {
  font-family: var(--dk-font-display);
  font-weight: var(--dk-fw-bold);
  font-size: var(--dk-fs-display-lg);
  line-height: var(--dk-lh-display);
  letter-spacing: var(--dk-tracking-tight);
  color: var(--dk-fg-1);
}

/* Editorial link */
.dk-link {
  color: var(--dk-fg-1);
  text-decoration: underline;
  text-decoration-color: var(--dk-grey);
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  transition: text-decoration-color var(--dk-dur-fast) var(--dk-ease),
              color var(--dk-dur-fast) var(--dk-ease);
}
.dk-link:hover {
  text-decoration-color: var(--dk-emerald);
  color: var(--dk-emerald);
}

/* Focus ring (apply to interactive elements as a baseline) */
.dk-focus:focus-visible {
  outline: 2px solid var(--dk-focus-ring);
  outline-offset: 2px;
  border-radius: var(--dk-radius-sm);
}