/* ════════════════════════════════════════════════════════════════════
   BKKasset Design System · Tokens
   ────────────────────────────────────────────────────────────────────
   Single source of truth for color, type, spacing, radius, shadow,
   motion. Include this CSS once at the page level (head_seo or
   newstyle.css) — every component reads from --bk-* variables below.

   Last updated: 2026-05-31
   ════════════════════════════════════════════════════════════════════ */

:root {
  /* ─── Brand palette ─── */
  --bk-navy:         #334064;   /* primary brand · headings · CTAs */
  --bk-navy-dark:    #232D4A;   /* hover/active for navy */
  --bk-navy-light:   #4A5A8A;   /* secondary navy */
  --bk-navy-tint:    #F4F7FB;   /* very pale navy tint surface */

  --bk-gold:         #C9A84C;   /* accent · luxury moments · "hot" indicator */
  --bk-gold-dark:    #8E7430;   /* gold hover */
  --bk-gold-bright:  #E6C25E;   /* gold highlight gradient stop */
  --bk-gold-tint:    #FBF5E6;   /* gold wash background */

  /* ─── Neutral / surface ─── */
  --bk-ink:          #1A2138;   /* primary text */
  --bk-ink-2:        #44423E;   /* secondary text */
  --bk-muted:        #5A6478;   /* tertiary text */
  --bk-muted-2:      #8A93A4;   /* placeholder / disabled */

  --bk-bg:           #FFFFFF;   /* base surface */
  --bk-surface:      #FAFBFC;   /* lifted card surface */
  --bk-surface-warm: #FAF8F5;   /* warm cream — editorial moments */
  --bk-surface-cold: #F4F7FB;   /* cold cream — data dashboards */

  --bk-line:         #E8EDF5;   /* default border */
  --bk-line-soft:    #F1F4FA;   /* subtle divider */
  --bk-line-strong:  #C9D0DC;   /* emphasis border */

  /* ─── Semantic ─── */
  --bk-success:      #198754;
  --bk-success-bg:   #D1F2E0;
  --bk-warning:      #E8A500;
  --bk-warning-bg:   #FFF4D1;
  --bk-danger:       #DC3545;
  --bk-danger-bg:    #FBE3E5;
  --bk-info:         #4A5A8A;
  --bk-info-bg:      #E8EDF5;

  /* ─── Typography ─── */
  --bk-font-sans:    'Prompt', 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --bk-font-serif:   'Playfair Display', 'Georgia', 'Times New Roman', serif;
  --bk-font-mono:    ui-monospace, 'SF Mono', Menlo, 'DM Mono', monospace;

  /* Type scale (modular, mobile-first; desktop scales up via media query) */
  --bk-text-xs:      11px;
  --bk-text-sm:      13px;
  --bk-text-base:    15px;
  --bk-text-md:      16px;
  --bk-text-lg:      18px;
  --bk-text-xl:      22px;     /* h3 mobile */
  --bk-text-2xl:     26px;     /* h2 mobile */
  --bk-text-3xl:     32px;     /* h1 mobile */
  --bk-text-4xl:     40px;     /* hero mobile */
  --bk-text-5xl:     52px;     /* display mobile */

  /* Line heights */
  --bk-leading-tight:  1.15;   /* big display */
  --bk-leading-snug:   1.3;    /* headings */
  --bk-leading-normal: 1.55;   /* body */
  --bk-leading-relaxed:1.75;   /* long-form reading */

  /* Letter spacing */
  --bk-tracking-tight: -0.018em;   /* big serif headlines */
  --bk-tracking-snug:  -0.005em;
  --bk-tracking-normal: 0;
  --bk-tracking-wide:  0.05em;
  --bk-tracking-lux:   0.18em;     /* uppercase eyebrow */

  /* Font weights */
  --bk-w-regular:    400;
  --bk-w-medium:     500;
  --bk-w-semibold:   600;
  --bk-w-bold:       700;

  /* ─── Spacing scale (8-point grid) ─── */
  --bk-s-0:    0;
  --bk-s-1:    4px;
  --bk-s-2:    8px;
  --bk-s-3:    12px;
  --bk-s-4:    16px;
  --bk-s-5:    20px;
  --bk-s-6:    24px;
  --bk-s-8:    32px;
  --bk-s-10:   40px;
  --bk-s-12:   48px;
  --bk-s-16:   64px;
  --bk-s-20:   80px;
  --bk-s-24:   96px;

  /* ─── Radius ─── */
  --bk-r-xs:   4px;
  --bk-r-sm:   6px;
  --bk-r-md:   10px;
  --bk-r-lg:   16px;
  --bk-r-xl:   20px;
  --bk-r-2xl:  28px;
  --bk-r-full: 999px;

  /* ─── Shadow (with navy tint, matches existing site) ─── */
  --bk-shadow-xs:   0 1px 2px rgba(51, 64, 100, 0.06);
  --bk-shadow-sm:   0 2px 6px rgba(51, 64, 100, 0.08);
  --bk-shadow-md:   0 4px 14px rgba(51, 64, 100, 0.10);
  --bk-shadow-lg:   0 12px 32px rgba(51, 64, 100, 0.16);
  --bk-shadow-xl:   0 24px 60px rgba(51, 64, 100, 0.22);

  --bk-shadow-gold: 0 8px 24px rgba(201, 168, 76, 0.25);
  --bk-shadow-card: var(--bk-shadow-sm);
  --bk-shadow-card-hover: var(--bk-shadow-lg);

  /* ─── Motion ─── */
  --bk-ease:        cubic-bezier(0.4, 0, 0.2, 1);          /* standard material */
  --bk-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);     /* spring overshoot */
  --bk-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);         /* exit fast → settle */

  --bk-dur-fast:   150ms;
  --bk-dur-base:   220ms;
  --bk-dur-slow:   380ms;
  --bk-dur-slower: 600ms;

  /* ─── Container widths ─── */
  --bk-w-narrow:  640px;     /* long-form reading */
  --bk-w-base:    980px;     /* standard layout */
  --bk-w-wide:    1180px;    /* dashboards · listings */

  /* ─── Z-index scale ─── */
  --bk-z-base:     0;
  --bk-z-raised:   10;
  --bk-z-sticky:   20;
  --bk-z-overlay:  100;
  --bk-z-modal:    200;
  --bk-z-toast:    300;
}

/* ─── Type scale up on desktop ─── */
@media (min-width: 768px) {
  :root {
    --bk-text-xl:    24px;
    --bk-text-2xl:   30px;
    --bk-text-3xl:   38px;
    --bk-text-4xl:   52px;
    --bk-text-5xl:   72px;
  }
}

/* ─── Reduced motion respect ─── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --bk-dur-fast:   0ms;
    --bk-dur-base:   0ms;
    --bk-dur-slow:   0ms;
    --bk-dur-slower: 0ms;
  }
}