/* iMatrix Design Tokens — CSS Custom Properties */
:root {
  /* Brand Colors */
  --color-primary: #0085b4;
  --color-primary-dark: #005c8c;

  /* Neutral Scale */
  --color-white: #ffffff;
  --color-page-bg: #f5f9fc;
  --color-hover: #f0f0f0;
  --color-pressed: #e2e2e2;
  --color-border: #d9d9d9;
  --color-disabled: #b1b3b5;
  --color-unit: #707070;
  --color-secondary-text: #666666;
  --color-heading-secondary: #444444;
  --color-text: #333333;
  --color-text-dark: #212121;
  --color-icon-dark: #121212;
  --color-black: #000000;

  /* Semantic Tints */
  --color-tile-bg: #d8e9f0;
  --color-sidebar-accent: #a8d2e3;
  --color-accent-light: #dfe8ef;

  /* Status Colors */
  --color-normal: #4caf50;
  --color-advisory: #ffeb3b;
  --color-warning: #ff9100;
  --color-alarm: #a7405a;

  /* Tutorial-specific */
  --color-code-bg: #1e1e1e;
  --color-code-text: #d4d4d4;
  --color-table-header: #005c8c;
  --color-table-stripe: #f5f9fc;
  --color-callout-note: #0085b4;
  --color-callout-warning: #ff9100;
  --color-callout-tip: #4caf50;

  /* Typography */
  --font-family: 'Roboto', 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'Roboto Mono', 'Consolas', 'Monaco', monospace;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  /* Font Sizes */
  --font-size-caption-sm: 10px;
  --font-size-caption: 12px;
  --font-size-body-sm: 14px;
  --font-size-body: 16px;
  --font-size-h4: 16px;
  --font-size-h3: 18px;
  --font-size-h2: 21px;
  --font-size-h1: 24px;

  /* Line Heights */
  --line-height-caption-sm: 14px;
  --line-height-caption: 16px;
  --line-height-body-sm: 20px;
  --line-height-body: 24px;
  --line-height-h4: 20px;
  --line-height-h3: 23.4px;
  --line-height-h2: 26px;
  --line-height-h1: 32px;

  /* Spacing */
  --spacing-none: 0px;
  --spacing-2: 2px;
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-64: 64px;

  /* Border Radius */
  --radius-none: 0px;
  --radius-2: 2px;
  --radius-4: 4px;
  --radius-6: 6px;
  --radius-8: 8px;
  --radius-12: 12px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

  /* Layout */
  --site-header-height: 80px;
  --sidebar-width: 280px;
  --content-max-width: 860px;
  --z-topbar: 1000;
  --z-sidebar: 10;
  --z-overlay: 15;
}