/* ═══════════════════════════════════════════════════════════════
   ASCEND PERFORMANCE NUTRITION — Design Tokens
   Clean. Clinically Dosed.
═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=Barlow+Condensed:wght@500;600;700;800&display=swap');

:root {
  /* ── COLOR: Brand ─────────────────────────────────────── */
  --apn-teal:          #06A5C5;  /* primary — code-authoritative */
  --apn-teal-brand:    #2AABCB;  /* brand-board spec */
  --apn-teal-dark:     #048FAB;  /* gradient pair */
  --apn-teal-light:    #D6F0F6;
  --apn-teal-xlight:   #EBF8FC;

  /* ── COLOR: Neutrals (dark-first) ─────────────────────── */
  --apn-black:         #0A0A0A;  /* app background */
  --apn-black-deep:    #060606;  /* darker section */
  --apn-black-footer:  #080808;
  --apn-surface-1:     #111111;  /* card */
  --apn-surface-2:     #131313;  /* elevated card */
  --apn-border-dark:   #1E1E1E;  /* card border */
  --apn-border-dark-2: #1A1A1A;

  /* ── COLOR: Neutrals (light mode) ──────────────────────── */
  --apn-white:         #FFFFFF;
  --apn-offwhite-warm: #F0EDE8;  /* warm copy on dark */
  --apn-offwhite-cool: #F8FAFB;  /* cool bg */
  --apn-border-light:  #E2E8F0;

  /* ── COLOR: Text ──────────────────────────────────────── */
  --apn-fg-1:          #FFFFFF;
  --apn-fg-2:          rgba(255, 255, 255, 0.70);
  --apn-fg-3:          rgba(255, 255, 255, 0.50);
  --apn-fg-4:          rgba(255, 255, 255, 0.35);
  --apn-fg-body-light: #333333;
  --apn-fg-muted:      #6B7280;
  --apn-fg-muted-2:    #9CA3AF;

  /* ── COLOR: Semantic ──────────────────────────────────── */
  --apn-success:       #22C55E;
  --apn-warning:       #F59E0B;
  --apn-accent-purple: #8B5CF6;
  --apn-star:          #FBBF24;

  /* ── COLOR: Gradients ─────────────────────────────────── */
  --apn-gradient-teal:
    linear-gradient(135deg, var(--apn-teal) 0%, var(--apn-teal-dark) 100%);
  --apn-gradient-hero:
    linear-gradient(160deg, var(--apn-black) 0%, #07131A 60%, var(--apn-black) 100%);
  --apn-gradient-card-accent:
    linear-gradient(135deg, #041318, #020c10);
  --apn-glow-radial:
    radial-gradient(ellipse 70% 60% at 50% 0%, rgba(6,165,197,0.10) 0%, transparent 70%);

  /* ── TYPE: Font families ──────────────────────────────── */
  --apn-font-display:   Georgia, 'Times New Roman', serif;
  --apn-font-sans:      'Barlow', system-ui, -apple-system, sans-serif;
  --apn-font-condensed: 'Barlow Condensed', 'Barlow', sans-serif;

  /* ── TYPE: Sizes ──────────────────────────────────────── */
  --apn-text-xs:    0.6875rem; /* 11 */
  --apn-text-sm:    0.8125rem; /* 13 */
  --apn-text-base:  0.9375rem; /* 15 */
  --apn-text-md:    1rem;      /* 16 */
  --apn-text-lg:    1.125rem;  /* 18 */
  --apn-text-xl:    1.25rem;   /* 20 */
  --apn-text-2xl:   1.5rem;    /* 24 */
  --apn-text-3xl:   1.875rem;  /* 30 */
  --apn-text-4xl:   2.25rem;   /* 36 */
  --apn-text-5xl:   3rem;      /* 48 */
  --apn-text-6xl:   clamp(3rem, 7vw, 5.5rem);

  /* ── TYPE: Tracking ───────────────────────────────────── */
  --apn-track-tight:    -0.03em;
  --apn-track-snug:     -0.02em;
  --apn-track-tight-sm: -0.01em;
  --apn-track-normal:    0em;
  --apn-track-wide:      0.08em;
  --apn-track-wider:     0.14em;
  --apn-track-widest:    0.22em;
  --apn-track-eyebrow:   0.28em;

  /* ── TYPE: Weights ────────────────────────────────────── */
  --apn-weight-light:    300;
  --apn-weight-normal:   400;
  --apn-weight-medium:   500;
  --apn-weight-semi:     600;
  --apn-weight-bold:     700;
  --apn-weight-xbold:    800;

  /* ── TYPE: Line heights ───────────────────────────────── */
  --apn-leading-display: 1.05;
  --apn-leading-tight:   1.15;
  --apn-leading-normal:  1.5;
  --apn-leading-body:    1.7;
  --apn-leading-loose:   1.8;

  /* ── SPACING ──────────────────────────────────────────── */
  --apn-space-1:   0.25rem;   /*  4 */
  --apn-space-2:   0.5rem;    /*  8 */
  --apn-space-3:   0.75rem;   /* 12 */
  --apn-space-4:   1rem;      /* 16 */
  --apn-space-5:   1.25rem;   /* 20 */
  --apn-space-6:   1.5rem;    /* 24 */
  --apn-space-8:   2rem;      /* 32 */
  --apn-space-10:  2.5rem;    /* 40 */
  --apn-space-12:  3rem;      /* 48 */
  --apn-space-16:  4rem;      /* 64 */
  --apn-space-20:  5rem;      /* 80 */
  --apn-space-24:  6rem;      /* 96 */

  /* ── RADII ────────────────────────────────────────────── */
  --apn-radius-xs:  3px;
  --apn-radius-sm:  4px;
  --apn-radius-md:  8px;
  --apn-radius-lg:  10px;
  --apn-radius-xl:  14px;
  --apn-radius-2xl: 20px;
  --apn-radius-pill: 100px;

  /* ── SHADOWS ──────────────────────────────────────────── */
  --apn-shadow-card-light:   0 2px 8px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.06);
  --apn-shadow-card-hover:   0 12px 36px rgba(6,165,197,0.12), 0 4px 12px rgba(0,0,0,0.08);
  --apn-shadow-card-dark:    0 12px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(6,165,197,0.08);
  --apn-shadow-btn:          0 4px 16px rgba(6,165,197,0.35), 0 1px 3px rgba(0,0,0,0.2);
  --apn-shadow-btn-hover:    0 8px 28px rgba(6,165,197,0.45), 0 2px 8px rgba(0,0,0,0.25);
  --apn-shadow-glow:         0 0 50px rgba(6,165,197,0.20);

  /* ── EASINGS ──────────────────────────────────────────── */
  --apn-ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);
  --apn-ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --apn-ease-standard:  cubic-bezier(0.4, 0, 0.2, 1);

  /* ── DURATIONS ───────────────────────────────────────── */
  --apn-duration-fast:   150ms;
  --apn-duration-base:   180ms;
  --apn-duration-mid:    220ms;
  --apn-duration-slow:   450ms;

  /* ── SEMANTIC: Typography presets ────────────────────── */
  --apn-h1: var(--apn-weight-bold) var(--apn-text-6xl) / var(--apn-leading-display) var(--apn-font-display);
  --apn-h2: var(--apn-weight-bold) clamp(2rem, 5vw, 3.5rem) / 1.1 var(--apn-font-display);
  --apn-h3: var(--apn-weight-bold) var(--apn-text-2xl) / var(--apn-leading-tight) var(--apn-font-display);
  --apn-eyebrow-font: var(--apn-weight-bold) var(--apn-text-xs) / 1 var(--apn-font-condensed);
  --apn-btn-font:     var(--apn-weight-bold) 0.875rem  / 1 var(--apn-font-sans);
  --apn-body-font:    var(--apn-weight-normal) var(--apn-text-md) / var(--apn-leading-body) var(--apn-font-sans);
  --apn-mono-font:    var(--apn-weight-normal) 0.875rem / 1.5 ui-monospace, 'SF Mono', Menlo, monospace;
}

