@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* Surfaces & Backgrounds */
  --bg-canvas: #eef2f8;
  --bg-canvas-tint: #e4eaf5;
  --bg-surface: #ffffff;
  --bg-surface-subtle: #dce0ef;
  --bg-surface-muted: #c8cedf;

  /* Borders */
  --border-subtle: #dce0ef;
  --border-strong: #b0b8d1;
  --border-focus: #0136fe;

  /* Typography Colors */
  --text-primary: #0a0d14;
  --text-secondary: #3d4460;
  --text-muted: #7a85a8;
  --text-inverse: #ffffff;

  /* Brand Accents (Domagin Blue Primary) */
  --brand-primary: #0136fe;
  --brand-primary-hover: #0029cc;
  --brand-primary-subtle: #e8eeff;
  --brand-primary-text: #ffffff;

  /* Brand Secondary & Accent Ramp (Steel Blue Palette) */
  --brand-secondary: #3e68a4;
  --brand-secondary-hover: #325485;
  --brand-secondary-subtle: #e0eaf6;
  --brand-secondary-border: #a2c6ea;
  --brand-secondary-text: #ffffff;

  /* Neutral Dark & Sidebar (Near-Black #0a0d14 / #121212) */
  --sidebar-bg: #0a0d14;
  --brand-dark: #0a0d14;
  --brand-dark-surface: #121212;
  --brand-dark-hover: #1a2030;

  /* Palette Named Tokens */
  --color-black: #121212;
  --color-steel-blue: #3e68a4;
  --color-sky-blue: #a2c6ea;
  --color-ice-blue: #e0eaf6;
  --color-pure-white: #ffffff;

  /* Status Colors (WCAG AA compliant) */
  --status-success: #15803d;
  --status-success-bg: #f0fdf4;
  --status-success-border: #bbf7d0;

  --status-warning: #b45309;
  --status-warning-bg: #fffbeb;
  --status-warning-border: #fde68a;

  --status-danger: #b91c1c;
  --status-danger-bg: #fef2f2;
  --status-danger-border: #fecaca;

  --status-info: #0136fe;
  --status-info-bg: #e8eeff;
  --status-info-border: #a5b4ff;

  /* Typography */
  --font-display: 'Geom', system-ui, sans-serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* Radii (Deliberate & Restrained) */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-full: 9999px;

  /* Shadows (Near-black, non-floating) */
  --shadow-sm: 0 1px 2px 0 rgba(10, 13, 20, 0.06);
  --shadow-md: 0 4px 6px -1px rgba(10, 13, 20, 0.09), 0 2px 4px -2px rgba(10, 13, 20, 0.05);
  --shadow-lg: 0 10px 15px -3px rgba(10, 13, 20, 0.12);

  /* Layout Spacing */
  --sidebar-width: 250px;
  --topbar-height: 60px;

  /* Motion Tokens — MOTION dial: 2 */
  --duration-fast: 140ms;
  --duration-normal: 240ms;
  --duration-slow: 380ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}