/**
 * Design Tokens - t.anachroma.com
 *
 * Contract: /var/www/docs/contracts/dokumentation-pruefung/css-contract_v1.0.yaml
 * Version: 1.0
 *
 * Usage: var(--token-name)
 */

:root {
  /* ===========================================
     Typography
     =========================================== */
  --font-family: 'Calibri', 'Carlito', sans-serif;
  --font-family-mono: 'Consolas', 'Monaco', 'Courier New', monospace;

  --font-size-base: 16px;
  --font-size-xs: 0.75rem;   /* 12px */
  --font-size-sm: 0.85rem;   /* ~14px */
  --font-size-md: 0.9rem;    /* ~14.4px */
  --font-size-lg: 1rem;      /* 16px */
  --font-size-xl: 1.25rem;   /* 20px */
  --font-size-2xl: 1.5rem;   /* 24px */
  --font-size-3xl: 2rem;     /* 32px */

  --line-height: 1.5;

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* ===========================================
     Colors - Base
     =========================================== */
  --color-text: #333;
  --color-text-muted: #666;
  --color-text-light: #999;

  --color-bg: #fff;
  --color-bg-secondary: #f5f5f5;
  --color-bg-tertiary: #f9f9f9;

  --color-border: #ddd;
  --color-border-dark: #333;

  /* ===========================================
     Colors - Brand / Primary
     =========================================== */
  --color-primary: #333;
  --color-primary-hover: #000;
  --color-primary-text: #fff;

  /* ===========================================
     Colors - Status (Contract COL-003)
     =========================================== */
  /* Pending / Warning */
  --color-pending-text: #856404;
  --color-pending-bg: #fff3cd;

  /* In Progress / Info */
  --color-progress-text: #004085;
  --color-progress-bg: #cce5ff;

  /* Success / Completed */
  --color-success-text: #155724;
  --color-success-bg: #d4edda;

  /* Error / Failed */
  --color-error-text: #721c24;
  --color-error-bg: #f8d7da;

  /* Cancelled / Neutral */
  --color-cancelled-text: #383d41;
  --color-cancelled-bg: #e2e3e5;

  /* ===========================================
     Colors - Semantic
     =========================================== */
  --color-link: #333;
  --color-link-hover: #000;

  --color-danger: #721c24;
  --color-danger-hover: #5a161c;

  --color-secondary: #666;
  --color-secondary-hover: #555;

  /* ===========================================
     Spacing (Contract LAY-002)
     =========================================== */
  --space-xs: 0.25rem;   /* 4px */
  --space-sm: 0.5rem;    /* 8px */
  --space-md: 1rem;      /* 16px */
  --space-lg: 1.5rem;    /* 24px */
  --space-xl: 2rem;      /* 32px */

  /* ===========================================
     Border Radius
     =========================================== */
  --radius-sm: 3px;
  --radius-md: 4px;
  --radius-lg: 8px;

  /* ===========================================
     Shadows
     =========================================== */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.1);

  /* ===========================================
     Breakpoints (for reference, use in @media)
     =========================================== */
  /* --breakpoint-sm: 576px; */
  /* --breakpoint-md: 768px; */
  /* --breakpoint-lg: 992px; */
  /* --breakpoint-xl: 1200px; */

  /* ===========================================
     Layout
     =========================================== */
  --container-max-width: 1200px;
  --navbar-height: auto;
}