/* === Remeet Design System Variables === */

:root {
  /* ── Colors ── */
  --color-primary: #2C3E6B;
  --color-primary-light: #7B8CC2;
  --color-primary-hover: #3A5090;

  --color-accent-warm: #C9A96E;
  --color-accent-rose: #D4A0A0;

  --color-bg-main: #F7F4F0;
  --color-bg-section: #EDE9E3;
  --color-bg-deep: #1A2340;

  --color-text: #3A3A3A;
  --color-text-sub: #7A7A7A;
  --color-white: #FFFFFF;

  /* ── Gradients ── */
  --gradient-hero: linear-gradient(180deg, #1A2340 0%, #2C3E6B 60%, #F7F4F0 100%);
  --gradient-accent: linear-gradient(135deg, #2C3E6B 0%, #7B8CC2 100%);
  --gradient-light: radial-gradient(circle, rgba(201, 169, 110, 0.3) 0%, transparent 70%);
  --gradient-divider: linear-gradient(90deg, #C9A96E, transparent);

  /* ── Typography ── */
  --font-main: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif: 'Noto Serif KR', Georgia, serif;

  --text-hero: clamp(32px, 5vw, 48px);
  --text-section-title: clamp(26px, 4vw, 36px);
  --text-subtitle: clamp(20px, 3vw, 24px);
  --text-body: clamp(16px, 2vw, 17px);
  --text-caption: clamp(13px, 1.5vw, 14px);
  --text-quote: clamp(18px, 2.5vw, 20px);

  --weight-bold: 700;
  --weight-semibold: 600;
  --weight-regular: 400;
  --weight-light: 300;

  --line-height-tight: 1.4;
  --line-height-normal: 1.8;
  --letter-spacing: -0.02em;

  /* ── Spacing ── */
  --section-padding: 120px;
  --section-padding-mobile: 80px;
  --content-max-width: 1200px;
  --content-padding: 40px;
  --content-padding-mobile: 20px;

  --gap-large: 64px;
  --gap-medium: 48px;
  --gap-small: 24px;
  --gap-xs: 16px;

  /* ── Border Radius ── */
  --radius-card: 16px;
  --radius-button: 50px;
  --radius-small: 8px;
  --radius-round: 50%;

  /* ── Shadows ── */
  --shadow-card: 0 2px 16px rgba(0, 0, 0, 0.06);
  --shadow-card-hover: 0 8px 32px rgba(0, 0, 0, 0.1);
  --shadow-button: 0 4px 20px rgba(44, 62, 107, 0.3);
  --shadow-button-hover: 0 6px 28px rgba(44, 62, 107, 0.4);

  /* ── Transitions ── */
  --transition-fast: 0.3s ease;
  --transition-default: 0.4s ease;
  --transition-slow: 0.8s ease-out;
  --transition-reveal: 0.8s ease-out;

  /* ── Z-index ── */
  --z-header: 100;
  --z-sticky-cta: 90;
  --z-modal: 200;
  --z-toast: 300;
}

/* ── Mobile Overrides ── */
@media (max-width: 767px) {
  :root {
    --section-padding: var(--section-padding-mobile);
    --content-padding: var(--content-padding-mobile);
    --gap-large: 40px;
    --gap-medium: 32px;
  }
}