:root {
  /* Brand neutrals */
  --c2f-bg: #f7f9fb;
  --c2f-surface: #ffffff;
  --c2f-text: #10172a;
  --c2f-muted: #64748b;
  --c2f-border: #e5e7eb;

  /* Radii & shadows */
  --c2f-radius-xs: 8px;
  --c2f-radius-sm: 12px;
  --c2f-radius-md: 16px;
  --c2f-radius-lg: 20px;
  --c2f-shadow-sm: 0 2px 8px rgba(16,23,42,.06);
  --c2f-shadow-md: 0 6px 16px rgba(16,23,42,.08);
  --c2f-shadow-lg: 0 12px 28px rgba(16,23,42,.12);

  /* Spacing scale (t-shirt sizes) */
  --c2f-space-1: 4px;
  --c2f-space-2: 8px;
  --c2f-space-3: 12px;
  --c2f-space-4: 16px;
  --c2f-space-5: 20px;
  --c2f-space-6: 24px;
  --c2f-space-8: 32px;
  --c2f-space-10: 40px;
  --c2f-space-12: 48px;

  /* Typography */
  --c2f-font-sans: Inter, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  --c2f-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  --c2f-lh-tight: 1.15;
  --c2f-lh-normal: 1.35;
  --c2f-lh-relaxed: 1.6;

  /* Semantics */
  --c2f-ok: #16a34a;
  --c2f-warn: #f59e0b;
  --c2f-err: #dc2626;

  /* Ocean — default */
  --c2f-g1: #00B4DB;
  --c2f-g2: #0083B0;
  --c2f-accent: #2563eb;
  --c2f-link: #1d4ed8;
  --c2f-focus: rgba(37, 99, 235, 0.25);
}

/* Sunset theme overrides */
.theme-sunset {
  --c2f-g1: #FF512F;
  --c2f-g2: #DD2476;
  --c2f-accent: #ea580c;
  --c2f-link: #c2410c;
  --c2f-focus: rgba(234, 88, 12, 0.25);
}

/* Helpful utility classes (optional) */
.c2f-btn {
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 16px;border-radius:var(--c2f-radius-md);
  border:1px solid transparent;cursor:pointer;font-weight:700;
  box-shadow:var(--c2f-shadow-sm);
}
.c2f-btn-primary {
  background:#fff;color:#1e3a8a;
}
.c2f-card {
  background:var(--c2f-surface);border:1px solid var(--c2f-border);
  border-radius:var(--c2f-radius-lg);box-shadow:var(--c2f-shadow-md);
}
.c2f-gradient {
  background: linear-gradient(135deg, var(--c2f-g1), var(--c2f-g2));
}
.c2f-focusable:focus {
  outline:3px solid var(--c2f-focus);
  outline-offset:2px;
}
/* (dup) Kill legacy switches early in cascade */
.theme-switch, .theme-switcher, .toggle-theme, .mode-toggle, .dark-mode-toggle,
.c2f-theme-switch, [data-theme-toggle], #theme-switch, #themeSwitch, #darkSwitch,
input[type="checkbox"][id*="theme" i], input[type="checkbox"][name*="theme" i],
label[for*="theme" i] { display:none !important; }
#hero::after, .hero::after{
  height: clamp(42px, 5.5vw, 88px);
  transform: translateX(-50%) skewY(-6deg);
}