/* =============================================================
   Tikistats — Design System tokens (global-safe)
   Only @import and :root custom properties — no element styles.
   Safe to load globally: custom properties have no visual effect
   until referenced by a component that opts in.
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ------- Brand greens (from logo) ------- */
  --brand-forest:  #003B2C;
  --brand-deep:    #004C3B;
  --brand-emerald: #1CC294;
  --brand-lime:    #7FD944;
  --brand-mint:    #A5E6C6;

  /* ------- Non-green accents ------- */
  --accent-amber:   #F59E0B;
  --accent-amber-2: #FBBF24;
  --accent-coral:   #FF6B5B;
  --accent-sky:     #38BDF8;
  --accent-violet:  #A78BFA;

  /* ------- Ink (text) ------- */
  --ink-1: #0B1F1A;
  --ink-2: #3D524C;
  --ink-3: #6B807A;
  --ink-4: #9AAAA5;
  --ink-invert-1: #F4FAF8;
  --ink-invert-2: #B8CFC8;
  --ink-invert-3: #7E9993;

  /* ------- Surfaces ------- */
  --surface-0: #FBFDFC;
  --surface-1: #FFFFFF;
  --surface-2: #F4F7F5;
  --surface-3: #E9EFEC;
  --surface-dark-0: #031A14;
  --surface-dark-1: #0F2A23;
  --surface-dark-2: #1A3A32;

  /* ------- Lines ------- */
  --line-1: #E4EAE7;
  --line-2: #D1DAD5;
  --line-dark-1: rgba(255,255,255,.08);
  --line-dark-2: rgba(255,255,255,.14);

  /* ------- Semantic ------- */
  --success: var(--brand-emerald);
  --success-bg: #E7FAF2;
  --warning: var(--accent-amber);
  --warning-bg: #FEF3DC;
  --danger:  var(--accent-coral);
  --danger-bg: #FFECE9;
  --info:    var(--accent-sky);
  --info-bg: #E3F5FE;

  /* ------- Data-viz scale (Plotly series) ------- */
  --viz-1: #1CC294;
  --viz-2: #F59E0B;
  --viz-3: #7FD944;
  --viz-4: #FF6B5B;
  --viz-5: #38BDF8;
  --viz-6: #A78BFA;
  --viz-7: #D6B87A;
  --viz-8: #6B807A;

  /* Sequential (heatmaps) */
  --viz-seq-0: #F1FAF6;
  --viz-seq-1: #BEE9D5;
  --viz-seq-2: #7DD4AE;
  --viz-seq-3: #3CBE86;
  --viz-seq-4: #1CC294;
  --viz-seq-5: #0E8E6B;
  --viz-seq-6: #045940;

  /* Diverging */
  --viz-div-neg: #FF6B5B;
  --viz-div-mid: #F4F7F5;
  --viz-div-pos: #1CC294;

  /* ------- Fonts ------- */
  --font-display: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
  --font-body:    'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, Menlo, monospace;

  /* ------- Type scale (px) ------- */
  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-22: 22px;
  --fs-28: 28px;
  --fs-36: 36px;
  --fs-48: 48px;
  --fs-64: 64px;

  /* ------- Spacing (4px grid) ------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --s-9: 48px;
  --s-10: 64px;
  --s-11: 80px;

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

  /* ------- Shadows ------- */
  --shadow-1: 0 1px 2px rgba(11,31,26,.06);
  --shadow-2: 0 4px 12px rgba(11,31,26,.08);
  --shadow-3: 0 16px 40px rgba(11,31,26,.14);
  --shadow-focus: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--brand-emerald);

  /* ------- Motion ------- */
  --ease-out: cubic-bezier(.2,.8,.2,1);
  --dur-fast: 120ms;
  --dur-base: 150ms;
  --dur-slow: 220ms;

  /* ------- Pipeline stage dots ------- */
  --dot-setup:     #38BDF8;
  --dot-annotating: #7FD944;
  --dot-cron:      #1CC294;
  --dot-review:    #FF6B5B;
  --dot-completed: #6B807A;
}