/* ============================================
   Design Tokens — EY보컬스튜디오
   ============================================ */

@font-face {
  font-family: "Pretendard";
  src: url("../assets/fonts/PretendardVariable.subset.woff2") format("woff2-variations");
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Colors ---- */
  --color-charcoal:    #1B2A4A;
  --color-charcoal-light: #2D4A6F;
  --color-gold:        #4A82A0;
  --color-gold-light:  #5C94B2;
  --color-gold-dark:   #3A6F8A;
  --color-cta-bg:      #2B6680;
  --color-cream:       #FAFBFC;
  --color-rose:        #A3B8C8;
  --color-gray:        #5A6B7D;
  --color-gray-light:  #8C9AAF;
  --color-sand:        #F0F2F5;
  --color-white:       #FFFFFF;
  --color-success:     #5B8C6A;
  --color-error:       #C45B5B;
  --color-kakao:       #FEE500;
  --color-kakao-text:  #3C1E1E;
  --color-cream-glass: rgba(250, 251, 252, 0.82);
  --color-cream-glass-strong: rgba(250, 251, 252, 0.94);
  --color-charcoal-overlay: rgba(18, 30, 53, 0.82);
  --color-gold-20: rgba(74, 130, 160, 0.18);
  --color-border: rgba(27, 42, 74, 0.08);
  --color-border-strong: rgba(27, 42, 74, 0.14);
  --color-white-08: rgba(255, 255, 255, 0.08);
  --color-white-10: rgba(255, 255, 255, 0.1);
  --color-white-20: rgba(255, 255, 255, 0.2);
  --color-white-30: rgba(255, 255, 255, 0.3);
  --color-white-50: rgba(255, 255, 255, 0.5);
  --color-white-60: rgba(255, 255, 255, 0.6);
  --color-white-65: rgba(255, 255, 255, 0.65);
  --color-white-75: rgba(255, 255, 255, 0.75);

  /* ---- Typography ---- */
  --font-primary: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --font-display: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;

  --text-display:  clamp(2.25rem, 5vw, 3.5rem);
  --text-h1:       clamp(1.75rem, 3.5vw, 2.5rem);
  --text-h2:       clamp(1.375rem, 2.5vw, 1.75rem);
  --text-h3:       clamp(1.125rem, 2vw, 1.25rem);
  --text-body:     clamp(0.9375rem, 1.5vw, 1rem);
  --text-small:    0.875rem;
  --text-xs:       0.75rem;

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

  /* ---- Spacing (8px grid) ---- */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;
  --space-32:  8rem;

  /* ---- Layout ---- */
  --container-max: 1200px;
  --container-px:  var(--space-4);
  --nav-height:    72px;

  /* ---- Borders ---- */
  --radius-sm:  4px;
  --radius-md:  10px;
  --radius-lg:  24px;
  --radius-full: 9999px;

  /* ---- Shadows ---- */
  --shadow-sm:  0 6px 18px rgba(27, 42, 74, 0.05);
  --shadow-md:  0 16px 40px rgba(27, 42, 74, 0.08);
  --shadow-lg:  0 28px 60px rgba(27, 42, 74, 0.11);
  --shadow-xl:  0 36px 72px rgba(27, 42, 74, 0.15);

  /* ---- Transitions ---- */
  --ease-out:    cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-in-out: cubic-bezier(0.42, 0, 0.58, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 0.2s;
  --duration-normal: 0.3s;
  --duration-slow: 0.6s;
}

@media (min-width: 640px) {
  :root {
    --container-px: var(--space-6);
  }
}