:root {
  /* Colors */
  --color-bg: #fffaf8;
  --color-bg-soft: #fff3f5;
  --color-surface: #ffffff;
  --color-surface-soft: #fff7f8;

  --color-primary: #ff2f75;
  --color-primary-dark: #e91e63;
  --color-primary-light: #ff6b8f;

  --color-coral: #ff5a3d;
  --color-green: #08a957;
  --color-green-dark: #028947;

  --color-navy: #07143f;
  --color-text: #111936;
  --color-text-soft: #5f6275;
  --color-muted: #8d90a3;

  --color-border: #ececf2;
  --color-border-strong: #dadce8;

  --color-white: #ffffff;
  --color-black: #000000;

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, #ff5533 0%, #ff2674 100%);
  --gradient-green: linear-gradient(135deg, #08b864 0%, #01944c 100%);

  /* Typography */
  --font-main: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-title: Georgia, "Times New Roman", serif;

  /* Responsive font sizes */
  --fs-xs: clamp(0.72rem, 0.68rem + 0.2vw, 0.82rem);
  --fs-sm: clamp(0.82rem, 0.78rem + 0.25vw, 0.95rem);
  --fs-base: clamp(0.95rem, 0.88rem + 0.35vw, 1.08rem);
  --fs-md: clamp(1.08rem, 1rem + 0.45vw, 1.25rem);
  --fs-lg: clamp(1.35rem, 1.15rem + 1vw, 1.75rem);
  --fs-xl: clamp(2rem, 1.55rem + 2vw, 2.9rem);
  --fs-xxl: clamp(2.35rem, 1.75rem + 2.8vw, 3.6rem);

  /* Spacing */
  --space-1: clamp(0.25rem, 0.2rem + 0.3vw, 0.4rem);
  --space-2: clamp(0.5rem, 0.45rem + 0.4vw, 0.75rem);
  --space-3: clamp(0.75rem, 0.65rem + 0.6vw, 1rem);
  --space-4: clamp(1rem, 0.85rem + 0.8vw, 1.35rem);
  --space-5: clamp(1.25rem, 1rem + 1vw, 1.8rem);
  --space-6: clamp(1.5rem, 1.15rem + 1.3vw, 2.2rem);
  --space-7: clamp(2rem, 1.45rem + 2vw, 3rem);

  /* Radius */
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-full: 999px;

  /* Shadow */
  --shadow-soft: 0 10px 28px rgba(7, 20, 63, 0.08);
  --shadow-card: 0 14px 34px rgba(7, 20, 63, 0.1);
  --shadow-button: 0 12px 26px rgba(255, 47, 117, 0.28);

  /* Layout */
  --mobile-max-width: 430px;
  --page-inline-padding: clamp(1rem, 4.5vw, 1.6rem);

  /* iPhone safe area */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}