/* variables.css — design tokens */
:root {
  /* Brand blues (blue = trust) */
  --brand-50:  #EFF6FF;
  --brand-100: #DBEAFE;
  --brand-200: #BFDBFE;
  --brand-300: #93C5FD;
  --brand-400: #60A5FA;
  --brand-500: #3B82F6;
  --brand-600: #2563EB;  /* primary */
  --brand-700: #1D4ED8;
  --brand-800: #1E40AF;
  --brand-900: #1E3A8A;

  /* Neutrals */
  --ink-900: #0F172A;
  --ink-800: #1E293B;
  --ink-700: #334155;
  --ink-600: #475569;
  --ink-500: #64748B;
  --ink-400: #94A3B8;
  --ink-300: #CBD5E1;
  --ink-200: #E2E8F0;
  --ink-100: #F1F5F9;
  --ink-50:  #F8FAFC;
  --white:   #FFFFFF;

  /* Semantic */
  --success: #16A34A;
  --bg:        var(--white);
  --bg-soft:   var(--ink-50);
  --bg-alt:    var(--brand-50);
  --text:      var(--ink-800);
  --text-soft: var(--ink-600);
  --heading:   var(--ink-900);

  /* Radii */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .08);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, .08), 0 2px 6px rgba(15, 23, 42, .06);
  --shadow-lg: 0 18px 40px rgba(15, 23, 42, .14), 0 8px 16px rgba(15, 23, 42, .08);
  --shadow-blue: 0 12px 30px rgba(37, 99, 235, .28);

  /* Type */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Layout */
  --container: 1140px;
  --container-narrow: 760px;
  --gutter: 24px;
  --nav-h: 72px;
}