/*
 * frilabs design tokens — single source of truth for colors, radii and type.
 * Monochrome brand: black and white carry the identity; hue is reserved for status.
 * Light is the default; dark follows the OS unless data-theme pins a mode.
 */

:root {
  /* Neutral scale (pure gray, no tint) */
  --fl-gray-0: #ffffff;
  --fl-gray-50: #fafafa;
  --fl-gray-100: #f5f5f5;
  --fl-gray-200: #e5e5e5;
  --fl-gray-300: #d4d4d4;
  --fl-gray-400: #a3a3a3;
  --fl-gray-500: #737373;
  --fl-gray-550: #7a7a7a;
  --fl-gray-600: #525252;
  --fl-gray-700: #404040;
  --fl-gray-800: #262626;
  --fl-gray-900: #171717;
  --fl-gray-950: #0a0a0a;
  --fl-gray-1000: #000000;

  /* Surfaces */
  --fl-bg: var(--fl-gray-0);
  --fl-surface: var(--fl-gray-50);
  --fl-surface-inset: var(--fl-gray-100);

  /* Text */
  --fl-text: var(--fl-gray-950);
  --fl-text-secondary: var(--fl-gray-600);
  --fl-text-muted: var(--fl-gray-500);

  /* Lines */
  --fl-border: var(--fl-gray-200);
  --fl-border-strong: var(--fl-gray-300);

  /* Accent = ink. Primary actions invert the page. */
  --fl-accent: var(--fl-gray-950);
  --fl-accent-hover: var(--fl-gray-800);
  --fl-on-accent: var(--fl-gray-0);

  /* Status — the only colors in the system */
  --fl-success: #15803d;
  --fl-success-soft: #e8f5ec;
  --fl-warning: #b45309;
  --fl-warning-soft: #fdf3e3;
  --fl-danger: #dc2626;
  --fl-danger-soft: #fdecec;
  --fl-info: #2563eb;
  --fl-info-soft: #e9f0fd;

  --fl-focus-ring: 0 0 0 2px var(--fl-bg), 0 0 0 4px var(--fl-text);

  /* Shape */
  --fl-radius-xs: 6px;
  --fl-radius-sm: 8px;
  --fl-radius-md: 12px;
  --fl-radius-lg: 16px;
  --fl-radius-pill: 999px;

  /* Type */
  --fl-font-sans: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --fl-font-mono: "Source Code Pro", ui-monospace, "SF Mono", Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fl-bg: var(--fl-gray-1000);
    --fl-surface: var(--fl-gray-950);
    --fl-surface-inset: var(--fl-gray-900);
    --fl-text: var(--fl-gray-50);
    --fl-text-secondary: var(--fl-gray-400);
    --fl-text-muted: var(--fl-gray-550);
    --fl-border: var(--fl-gray-800);
    --fl-border-strong: var(--fl-gray-700);
    --fl-accent: var(--fl-gray-50);
    --fl-accent-hover: var(--fl-gray-200);
    --fl-on-accent: var(--fl-gray-1000);
    --fl-success: #4ade80;
    --fl-success-soft: #0d2416;
    --fl-warning: #fbbf24;
    --fl-warning-soft: #2a1f08;
    --fl-danger: #f87171;
    --fl-danger-soft: #2c1111;
    --fl-info: #60a5fa;
    --fl-info-soft: #0f1b30;
  }
}

:root[data-theme="dark"] {
  --fl-bg: var(--fl-gray-1000);
  --fl-surface: var(--fl-gray-950);
  --fl-surface-inset: var(--fl-gray-900);
  --fl-text: var(--fl-gray-50);
  --fl-text-secondary: var(--fl-gray-400);
  --fl-text-muted: var(--fl-gray-550);
  --fl-border: var(--fl-gray-800);
  --fl-border-strong: var(--fl-gray-700);
  --fl-accent: var(--fl-gray-50);
  --fl-accent-hover: var(--fl-gray-200);
  --fl-on-accent: var(--fl-gray-1000);
  --fl-success: #4ade80;
  --fl-success-soft: #0d2416;
  --fl-warning: #fbbf24;
  --fl-warning-soft: #2a1f08;
  --fl-danger: #f87171;
  --fl-danger-soft: #2c1111;
  --fl-info: #60a5fa;
  --fl-info-soft: #0f1b30;
}