/* ═══════════════════════════════════════════════
   FLOW FREEDIVING — Design Tokens
   Premium Dark Ocean Theme
   ═══════════════════════════════════════════════ */

:root {
  /* ── Colors ── */
  --deep-navy:        #080f1e;
  --dark-ocean:       #0c1a2e;
  --midnight:         #111f38;
  --ocean-mid:        #163050;
  --ocean-blue:       #1c4b73;
  --sky-blue:         #4da8da;
  --sky-blue-light:   #7ec8e3;
  --white:            #ffffff;
  --off-white:        #f0f4f8;
  --light-gray:       #c8d6e5;
  --mid-gray:         #7f8c9b;

  /* Text */
  --text-primary:     rgba(255, 255, 255, 0.95);
  --text-secondary:   rgba(255, 255, 255, 0.55);
  --text-tertiary:    rgba(255, 255, 255, 0.35);
  --text-dark:        #0c1a2e;

  /* Accent */
  --accent:           #4da8da;
  --accent-glow:      rgba(77, 168, 218, 0.15);
  --accent-hover:     #3b96c8;

  /* Kakao */
  --kakao-bg:         #FEE500;
  --kakao-text:       #191919;

  /* Naver */
  --naver-bg:         #03C75A;
  --naver-text:       #ffffff;

  /* Surface */
  --surface-glass:    rgba(12, 26, 46, 0.7);
  --surface-card:     rgba(17, 31, 56, 0.6);
  --surface-hover:    rgba(22, 48, 80, 0.5);
  --border-subtle:    rgba(77, 168, 218, 0.12);
  --border-hover:     rgba(77, 168, 218, 0.3);

  /* Overlay */
  --overlay-dark:     rgba(8, 15, 30, 0.6);
  --overlay-deeper:   rgba(8, 15, 30, 0.85);

  /* ── Typography ── */
  --font-primary:     'Pretendard', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display:     'Pretendard', 'Noto Sans KR', sans-serif;

  --fw-light:         300;
  --fw-regular:       400;
  --fw-medium:        500;
  --fw-semibold:      600;
  --fw-bold:          700;
  --fw-extrabold:     800;

  /* Font Sizes — fluid clamp */
  --fs-display:       clamp(2.5rem, 5vw, 4rem);
  --fs-h1:            clamp(2rem, 4vw, 3.25rem);
  --fs-h2:            clamp(1.75rem, 3.5vw, 2.5rem);
  --fs-h3:            clamp(1.25rem, 2vw, 1.5rem);
  --fs-h4:            clamp(1rem, 1.5vw, 1.125rem);
  --fs-body:          1rem;
  --fs-body-sm:       0.9375rem;
  --fs-caption:       0.8125rem;
  --fs-small:         0.75rem;

  --lh-tight:         1.3;
  --lh-normal:        1.6;
  --lh-relaxed:       1.8;

  --ls-tight:         -0.02em;
  --ls-normal:        0;
  --ls-wide:          0.05em;
  --ls-wider:         0.12em;

  /* ── Spacing (4px base) ── */
  --space-1:          4px;
  --space-2:          8px;
  --space-3:          12px;
  --space-4:          16px;
  --space-5:          20px;
  --space-6:          24px;
  --space-8:          32px;
  --space-10:         40px;
  --space-12:         48px;
  --space-16:         64px;
  --space-20:         80px;
  --space-24:         96px;
  --space-32:         128px;

  /* Section padding */
  --section-py:       clamp(80px, 10vw, 140px);
  --section-px:       clamp(20px, 5vw, 40px);

  /* ── Layout ── */
  --container-max:    1200px;
  --container-narrow: 800px;
  --header-height:    72px;

  /* ── Border Radius ── */
  --radius-sm:        6px;
  --radius-md:        12px;
  --radius-lg:        20px;
  --radius-xl:        28px;
  --radius-full:      9999px;

  /* ── Shadows ── */
  --shadow-sm:        0 2px 8px rgba(0, 0, 0, 0.15);
  --shadow-md:        0 4px 20px rgba(0, 0, 0, 0.25);
  --shadow-lg:        0 8px 40px rgba(0, 0, 0, 0.35);
  --shadow-glow:      0 0 30px rgba(77, 168, 218, 0.1);
  --shadow-card:      0 4px 24px rgba(0, 0, 0, 0.2);

  /* ── Transitions ── */
  --ease-smooth:      cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-out:         cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-in-out:      cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:      cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast:    0.2s;
  --duration-normal:  0.35s;
  --duration-slow:    0.5s;
  --duration-slower:  0.8s;

  --transition-base:  var(--duration-normal) var(--ease-smooth);
  --transition-fast:  var(--duration-fast) var(--ease-smooth);
  --transition-slow:  var(--duration-slow) var(--ease-smooth);

  /* ── Light Theme (for sections below hero) ── */
  --light-bg:           #f9fafb;
  --light-bg-alt:       #ffffff;
  --light-surface:      #ffffff;
  --light-surface-hover: #f3f4f6;
  --light-border:       #e5e7eb;
  --light-border-hover: #d1d5db;
  --light-text-primary: #111827;
  --light-text-secondary: #4b5563;
  --light-text-tertiary: #9ca3af;
  --light-accent:       #1c4b73;
  --light-accent-light: rgba(28, 75, 115, 0.08);
  --light-shadow-sm:    0 1px 3px rgba(0, 0, 0, 0.04);
  --light-shadow-md:    0 4px 12px rgba(0, 0, 0, 0.06);
  --light-shadow-lg:    0 8px 30px rgba(0, 0, 0, 0.08);
  --light-shadow-card:  0 2px 8px rgba(0, 0, 0, 0.04);

  /* ── Z-Index ── */
  --z-base:           1;
  --z-dropdown:       100;
  --z-sticky:         200;
  --z-header:         500;
  --z-drawer:         600;
  --z-overlay:        700;
  --z-modal:          800;
  --z-lightbox:       900;
  --z-floating:       1000;
}