:root {
  --afp-font-ui: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --afp-font-heading: "Geist", "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  --afp-page-pad-x: clamp(14px, 2vw, 28px);
  --afp-page-pad-y: 14px;
  --afp-gap-xs: 10px;
  --afp-gap-sm: 14px;
  --afp-gap-md: 20px;
  --afp-gap-lg: 28px;
  --afp-gap-xl: 36px;

  --afp-radius-chip: 999px;
  --afp-radius-card: 28px;
  --afp-radius-panel: 30px;
  --afp-radius-soft: 22px;

  --afp-border-light: rgba(16, 24, 40, 0.08);
  --afp-border-brand: rgba(0, 95, 109, 0.18);

  --afp-text: #24323b;
  --afp-text-strong: #1c2a33;
  --afp-text-soft: #687783;
  --afp-kicker: #7f8d99;

  --afp-bg:
    radial-gradient(circle at 0% 10%, rgba(0, 95, 109, 0.12), transparent 24%),
    radial-gradient(circle at 100% 8%, rgba(255, 159, 10, 0.05), transparent 18%),
    linear-gradient(180deg, #eef4f8 0%, #ebf1f5 36%, #e8eff4 100%);

  --afp-surface:
    linear-gradient(180deg, rgba(255,255,255,0.96), rgba(244,249,252,0.94));
  --afp-surface-soft:
    linear-gradient(180deg, rgba(255,255,255,0.92), rgba(241,247,251,0.88));
  --afp-surface-chip:
    linear-gradient(180deg, rgba(255,255,255,0.92), rgba(244,248,251,0.88));
  --afp-surface-card:
    radial-gradient(circle at 0% 0%, rgba(0,95,109,0.045), transparent 40%),
    radial-gradient(circle at 100% 0%, rgba(255,159,10,0.025), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,0.96), rgba(243,248,251,0.92));
  --afp-surface-viewer:
    radial-gradient(circle at 100% 0%, rgba(0,95,109,0.05), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,0.96), rgba(243,248,252,0.93));

  --afp-shadow-sm:
    0 10px 24px rgba(2, 8, 23, 0.06),
    0 2px 8px rgba(0, 95, 109, 0.04);

  --afp-shadow-md:
    0 18px 42px rgba(2, 8, 23, 0.08),
    0 4px 18px rgba(0, 95, 109, 0.05),
    inset 0 1px 0 rgba(255,255,255,0.46);

  --afp-shadow-lg:
    0 28px 70px rgba(2, 8, 23, 0.10),
    0 10px 30px rgba(0, 95, 109, 0.07),
    0 0 0 1px rgba(255,255,255,0.34) inset;

  --afp-shadow-brand:
    0 26px 60px rgba(0, 95, 109, 0.10),
    0 12px 26px rgba(255, 159, 10, 0.04);

  --afp-primary:
    linear-gradient(135deg, #0f95a7 0%, #0a7281 100%);
  --afp-primary-text: #ffffff;
}

html[data-theme="dark"] {
  --afp-text: #eef3f6;
  --afp-text-strong: #f5f8fb;
  --afp-text-soft: #9ba8b4;
  --afp-kicker: #7f8f9d;

  --afp-border-light: rgba(50, 96, 116, 0.34);
  --afp-border-brand: rgba(46, 135, 161, 0.38);

  --afp-bg:
    radial-gradient(circle at 0% 12%, rgba(0, 95, 109, 0.28), transparent 20%),
    radial-gradient(circle at 100% 10%, rgba(255, 159, 10, 0.08), transparent 16%),
    linear-gradient(180deg, #050a10 0%, #060c13 42%, #050b12 100%);

  --afp-surface:
    linear-gradient(180deg, rgba(7,14,22,0.92), rgba(5,11,18,0.90));
  --afp-surface-soft:
    linear-gradient(180deg, rgba(7,14,22,0.88), rgba(5,10,16,0.86));
  --afp-surface-chip:
    linear-gradient(180deg, rgba(7,14,22,0.84), rgba(5,10,16,0.82));
  --afp-surface-card:
    radial-gradient(circle at 0% 0%, rgba(0,95,109,0.18), transparent 42%),
    radial-gradient(circle at 100% 0%, rgba(255,159,10,0.05), transparent 26%),
    linear-gradient(180deg, rgba(6,13,20,0.94), rgba(4,10,16,0.92));
  --afp-surface-viewer:
    radial-gradient(circle at 100% 0%, rgba(0,95,109,0.20), transparent 34%),
    linear-gradient(180deg, rgba(7,14,22,0.94), rgba(4,9,15,0.92));

  --afp-shadow-sm:
    0 12px 28px rgba(0,0,0,0.22),
    0 0 18px rgba(0,95,109,0.08);

  --afp-shadow-md:
    0 18px 42px rgba(0,0,0,0.28),
    0 0 24px rgba(0,95,109,0.10),
    inset 0 1px 0 rgba(255,255,255,0.04);

  --afp-shadow-lg:
    0 28px 72px rgba(0,0,0,0.34),
    0 0 32px rgba(0,95,109,0.12),
    inset 0 1px 0 rgba(255,255,255,0.05);

  --afp-shadow-brand:
    0 24px 58px rgba(0, 95, 109, 0.18),
    0 10px 24px rgba(255, 159, 10, 0.04);
}