/* =========================================================================
   Dragonfly Interactive — Design Tokens
   The single source of truth for color, type, spacing, motion.
   ========================================================================= */

:root {
  /* ---- Brand color (canonical) ---- */
  --navy:        #0A0F1E;   /* Midnight Navy — primary dark surface */
  --navy-deep:   #060912;   /* Deeper navy for hero gradients */
  --navy-soft:   #141A2E;   /* Slightly lifted navy for card surfaces on dark */
  --platinum:    #E6EAF0;   /* Primary light surface */
  --platinum-2:  #F2F4F8;   /* Slightly lighter for elevated cards on light */
  --platinum-3:  #FAFBFC;   /* Almost-white for nav bar */
  --hk-red:      #D71920;   /* Hong Kong Red — sparing accent */
  --hk-red-soft: #B91419;   /* Slightly deeper red for hover */
  --cobalt:      #1E5BFF;   /* United States Blue — sparing accent */
  --cobalt-soft: #1648D6;
  --graphite:    #111827;   /* Body text on light */
  --steel:       #5B6472;   /* Secondary text */
  --steel-soft:  #8A93A0;   /* Tertiary text, dividers */
  --line:        rgba(255, 255, 255, 0.08);   /* Hairline on dark */
  --line-dark:   rgba(17, 24, 39, 0.08);       /* Hairline on light */

  /* Portfolio product accents (from deck) */
  --accent-cinnabar: #D71920;  /* Horizon Hub  — same as HK Red */
  --accent-jade:     #2F7D6A;  /* Skylink */
  --accent-gold:     #9C7A1F;  /* Kodex */
  --accent-graphite: #0A0F1E;  /* Bao (parent brand variant) */
  --accent-violet:   #7B5CFF;  /* Bao-specific violet */

  /* Symbolic HK × US gradient — for headline word accents */
  --grad-hkxus: linear-gradient(90deg, #D71920 0%, #D71920 35%, #1E5BFF 65%, #1E5BFF 100%);
  --grad-cool:  linear-gradient(135deg, #1E5BFF 0%, #7B5CFF 100%);

  /* ---- Type ---- */
  --font-display: "General Sans", "Inter", system-ui, -apple-system, sans-serif;
  --font-body:    "Satoshi", "Inter", system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  /* Fluid type scale, clamp-based for premium responsive feel */
  --text-eyebrow: 0.6875rem;            /* 11px */
  --text-xs:      0.75rem;              /* 12px */
  --text-sm:      0.875rem;             /* 14px */
  --text-base:    1rem;                 /* 16px */
  --text-md:      1.0625rem;            /* 17px — preferred body */
  --text-lg:      1.25rem;              /* 20px */
  --text-xl:      clamp(1.5rem, 1.2rem + 1.2vw, 2rem);          /* 24–32 */
  --text-2xl:     clamp(2rem, 1.5rem + 2vw, 3rem);              /* 32–48 */
  --text-3xl:     clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem);       /* 36–56 */
  --text-hero:    clamp(2.5rem, 1.6rem + 2.6vw, 3.75rem);       /* 40–60 */

  /* ---- Spacing ---- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;
  --sp-32: 8rem;
  --sp-40: 10rem;

  --section-y: clamp(4.5rem, 3rem + 6vw, 8rem);   /* Vertical section padding */
  --section-x: clamp(1.25rem, 1rem + 2vw, 2.5rem); /* Horizontal page padding */
  --container: 1240px;                              /* Max content width */
  --container-narrow: 920px;

  /* ---- Radii ---- */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.7, 0, 0.3, 1);
  --dur-fast: 150ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;
  --dur-slowest: 800ms;

  /* ---- Elevation ---- */
  --shadow-sm: 0 1px 2px rgba(10, 15, 30, 0.04), 0 1px 1px rgba(10, 15, 30, 0.03);
  --shadow-md: 0 4px 16px rgba(10, 15, 30, 0.06), 0 1px 2px rgba(10, 15, 30, 0.04);
  --shadow-lg: 0 12px 40px rgba(10, 15, 30, 0.10), 0 2px 8px rgba(10, 15, 30, 0.06);
  --shadow-glow-red: 0 0 0 1px rgba(215, 25, 32, 0.15), 0 8px 32px rgba(215, 25, 32, 0.18);
  --shadow-glow-cobalt: 0 0 0 1px rgba(30, 91, 255, 0.15), 0 8px 32px rgba(30, 91, 255, 0.18);
  --shadow-glow-violet: 0 0 0 1px rgba(123, 92, 255, 0.20), 0 8px 32px rgba(123, 92, 255, 0.22);
}

/* Bao-page scope: swap accent to violet without changing base palette */
.theme-bao {
  --cobalt: #7B5CFF;
  --cobalt-soft: #6347E5;
  --grad-cool: linear-gradient(135deg, #7B5CFF 0%, #4B96FF 100%);
}