/*
 * Organized Freight — canonical design tokens
 *
 * Single source of truth for the brand palette, radius scale, shadows, and
 * type. Every tool subdomain links this from the apex domain:
 *
 *   <link rel="stylesheet" href="https://organizedfreight.com/of-tokens.css">
 *
 * Tools keep their own local variable names and alias them to these, e.g.:
 *
 *   :root { --text: var(--of-text-primary); --radius: var(--of-radius); }
 *
 * That keeps each tool's diff small while ending the drift — before this file
 * the same twelve hex values were re-declared by hand in five codebases under
 * five different naming schemes.
 *
 * Values match app-organized-freight/tailwind.config.js and src/index.css.
 * If you change a value here, change it there too.
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
  /* ── Surfaces ── */
  --of-bg-primary: #0b1220;
  --of-bg-secondary: #111827;
  --of-panel: #172033;
  --of-card: #1e293b;
  --of-card-hover: #243044;

  /* ── Lines ── */
  --of-border: rgba(255, 255, 255, 0.08);
  --of-border-mid: rgba(255, 255, 255, 0.12);
  --of-border-strong: rgba(255, 255, 255, 0.2);

  /* ── Brand ── */
  --of-blue: #3b82f6;
  --of-blue-light: #60a5fa;
  --of-blue-dark: #2563eb;
  --of-cyan: #22d3ee;

  /* ── Status ── */
  --of-green: #10b981;
  --of-orange: #f59e0b;
  --of-red: #ef4444;

  /* ── Text ── */
  --of-text-primary: #e5e7eb;
  --of-text-secondary: #94a3b8;
  --of-text-muted: #64748b;

  /* ── Shape ── */
  --of-radius: 16px;
  --of-radius-sm: 10px;
  --of-radius-xs: 7px;
  --of-radius-pill: 999px;

  /* ── Depth ── */
  --of-shadow-soft: 0 8px 24px rgba(0, 0, 0, 0.25);
  --of-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.35);
  --of-shadow-glow: 0 0 0 1px rgba(59, 130, 246, 0.35),
    0 8px 24px rgba(59, 130, 246, 0.15);

  /* ── Motion ── */
  --of-transition: all 0.2s ease;

  /* ── Type ── */
  --of-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ── Layout ── */
  --of-max-width: 1400px;

  /* ── Gradients ── */
  --of-grad-brand: linear-gradient(135deg, #3b82f6 0%, #22d3ee 100%);
}