/* Arising Media: Design Tokens (source: .planning/09_BRAND_SYSTEM.md) */
:root {
  /* Logo-derived blues */
  --color-blue-cobalt:  #1B6CB3;  /* IT/brand blue = logo sample (#220, was #042fac) */
  --color-cobalt-light: #5d78c9;
  --color-blue:         #1e6bd6;
  --color-blue-dark:    #154ea0;
  --color-blue-slate:   #235786;
  --color-facet:        #6b82b2;
  --color-blue-light:   #6b82b2;

  /* Cobalt aliases */
  --color-cobalt:       #1B6CB3;  /* primary accent = logo blue (#220, was #042fac) */
  --color-cobalt-deep:  #145796;  /* coherent deep of #1B6CB3 (was #031d82) */
  --color-cobalt-dim:   rgba(27,108,179,0.18);

  /* UI surfaces */
  --color-navy:         #172034;
  --color-footer:       #0f1626;
  --color-slate:        #1c2c44;
  --color-slate-mid:    #1a2a42;
  --color-slate-border: #1e3050;
  --color-graphite:     #222f42;
  --color-ice:          #f5f6f7;
  --color-stone:        #f0f1f2;
  --color-mist:         #f8f9fa;
  --color-white:        #ffffff;
  --color-line:         #e4e8ef;
  --color-line-dark:    rgba(255,255,255,0.08);

  /* Text */
  --color-body:         #2b3446;
  --color-dark-body:    #cdd6e0;
  /* #565e6b: 6.54:1 on #fff, 6.05:1 on --color-ice -- light backgrounds ONLY.
     Contrast on dark backgrounds (navy/slate/graphite) is < 3:1 -- never use on dark surfaces.
     Use --color-muted-on-dark or --color-muted-dark for dark section muted text. */
  --color-muted:        #565e6b;
  /* --color-muted-dark: 5.34:1 on navy, 4.63:1 on slate -- dark section muted body copy (AA) */
  --color-muted-dark:   #8a95a3;
  /* --color-muted-on-dark: 7.20:1 on navy, 6.24:1 on slate, 6.00:1 on graphite, 8.01:1 on footer */
  --color-muted-on-dark: #94b0c9;
  --color-ink:          #0b1222;

  /* Status badge colors -- WCAG AA compliant on white (#ffffff) backgrounds */
  /* #92400e = 7.05:1 PASS (amber-dark, used for in-progress / warning states)  */
  /* #065f46 = 8.65:1 PASS (emerald-dark, used for success / closed states)     */
  /* #1e40af = 9.78:1 PASS (blue-dark, used for new / open states)              */
  /* #374151 = 10.1:1 PASS (slate-dark, used for neutral / default states)      */
  --color-badge-amber:   #92400e;  /* in-progress / warning: 7.05:1 on white */
  --color-badge-green:   #065f46;  /* success / resolved:  8.65:1 on white   */
  --color-badge-blue:    #1e40af;  /* new / open:          9.78:1 on white   */
  --color-badge-neutral: #374151;  /* default / closed:   10.1:1 on white    */
  /* Badge surface (pill background) for each state */
  --color-badge-amber-bg:   #fef3c7;
  --color-badge-green-bg:   #d1fae5;
  --color-badge-blue-bg:    #dbeafe;
  --color-badge-neutral-bg: #f3f4f6;

  /* Semantic */
  --bg:          var(--color-navy);
  --bg-raised:   var(--color-slate);
  --text:        var(--color-dark-body);
  --text-strong: var(--color-white);
  /* --color-muted-on-dark: #94b0c9 = 7.20:1 on navy, 6.24:1 on slate, 6.00:1 on graphite -- WCAG AA */
  --text-mute:   var(--color-muted-on-dark);
  --accent:      var(--color-cobalt);
  --accent-lit:  var(--color-cobalt-light);
  --line:        var(--color-line-dark);

  /* Typography */
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --fs-xs:   0.6875rem;
  --fs-sm:   0.8125rem;
  --fs-base: 0.9375rem;
  --fs-md:   1.0625rem;
  --fs-lg:   1.25rem;
  --fs-xl:   1.5rem;
  --fs-2xl:  2rem;
  --fs-3xl:  2.75rem;
  --fs-4xl:  clamp(2.5rem, 5.5vw, 4.5rem);

  /* Spacing */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px;--sp-16: 64px;--sp-20: 80px;--sp-24: 96px;

  /* Layout */
  --max-w:       1280px;
  --header-h:    64px;
  --radius:      8px;
  --radius-sm:   4px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-pill: 9999px;

  /* Transitions */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur:  220ms;
}