@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;1,400&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600&display=swap');

:root {
  /* ── Backgrounds ─────────────────────────────── */
  --bg-base:    #FAFAF8;   /* page base — warm off-white */
  --bg-warm:    #F5F2EE;   /* alternate sections — cream */
  --bg-surface: #FFFFFF;   /* cards, panels */
  --bg-overlay: #FFF8F0;   /* accent-tinted surface */

  /* ── Primary Brand — CASS Orange ─────────────── */
  --accent:        #E8621A;
  --accent-light:  #F47B35;
  --accent-subtle: rgba(232, 98, 26, 0.08);
  --accent-warm:   #FFF3EC;

  /* ── Secondary — Deep Teal ───────────────────── */
  --secondary:       #1A4A5C;
  --secondary-light: #2A6A80;

  /* ── Text ────────────────────────────────────── */
  --text-primary:   #1C1C1E;
  --text-body:      #3D3D3D;
  --text-secondary: #6B6B6B;
  --text-inverse:   #FFFFFF;

  /* ── Borders ─────────────────────────────────── */
  --border-subtle:  rgba(0, 0, 0, 0.07);
  --border-default: rgba(0, 0, 0, 0.12);

  /* ── Semantic ────────────────────────────────── */
  --success: #22C55E;
  --info:    #3B82F6;

  /* ── Typography ──────────────────────────────── */
  --font-display: 'Lora', Georgia, serif;
  --font-body:    'DM Sans', system-ui, sans-serif;

  /* ── Spacing ─────────────────────────────────── */
  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  2rem;
  --space-lg:  4rem;
  --space-xl:  7rem;
  --space-2xl: 10rem;

  /* ── Fluid Text ──────────────────────────────── */
  --text-sm:      clamp(0.875rem, 1.5vw, 1rem);
  --text-base:    clamp(1rem, 2vw, 1.125rem);
  --text-lg:      clamp(1.125rem, 2.5vw, 1.375rem);
  --text-xl:      clamp(1.5rem, 3.5vw, 2rem);
  --text-display: clamp(2.25rem, 5.5vw, 3.75rem);

  /* ── Animation ───────────────────────────────── */
  --ease-out:       cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast:  200ms;
  --duration-base:  400ms;
}