/* ─────────────────────────────────────────────────────────────────
   CORE TALENT GLOBAL · DESIGN TOKENS
   Drop into your global stylesheet. All token names match what's
   referenced in Brand Kit.html.
   ───────────────────────────────────────────────────────────────── */

:root {
  /* ── Primary brand colors ─────────────────────────────────────── */
  --color-navy:        #0F2744;   /* Primary surface · authority */
  --color-navy-deep:   #1E3A6E;   /* Navy used for type / "ink"  */
  --color-midnight:    #0A1628;   /* Print backdrop, deep mode   */
  --color-amber:       #F59E0B;   /* Primary signal · accent     */
  --color-amber-soft:  #FCE7B3;   /* Accent backgrounds          */
  --color-amber-deep:  #B45309;   /* Amber text on light bg (WCAG AA) */

  /* ── Neutral spine (cool, true neutrals) ──────────────────────── */
  --color-ink:         #1E3A6E;   /* Type, frames, dark surfaces */
  --color-ink-2:       #3A4F75;   /* Body type                   */
  --color-stone:       #6D6D78;   /* Captions, meta              */
  --color-faint:       #A2A2AC;   /* Disabled / tertiary         */
  --color-rule:        #DDE1EA;   /* Dividers                    */
  --color-rule-2:      #ECEFF4;   /* Soft dividers               */
  --color-tint:        #E8ECF3;   /* Soft backgrounds            */
  --color-paper:       #FAFAFC;   /* Default page                */
  --color-bg:          #F4F4F6;   /* Page chrome bg              */
  --color-surface:     #FFFFFF;   /* Cards / surfaces over paper */

  /* ── Alternate accents (campaign work only) ───────────────────── */
  --color-pulse:       #FF4E3D;   /* Contemporary · Social       */
  --color-cobalt:      #2952FF;   /* Enterprise IT               */
  --color-voltage:     #9DF000;   /* AI / Data verticals         */
  --color-violet:      #6232E8;   /* Cybersecurity               */

  /* ── Semantic ─────────────────────────────────────────────────── */
  --color-ok:          #0E8A52;
  --color-warn:        #C28310;
  --color-err:         #D03B2A;
  --color-info:        #2952FF;

  /* ── Typography ───────────────────────────────────────────────── */
  --font-display:      'Space Grotesk', system-ui, sans-serif;
  --font-body:         'IBM Plex Sans', system-ui, sans-serif;
  --font-mono:         'JetBrains Mono', ui-monospace, monospace;

  /* Display scale */
  --fs-display-1:      96px;   /* line-height 92,  tracking -3.5% */
  --fs-display-2:      64px;   /* line-height 64,  tracking -3%   */
  --fs-h1:             44px;   /* line-height 48,  tracking -2.5% */
  --fs-h2:             30px;   /* line-height 36,  tracking -2%   */
  --fs-lede:           22px;   /* line-height 30,  tracking -1%   */

  /* Body scale */
  --fs-body-lg:        17px;   /* line-height 27 */
  --fs-body:           15px;   /* line-height 24 */
  --fs-body-sm:        13px;   /* line-height 20 */

  /* UI / mono */
  --fs-ui:             14px;
  --fs-ui-sm:          12px;
  --fs-eyebrow:        11px;   /* uppercase · +0.16em tracking */
  --fs-tag:            10px;   /* uppercase · +0.14em tracking */

  /* ── Spacing ──────────────────────────────────────────────────── */
  --space-1:           4px;
  --space-2:           8px;
  --space-3:           12px;
  --space-4:           16px;
  --space-5:           20px;
  --space-6:           28px;
  --space-7:           36px;
  --space-8:           48px;
  --space-9:           64px;
  --space-10:          96px;

  /* ── Radius ───────────────────────────────────────────────────── */
  --radius-sm:         6px;
  --radius-md:         8px;
  --radius-lg:         12px;
  --radius-xl:         14px;

  /* ── Borders ──────────────────────────────────────────────────── */
  --border-hairline:   0.5px solid var(--color-rule);
  --border-default:    1px   solid var(--color-rule);

  /* ── Target symbol as data-URL backgrounds ────────────────────── */
  --tgt-amber: url("target-mark.svg") /* fill=#F59E0B baked in */;
  --tgt-navy:  url("target-mark.svg") /* fill=#0F2744 baked in */;
}

/* ── Dark mode ─────────────────────────────────────────────────── */
[data-theme="dark"] {
  --color-bg:          #0A1628;   /* Midnight as page bg         */
  --color-paper:       #0F2744;   /* Navy as surface             */
  --color-surface:     #1E3A6E;
  --color-ink:         #F4F4F8;
  --color-ink-2:       #CFD8E5;
  --color-stone:       #8E97A8;
  --color-rule:        #1E3A6E;
  --color-tint:        #16263F;
}

/* ── Motion (added for site-global) ─────────────────────────── */
:root{
  --dur-instant:   60ms;
  --dur-quick:    120ms;
  --dur-base:     240ms;
  --dur-slow:     480ms;
  --dur-cinema:  1200ms;
  --ease-out:        cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:     cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}