/* ==========================================================================
   BorderPlus design tokens — colour, type, spacing, radii, shadows, motion.
   Source of truth: BorderPlus Design System (tokens/*).
   Safe to replace wholesale if your site already loads the BorderPlus tokens.
   ========================================================================== */
:root {
  /* Brand */
  --bp-navy: #121640;
  --bp-navy-button: #1f2460;
  --bp-sky: #42C8F4;
  --bp-blue: #3387F5;
  --bp-teal: #00B8A9;

  /* Derived (documented, not new brand colours) */
  --bp-sky-tint: #e0f6ff;
  --bp-teal-ink: #00796F;
  --bp-grad-teal-1: #c9f0ec;

  /* Neutrals */
  --bp-white: #FFFFFF;
  --bp-gray-50: #F9FAFB;
  --bp-gray-200: #E5E7EB;
  --bp-gray-300: #D1D5DB;
  --bp-gray-400: #9CA3AF;
  --bp-gray-500: #6B7280;
  --bp-gray-800: #1F2937;
  --bp-hairline: #DCE1EB;

  /* Surfaces */
  --bp-bg-secondary: #edfbfe;
  --bp-bg-app: #dcf7ff;
  --bp-error: #C30909;

  /* Semantic aliases — use these */
  --text-primary: var(--bp-navy);
  --text-body: var(--bp-gray-800);
  --text-secondary: var(--bp-gray-500);
  --text-tertiary: var(--bp-gray-400);
  --text-link: var(--bp-navy);
  --surface-card: var(--bp-white);
  --surface-sunken: var(--bp-gray-50);
  --surface-accent-soft: var(--bp-bg-secondary);
  --border-hairline: var(--bp-hairline);
  --border-strong: var(--bp-gray-300);
  --accent: var(--bp-sky);

  /* Type */
  --font-sans: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  /* Spacing */
  --sp-xs: 4px;  --sp-sm: 8px;  --sp-md: 16px;
  --sp-lg: 24px; --sp-xl: 32px; --sp-2xl: 48px; --sp-3xl: 64px;

  /* Radii — BorderPlus is a very rounded system */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-card: 15px;
  --radius-lg: 20px;
  --radius-sheet: 32px;
  --radius-pill: 999px;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-card: 0 2px 3.84px rgba(0,0,0,0.12);
  --shadow-lift: 0 10px 30px rgba(18,22,64,0.10);
  --shadow-float: 0 0 30px rgba(119,119,119,0.2);

  /* Motion — one easing does almost all the work */
  --ease-out-soft: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 0.25s;
  --dur-mid: 0.35s;
  --dur-slow: 0.55s;
  --dur-reveal: 0.9s;
}

/* Outfit — self-hosted. Swap to .woff2 if you have it; .ttf ships here for portability. */
@font-face { font-family:'Outfit'; src:url('../fonts/Outfit-Light.ttf') format('truetype');    font-weight:300; font-display:swap; }
@font-face { font-family:'Outfit'; src:url('../fonts/Outfit-Regular.ttf') format('truetype');  font-weight:400; font-display:swap; }
@font-face { font-family:'Outfit'; src:url('../fonts/Outfit-Medium.ttf') format('truetype');   font-weight:500; font-display:swap; }
@font-face { font-family:'Outfit'; src:url('../fonts/Outfit-SemiBold.ttf') format('truetype'); font-weight:600; font-display:swap; }