// English comments by default for Drupal.org/community code style.

// Base colors.
$color-white: #fff;
$color-navy: #0f172a;

// Surface colors.
$color-page-bg: #f8fafc;
$color-panel-bg: $color-white;
$color-card-bg: $color-white;
$color-surface-muted: #f8fafc;
$color-surface-soft: #f3f6fb;

// Border colors.
$color-border: #dbe3ee;
$color-border-soft: #e9eef5;
$color-border-strong: #c7d3e3;

// Text colors.
$color-text: #1f2937;
$color-text-muted: #667085;
$color-text-soft: #475467;
$color-text-strong: #101828;

// Brand and semantic colors.
$color-blue: #5b9cff;
$color-blue-strong: #2f6fe4;
$color-blue-fill: rgba(91, 156, 255, 0.12);
$color-orange: #f59e0b;
$color-orange-strong: #b45309;
$color-orange-fill: rgba(245, 158, 11, 0.14);
$color-red: #ef4444;
$color-red-strong: #b42318;
$color-red-fill: rgba(239, 68, 68, 0.14);
$color-green: #22c55e;
$color-green-strong: #15803d;
$color-green-fill: rgba(34, 197, 94, 0.14);

// Semantic alpha helpers.
$color-blue-tint-04: rgba(91, 156, 255, 0.04);
$color-blue-tint-05: rgba(91, 156, 255, 0.05);
$color-blue-tint-08: rgba(91, 156, 255, 0.08);
$color-blue-tint-10: rgba(91, 156, 255, 0.1);
$color-blue-strong-tint-28: rgba(47, 111, 228, 0.28);
$color-blue-strong-tint-50: rgba(47, 111, 228, 0.5);
$color-green-tint-08: rgba(34, 197, 94, 0.08);
$color-green-tint-12: rgba(34, 197, 94, 0.12);
$color-orange-tint-10: rgba(245, 158, 11, 0.1);
$color-orange-tint-12: rgba(245, 158, 11, 0.12);
$color-orange-tint-14: rgba(245, 158, 11, 0.14);
$color-red-tint-10: rgba(239, 68, 68, 0.1);
$color-red-tint-12: rgba(239, 68, 68, 0.12);
$color-red-tint-14: rgba(239, 68, 68, 0.14);

// Overlay and modal colors.
$color-overlay: rgba(15, 23, 42, 0.56);
$color-modal-shadow: rgba(15, 23, 42, 0.24);
$color-modal-backdrop: rgba(15, 23, 42, 0.45);

// Status colors.
$color-status-success-bg: rgba(34, 197, 94, 0.14);
$color-status-success-text: #15803d;
$color-status-info-bg: rgba(59, 130, 246, 0.14);
$color-status-info-text: #1d4ed8;
$color-status-warning-bg: rgba(245, 158, 11, 0.14);
$color-status-warning-text: #b45309;
$color-status-error-bg: rgba(239, 68, 68, 0.14);
$color-status-error-text: #b91c1c;

// Dataset colors.
$color-dataset-slow-bg: rgba(245, 158, 11, 0.1);
$color-dataset-slow-text: #b45309;
$color-dataset-ajax-bg: rgba(59, 130, 246, 0.1);
$color-dataset-ajax-text: #1d4ed8;
$color-dataset-external-bg: rgba(16, 185, 129, 0.1);
$color-dataset-external-text: #047857;

// Payload colors.
$color-payload-bg: $color-navy;
$color-payload-text: #e2e8f0;

// Chart colors.
$color-chart-hit: $color-green;
$color-chart-miss: $color-blue;
$color-chart-uncacheable: $color-orange;
$color-chart-empty: $color-border-soft;
$color-gauge-track: $color-border-soft;
$color-gauge-fill: $color-orange;
$color-progress-start: #9fcf7a;
$color-progress-mid: $color-orange;
$color-progress-end: #ef8a62;

// Radius tokens.
$radius-panel: 8px;
$radius-card: 14px;
$radius-modal: 22px;
$radius-pill: 999px;

// Shadow tokens.
$shadow-soft: 0 1px 2px rgba(16, 24, 40, 0.04);
$shadow-modal: 0 24px 80px $color-modal-shadow;

// Spacing tokens.
$spacing-xs: 4px;
$spacing-sm: 8px;
$spacing-md: 16px;
$spacing-lg: 24px;
$spacing-xl: 32px;

// Typography tokens.
$font-size-xs: 12px;
$font-size-sm: 13px;
$font-size-md: 14px;
$font-size-lg: 18px;
$font-size-xl: 28px;
$font-size-xxl: 34px;
