/* artifimed Design System — Tokens
 * Basis: Claude (warm, vertrauenswürdig) + Notion (soft surfaces)
 * Anpassung: Medizinisches Grün statt Terracotta als Akzent
 * Erweitert: Dark-Mode + Mobile-Breakpoints
 * Stand: 2026-06-30, Pilot-Phase
 */

:root {
  /* === Brand Colors === */
  --color-brand-primary: #4a7568;
  --color-brand-primary-hover: #3d6358;
  --color-brand-primary-soft: #e8f0ec;

  /* === Accent (semantisch) === */
  --color-accent-evidence-a: #2d6a4f;
  --color-accent-evidence-b: #74a47c;
  --color-accent-evidence-c: #c2b280;
  --color-accent-evidence-d: #b08968;

  --color-accent-warning: #c98a3a;
  --color-accent-warning-soft: #faf3e6;
  --color-accent-danger: #a64848;
  --color-accent-danger-soft: #f7e8e8;
  --color-accent-info: #4a6e8a;
  --color-accent-info-soft: #eaf0f5;

  /* === Surfaces (warm, off-white) === */
  --color-bg: #fafaf7;
  --color-surface-elevated: #ffffff;
  --color-surface-sunken: #f4f2ed;
  --color-surface-hover: #f0eee8;

  /* === Text === */
  --color-text-primary: rgba(20, 20, 19, 0.95);
  --color-text-secondary: #5e5d59;
  --color-text-tertiary: #87867f;
  --color-text-disabled: #b0aea5;
  --color-text-on-brand: #ffffff;

  /* === Borders === */
  --color-border-subtle: rgba(0, 0, 0, 0.08);
  --color-border-default: rgba(0, 0, 0, 0.12);
  --color-border-strong: rgba(0, 0, 0, 0.18);
  --color-border-focus: var(--color-brand-primary);

  /* === PII-Token (Akten-Ansicht) === */
  --color-pii-bg: #fef3c7;
  --color-pii-fg: #92400e;
  --color-pii-border: #fde68a;

  /* === Typography === */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Monaco, Consolas, 'Liberation Mono', monospace;

  --text-xs: 11px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-md: 15px;
  --text-lg: 17px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 32px;

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  /* === Spacing (8px-Grid) === */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* === Radius === */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --radius-full: 9999px;

  /* === Shadows === */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.05);
  --shadow-focus: 0 0 0 3px rgba(74, 117, 104, 0.18);

  /* === Transitions === */
  --transition-fast: 120ms ease-out;
  --transition-base: 200ms ease-out;
  --transition-slow: 320ms ease-out;

  /* === Layout (Desktop) === */
  --sidebar-width: 240px;
  --header-height: 56px;
  --patient-context-height: 48px;
  --content-max-width: 1200px;
}

/* === Dark Mode === */
[data-theme="dark"] {
  /* Brand: leicht heller für besseren Kontrast auf dunklem Grund */
  --color-brand-primary: #6ea192;
  --color-brand-primary-hover: #82b5a6;
  --color-brand-primary-soft: #1f2e2a;

  /* Evidenz-Levels: angepasst an dunklen Grund */
  --color-accent-evidence-a: #6ea192;
  --color-accent-evidence-b: #97bfa4;
  --color-accent-evidence-c: #d4c190;
  --color-accent-evidence-d: #c7a584;

  --color-accent-warning: #d99a4a;
  --color-accent-warning-soft: #2e2418;
  --color-accent-danger: #c97070;
  --color-accent-danger-soft: #2e1c1c;
  --color-accent-info: #6e94b0;
  --color-accent-info-soft: #1c252e;

  /* Surfaces: dunkel-warm (nicht reines Schwarz) */
  --color-bg: #161514;
  --color-surface-elevated: #1f1e1c;
  --color-surface-sunken: #121110;
  --color-surface-hover: #282624;

  /* Text: warm-off-white */
  --color-text-primary: rgba(245, 244, 239, 0.95);
  --color-text-secondary: #a8a59e;
  --color-text-tertiary: #6e6c66;
  --color-text-disabled: #4a4944;
  --color-text-on-brand: #161514;

  /* Borders: warm-transparent */
  --color-border-subtle: rgba(255, 255, 255, 0.08);
  --color-border-default: rgba(255, 255, 255, 0.12);
  --color-border-strong: rgba(255, 255, 255, 0.20);
  --color-border-focus: var(--color-brand-primary);

  /* PII-Token: dunklere Variante */
  --color-pii-bg: #3d2e10;
  --color-pii-fg: #f5d99a;
  --color-pii-border: #5e4520;

  /* Shadows: stärker auf dunklem Grund (mehr Opacity) */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 0, 0, 0.3);
  --shadow-focus: 0 0 0 3px rgba(110, 161, 146, 0.30);
}

/* === Mobile Breakpoints === */
@media (max-width: 768px) {
  :root {
    /* Mobile: Patient-Context wird zur Bottom-Sheet-Trigger */
    --sidebar-width: 0px;
    --header-height: 52px;
    --patient-context-height: 44px;

    /* Mobile: Touch-Targets (WCAG 2.1 AA minimum 44x44) */
    --touch-target-min: 44px;

    /* Mobile: etwas grössere Type für Lesbarkeit */
    --text-base: 15px;
    --text-md: 16px;
  }
}

@media (max-width: 480px) {
  :root {
    /* Sehr kleine Screens: noch etwas grössere Type */
    --text-base: 16px;
    --text-md: 17px;
  }
}