/*
 * SETTINGS — compare (light)
 * ==========================
 * Slim token set mirroring sitespeed.io's design language. Component
 * files reach only for these custom properties so future palette
 * changes happen in one place.
 */

:root {
  /* Core palette */
  --color-blue:           #0095d2;
  --color-blue-dark:      #0073a6;
  --color-blue-tint:      #e6f4fa;

  /* Surface / neutral scale */
  --color-surface:        #f7f9fb; /* page background */
  --color-surface-card:   #ffffff;
  --color-border:         #e5e7eb;
  --color-border-strong:  #d1d5db;

  /* Text */
  --color-text:           #111827;
  --color-text-secondary: #4b5563;
  --color-text-muted:     #6b7280;

  /* Status (WCAG AA on white) */
  --color-ok:             #15803d;
  --color-ok-bg:          #f0fdf4;
  --color-ok-border:      #bbf7d0;
  --color-warning:        #a16207;
  --color-warning-bg:     #fefce8;
  --color-warning-border: #fde68a;
  --color-error:          #b91c1c;
  --color-error-bg:       #fef2f2;
  --color-error-border:   #fecaca;
  --color-info:           var(--color-blue-dark);
  --color-info-bg:        var(--color-blue-tint);
  --color-info-border:    #bae6fd;

  /* Typography — system stack, no web fonts */
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;

  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;

  /* Base */
  --base-line-height: 1.55;

  /* Radius / shadow / motion */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 1px 3px rgba(15, 23, 42, 0.06),
               0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 4px 12px rgba(15, 23, 42, 0.08);

  --motion-fast: 120ms ease-out;
  --motion-med:  180ms ease-out;
}