/*
 * KKI Design System — tokens
 * Single source of truth for v2 brand colors, spacing, typography.
 * Loaded via wp_enqueue_style (cache-busted by filemtime).
 *
 * Spec: openspec/specs/design-tokens/spec.md
 */

:root {
    /* ── Brand: navy ──────────────────────────────────────────────── */
    --kki-navy-deep:   #07111d;
    --kki-navy:        #0b1017;
    --kki-navy-mid:    #131a24;
    --kki-navy-rich:   #1a2230;
    --kki-navy-cta:    #243046;

    /* ── Brand: cream ─────────────────────────────────────────────── */
    --kki-cream:       #fff7e8;
    --kki-cream-soft:  rgba(247, 240, 223, 0.86);
    --kki-cream-mute:  rgba(240, 238, 233, 0.70);
    --kki-cream-bg:    #f0eee9;
    --kki-cream-deep:  #ede6d2;
    --kki-off-white:   #fdfcf8;

    /* ── Brand: gold ──────────────────────────────────────────────── */
    --kki-gold:           #d8bd76;
    --kki-gold-bright:    #b8a97d;
    --kki-gold-deep:      #6e5e35;
    --kki-gold-darker:    #8e8266;
    --kki-gold-line:      rgba(216, 189, 118, 0.20);
    --kki-gold-line-strong: rgba(216, 189, 118, 0.45);
    --kki-gold-tint:      rgba(216, 189, 118, 0.08);
    --kki-gold-tint-2:    rgba(216, 189, 118, 0.16);
    --kki-gold-tint-3:    rgba(216, 189, 118, 0.34);

    /* ── Card patterns ────────────────────────────────────────────── */
    --kki-card-bg:        linear-gradient(180deg, rgba(22, 31, 44, 0.98), rgba(9, 16, 26, 0.96));
    --kki-card-bg-hover:  linear-gradient(180deg, rgba(28, 38, 52, 0.98), rgba(15, 22, 32, 0.96));
    --kki-card-border:    1px solid rgba(216, 189, 118, 0.34);
    --kki-card-border-hover: 1px solid rgba(216, 189, 118, 0.62);
    --kki-card-shadow:    0 18px 38px rgba(0, 0, 0, 0.30);
    --kki-card-shadow-hover: 0 26px 48px rgba(0, 0, 0, 0.40);

    /* ── Glow + accents ──────────────────────────────────────────── */
    --kki-glow-gold:      radial-gradient(circle at 14% 0%, rgba(216, 189, 118, 0.10), transparent 32%);
    --kki-glow-gold-r:    radial-gradient(circle at 86% 0%, rgba(216, 189, 118, 0.10), transparent 32%);
    --kki-glow-blue:      radial-gradient(circle at 78% 28%, rgba(148, 180, 193, 0.10), transparent 34%);

    /* ── Status colors ────────────────────────────────────────────── */
    --kki-status-good:    #7eb88a;
    --kki-status-bad:     #eb9788;
    --kki-status-good-deep: #3d6b4a;
    --kki-status-bad-deep:  #a04030;

    /* ── Spacing rhythm ───────────────────────────────────────────── */
    --kki-pad-section:        88px;
    --kki-pad-section-sm:     56px;
    --kki-pad-section-mobile: 48px;
    --kki-gap-card:           24px;
    --kki-gap-tight:          16px;

    /* ── Typography ───────────────────────────────────────────────── */
    --kki-serif:    "Cormorant Garamond", "Noto Serif Thai", Georgia, serif;
    --kki-sans:     -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --kki-eyebrow-letter: 0.18em;
    --kki-eyebrow-size:   0.75rem;
    --kki-h2-letter:      -0.012em;
    --kki-h2-line:        1.2;
    --kki-body-line:      1.7;

    /* ── Radii ────────────────────────────────────────────────────── */
    --kki-radius-card:     6px;
    --kki-radius-pill:     999px;
    --kki-radius-icon:     8px;
    --kki-radius-icon-lg:  12px;

    /* ── Layout ───────────────────────────────────────────────────── */
    --kki-content-max:    1180px;
    --kki-content-narrow: 720px;
    --kki-content-text:   60ch;
}