/* ═══════════════════════════════════════════════════════════════
   Semantic element styles — apply via class
═══════════════════════════════════════════════════════════════ */
.apn-h1 {
  font: var(--apn-h1);
  letter-spacing: var(--apn-track-tight);
  color: var(--apn-offwhite-warm);
  text-transform: none;
}
.apn-h2 {
  font: var(--apn-h2);
  letter-spacing: var(--apn-track-snug);
  color: var(--apn-offwhite-warm);
}
.apn-h3 {
  font: var(--apn-h3);
  letter-spacing: var(--apn-track-tight-sm);
  color: var(--apn-offwhite-warm);
}
.apn-display-condensed {
  font-family: var(--apn-font-condensed);
  font-weight: var(--apn-weight-xbold);
  text-transform: uppercase;
  letter-spacing: var(--apn-track-wide);
  color: var(--apn-fg-1);
}
.apn-eyebrow {
  font: var(--apn-eyebrow-font);
  letter-spacing: var(--apn-track-eyebrow);
  text-transform: uppercase;
  color: var(--apn-teal);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.apn-eyebrow::before {
  content: '';
  display: block;
  width: 2rem;
  height: 1px;
  background: var(--apn-teal);
  opacity: 0.6;
}
.apn-body {
  font: var(--apn-body-font);
  color: var(--apn-fg-2);
}
.apn-caption {
  font-family: var(--apn-font-sans);
  font-size: var(--apn-text-sm);
  color: var(--apn-fg-muted);
  line-height: var(--apn-leading-normal);
}
.apn-label-sm {
  font-family: var(--apn-font-condensed);
  font-weight: var(--apn-weight-bold);
  font-size: var(--apn-text-xs);
  letter-spacing: var(--apn-track-widest);
  text-transform: uppercase;
  color: var(--apn-fg-1);
}