/*
  Design tokens for the "Scientific Clarity" design system.
  Source: МАКЕТЫ/DESIGN.md and the Tailwind config embedded in the exported
  Google Stitch mockups. Every component stylesheet reads colors, type,
  spacing and radii from these custom properties instead of hard-coded
  values, so the palette/scale only has to change in one place.
*/

:root {
    /* Surfaces */
    --color-surface: #f7f9fb;
    --color-surface-dim: #d8dadc;
    --color-surface-bright: #f7f9fb;
    --color-surface-container-lowest: #ffffff;
    --color-surface-container-low: #f2f4f6;
    --color-surface-container: #eceef0;
    --color-surface-container-high: #e6e8ea;
    --color-surface-container-highest: #e0e3e5;
    --color-surface-variant: #e0e3e5;
    --color-background: #f7f9fb;

    /* Text on surfaces */
    --color-on-surface: #191c1e;
    --color-on-surface-variant: #434655;
    --color-on-background: #191c1e;
    --color-inverse-surface: #2d3133;
    --color-inverse-on-surface: #eff1f3;

    /* Outlines */
    --color-outline: #737686;
    --color-outline-variant: #c3c6d7;

    /* Primary (Medical Blue) */
    --color-primary: #004ac6;
    --color-on-primary: #ffffff;
    --color-primary-container: #2563eb;
    --color-on-primary-container: #eeefff;
    --color-primary-fixed: #dbe1ff;
    --color-primary-fixed-dim: #b4c5ff;
    --color-on-primary-fixed: #00174b;
    --color-on-primary-fixed-variant: #003ea8;
    --color-inverse-primary: #b4c5ff;

    /* Secondary */
    --color-secondary: #545f73;
    --color-on-secondary: #ffffff;
    --color-secondary-container: #d5e0f8;
    --color-on-secondary-container: #586377;
    --color-secondary-fixed: #d8e3fb;
    --color-secondary-fixed-dim: #bcc7de;
    --color-on-secondary-fixed: #111c2d;
    --color-on-secondary-fixed-variant: #3c475a;

    /* Tertiary */
    --color-tertiary: #943700;
    --color-on-tertiary: #ffffff;
    --color-tertiary-container: #bc4800;
    --color-on-tertiary-container: #ffede6;
    --color-tertiary-fixed: #ffdbcd;
    --color-tertiary-fixed-dim: #ffb596;
    --color-on-tertiary-fixed: #360f00;
    --color-on-tertiary-fixed-variant: #7d2d00;

    /* Error */
    --color-error: #ba1a1a;
    --color-on-error: #ffffff;
    --color-error-container: #ffdad6;
    --color-on-error-container: #93000a;

    /* Safety status semantics (used for safety chips, gauges, card accents) */
    --color-safe: #10b981;
    --color-safe-bg: #ecfdf5;
    --color-safe-text: #047857;
    --color-safe-border: #a7f3d0;

    --color-caution: #f59e0b;
    --color-caution-bg: #fffbeb;
    --color-caution-text: #b45309;
    --color-caution-border: #fde68a;

    --color-danger: #ef4444;
    --color-danger-bg: #fef2f2;
    --color-danger-text: #b91c1c;
    --color-danger-border: #fecaca;

    /* Category accent palette (cycled across the 11 additive categories) */
    --color-accent-red: #ef4444;
    --color-accent-red-bg: #fef2f2;
    --color-accent-red-text: #b91c1c;
    --color-accent-red-border: #fee2e2;

    --color-accent-orange: #f97316;
    --color-accent-orange-bg: #fff7ed;
    --color-accent-orange-text: #c2410c;
    --color-accent-orange-border: #ffedd5;

    --color-accent-green: #22c55e;
    --color-accent-green-bg: #f0fdf4;
    --color-accent-green-text: #15803d;
    --color-accent-green-border: #dcfce7;

    --color-accent-blue: #3b82f6;
    --color-accent-blue-bg: #eff6ff;
    --color-accent-blue-text: #1d4ed8;
    --color-accent-blue-border: #dbeafe;

    --color-accent-purple: #a855f7;
    --color-accent-purple-bg: #faf5ff;
    --color-accent-purple-text: #7e22ce;
    --color-accent-purple-border: #f3e8ff;

    --color-accent-indigo: #6366f1;
    --color-accent-indigo-bg: #eef2ff;
    --color-accent-indigo-text: #4338ca;
    --color-accent-indigo-border: #e0e7ff;

    --color-accent-teal: #14b8a6;
    --color-accent-teal-bg: #f0fdfa;
    --color-accent-teal-text: #0f766e;
    --color-accent-teal-border: #ccfbf1;

    /* Typography */
    --font-family-base: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

    --text-display-lg-size: 48px;
    --text-display-lg-line: 56px;
    --text-display-lg-weight: 700;
    --text-display-lg-tracking: -0.02em;

    --text-headline-lg-size: 32px;
    --text-headline-lg-line: 40px;
    --text-headline-lg-weight: 600;
    --text-headline-lg-tracking: -0.01em;

    --text-headline-lg-mobile-size: 24px;
    --text-headline-lg-mobile-line: 32px;
    --text-headline-lg-mobile-weight: 600;

    --text-headline-md-size: 24px;
    --text-headline-md-line: 32px;
    --text-headline-md-weight: 600;

    --text-title-lg-size: 20px;
    --text-title-lg-line: 28px;
    --text-title-lg-weight: 500;

    --text-body-lg-size: 18px;
    --text-body-lg-line: 28px;
    --text-body-lg-weight: 400;

    --text-body-md-size: 16px;
    --text-body-md-line: 24px;
    --text-body-md-weight: 400;

    --text-label-md-size: 14px;
    --text-label-md-line: 20px;
    --text-label-md-weight: 600;
    --text-label-md-tracking: 0.05em;

    --text-caption-size: 12px;
    --text-caption-line: 16px;
    --text-caption-weight: 400;

    /* Radius */
    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --radius-3xl: 1.5rem;
    --radius-full: 9999px;

    /* Spacing */
    --space-base: 8px;
    --container-max: 1280px;
    --gutter: 24px;
    --margin-mobile: 16px;
    --margin-desktop: 32px;

    /* Elevation */
    --shadow-card: 0px 4px 20px rgba(30, 41, 59, 0.05);
    --shadow-card-hover: 0px 8px 28px rgba(30, 41, 59, 0.09);
}