/* nkba-tokens.css
 * Design tokens for nkba.life marketing surface (and, eventually, the app).
 * One source of truth. Use var(--token), never the literal value.
 *
 * If a value here changes, the whole brand shifts in lockstep — that is the
 * point. Do not redefine these in component CSS.
 */

:root {
  /* ── Color ────────────────────────────────────────────────────────────────
   * Use --color-accent for CTAs, focus rings, and one identity element per
   * screen (logo, single accent border). Do NOT use accent for required
   * asterisks, section underlines, or body links — per Designer rec.
   * --color-fg-muted is for supporting copy, not for placeholders.
   */
  --color-bg:           #ffffff;
  --color-bg-soft:      #f6f8fb;       /* alternating sections, card surfaces */
  --color-bg-dark:      #000000;       /* hero / footer — pure black per NKBA brand */
  --color-fg:           #111418;
  --color-fg-muted:     #5b6470;
  --color-fg-inverse:   #ffffff;
  --color-accent:       #f15822;       /* NKBA orange — IG flyer + apparel */
  --color-accent-dark:  #c8470b;       /* hover/active on accent CTAs */
  --color-border:       #e3e6ec;
  --color-border-strong:#c9cfd8;
  --color-error:        #d72638;
  --color-success:      #1f9d61;

  /* ── Typography ───────────────────────────────────────────────────────────
   * Mobile-first. Use --text-base for body. --text-2xl / --text-3xl for hero
   * headlines only. Line-height inherits from body unless overridden.
   */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-sans);     /* swap later if we ship a brand face */

  --text-xs:    0.75rem;    /* 12px — meta, footer fine print */
  --text-sm:    0.875rem;   /* 14px — labels, captions */
  --text-base:  1rem;       /* 16px — body */
  --text-lg:    1.125rem;   /* 18px — lead paragraph */
  --text-xl:    1.375rem;   /* 22px — card titles */
  --text-2xl:   1.75rem;    /* 28px — section titles */
  --text-3xl:   2.25rem;    /* 36px — hero h1 mobile */
  --text-4xl:   3rem;       /* 48px — hero h1 desktop */

  --leading-tight:  1.2;
  --leading-normal: 1.5;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-bold:    700;
  --weight-black:   900;

  /* ── Spacing ──────────────────────────────────────────────────────────────
   * 4px base. Use --space-3 (12px) for tight gaps, --space-5 (24px) for
   * card padding, --space-7 (48px) between sections on mobile.
   */
  --space-1: 0.25rem;   /* 4px  */
  --space-2: 0.5rem;    /* 8px  */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.5rem;    /* 24px */
  --space-6: 2rem;      /* 32px */
  --space-7: 3rem;      /* 48px */
  --space-8: 4rem;      /* 64px */

  /* ── Radii ────────────────────────────────────────────────────────────────
   * --radius for inputs / small cards. --radius-lg for hero containers and
   * program tiles. Pill buttons use --radius-pill (intentionally large).
   */
  --radius:      8px;
  --radius-lg:   16px;
  --radius-pill: 999px;

  /* ── Shadows ──────────────────────────────────────────────────────────────
   * --shadow for resting cards. --shadow-lg for hover/active or sticky CTAs.
   * Avoid more than two levels — depth past that reads as theme drift.
   */
  --shadow:     0 1px 3px rgba(15, 17, 21, 0.06),
                0 1px 2px rgba(15, 17, 21, 0.08);
  --shadow-lg:  0 10px 30px rgba(15, 17, 21, 0.10),
                0 4px 10px rgba(15, 17, 21, 0.06);

  /* ── Layout ───────────────────────────────────────────────────────────────
   * Page max-widths. Marketing pages cap at --container-wide; reading-style
   * content (about copy) caps at --container-prose.
   */
  --container-wide:  1120px;
  --container-prose: 720px;

  /* ── Motion ───────────────────────────────────────────────────────────────
   * Use sparingly. Hover transitions only; no entrance animations on load.
   */
  --transition-fast: 120ms ease-out;
  --transition:      200ms ease-out;
  --ease-out-soft:   cubic-bezier(0.22, 1, 0.36, 1);
  --transition-slow: 500ms var(--ease-out-soft);
}

/* Conservative dark-mode override. Marketing surface stays light by default;
 * this only kicks in when the OS asks. Keeps brand identity intact — accent
 * stays the same, surfaces invert, borders soften. */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg:           #0f1115;
    --color-bg-soft:      #181b21;
    --color-bg-dark:      #000000;
    --color-fg:           #f3f4f6;
    --color-fg-muted:     #9aa3af;
    --color-border:       #2a2e36;
    --color-border-strong:#3a3f48;
  }
}