/* ==========================================================================
   Synovia CEO Portal — brand tokens (Fusion light theme)
   Values sourced from CEOWeb/Branding/fusion_design_tokens.json v1.0.0 and
   BRAND_GUIDE.md v1.1.0 — the Fusion brand is the single source of truth.
   Design tokens, base utilities and keyframes ONLY. Components live in app.css.
   ========================================================================== */

:root {
  /* Surfaces (Fusion: bg #F0F4FF app canvas, white cards) */
  --bg:     #F0F4FF;
  --bg2:    #E7EDFB;
  --panel:  #FFFFFF;
  --panel2: #F6F9FF;

  /* Primary dark — sidebar, table Header Band, headings */
  --navy:      #0B1D3A;
  --navy-soft: #14305C;

  /* Ink */
  --ink:     #1E2A3A;
  --ink-dim: #6B7A8D;

  /* Brand + status (Fusion palette) */
  --teal:     #00C4B4;
  --teal-dim: #00A99B;   /* teal_deep — links / hover on teal */
  --amber:    #F97316;
  --red:      #DC3545;
  --green:    #198754;
  --sky:      #0EA5E9;
  --violet:   #7C3AED;

  /* Chart chrome */
  --grid: #DDE5F2;

  /* Categorical series — validated (dataviz six-checks) against --panel,
     fixed slot order, never cycled. Slot 1 anchors the brand teal hue
     (teal_deep for contrast on white). */
  --s1: #00A99B;
  --s2: #447be4;
  --s3: #c58501;
  --s4: #8e57d8;
  --s5: #d1528b;
  --s6: #cd632d;
  --s7: #299fcd;
  --s8: #7f942c;
  --s9: #aa518f;

  /* Structure (Fusion: card 10px, small 6px, brand shadows + motion) */
  --font: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
  --border: #D8E0EE;
  --border-strong: #C4D0E4;
  --radius: 10px;
  --radius-sm: 6px;
  --shadow: 0 1px 3px rgba(11, 29, 58, .06);
  --shadow-hover: 0 6px 18px rgba(11, 29, 58, .08);
  --speed: 140ms;

  /* 8px spacing grid */
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 32px;
  --sp-6: 48px;
}

/* ---- utilities ---------------------------------------------------------- */

.glass {
  background: linear-gradient(160deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02));
  border: 1px solid rgba(255, 255, 255, .18);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.glow {
  box-shadow: 0 0 24px rgba(0, 196, 180, .28), 0 0 64px rgba(0, 196, 180, .12);
}

/* ---- keyframes ---------------------------------------------------------- */

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes pulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: .45; transform: scale(.82); }
}

@keyframes sweep {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}

@keyframes typewriter {
  from { width: 0; }
  to   { width: 100%; }
}

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