/*
 * Design tokens — Rauda brand layer (ported from the Rauda Design System).
 * IBM Plex Sans/Mono, deep-indigo accent (#080e9a), navy ink (#00045b).
 */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

:root {
  /* Brand palette */
  --brand-accent: #080e9a;
  --brand-accent-hover: #060b7a;
  --brand-accent-variant: #6CC4FF;
  --brand-black: #00045b;
  --brand-blue-text: #00045b;
  --brand-grey-text: #5a5c88;
  --brand-background: #f7f7f7;
  --brand-grey-light: #eaecf8;
  --brand-grey: #d0d4f0;
  --brand-white: #FFFFFF;
  --brand-success: #2FB344;
  --brand-warning: #F76707;
  --brand-danger: #D63939;
  /* Milestones — their own hue so they read apart from steps (accent indigo)
     and incidents (warning orange) in the Outcome tab. */
  --brand-milestone: #7048C4;

  --brand-accent-border-soft: rgba(8, 14, 154, 0.35);
  --brand-accent-ring: rgba(8, 14, 154, 0.16);

  /* Sidebar (dark indigo rail) */
  --brand-sidebar-text: rgba(255, 255, 255, 0.82);
  --brand-sidebar-text-dim: rgba(255, 255, 255, 0.65);
  --brand-sidebar-hover-bg: rgba(255, 255, 255, 0.12);
  --brand-sidebar-active-bg: rgba(255, 255, 255, 0.20);
  --brand-sidebar-border: rgba(255, 255, 255, 0.22);

  /* Semantic aliases */
  --border-color: var(--brand-grey-light);
  --border-strong: var(--brand-grey);

  --tint-success: rgba(47, 179, 68, 0.10);
  --tint-success-strong: rgba(47, 179, 68, 0.20);
  --tint-warning: rgba(247, 103, 7, 0.10);
  --tint-danger: rgba(214, 57, 57, 0.10);
  --tint-accent: rgba(8, 14, 154, 0.08);
  --tint-milestone: rgba(112, 72, 196, 0.12);

  /* Type */
  --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  /* Radii */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-xl: 8px;

  /* Shadows (indigo-tinted) */
  --brand-shadow-sm: 0 1px 2px rgba(8, 14, 154, 0.08);
  --brand-shadow-md: 0 10px 24px rgba(8, 14, 154, 0.08);
  --brand-shadow-lg: 0 18px 48px rgba(8, 14, 154, 0.14);
  --brand-shadow-btn: 0 0.5rem 1rem rgba(8, 14, 154, 0.18);
  --brand-shadow-sidebar: 0.75rem 0 2rem rgba(8, 14, 154, 0.12);

  --transition-fast: 0.15s ease;
  --transition-base: 0.2s ease;
  --transition-slow: 0.3s ease;
}