/* ============================================
   v4.0 Design Tokens -- Millie Partners
   Brand: Yellow + Cream + Dark Brown
   ============================================ */

:root {

  /* ------------------------------------------
     Brand Colors
     ------------------------------------------ */
  --millie-yellow:      #FFCB00;
  --millie-yellow-dark:  #E5B500;
  --millie-yellow-deeper:#C49B00;
  --millie-yellow-10:   rgba(255, 203, 0, 0.10);
  --millie-yellow-20:   rgba(255, 203, 0, 0.20);

  --millie-orange:      #F5822A;
  --millie-orange-dark:  #D96B1A;

  --millie-cream:       #FFFDF5;
  --millie-cream-warm:  #FFF9E6;

  --millie-dark:        #1A0F00;
  --millie-dark-brown:  #2C1A05;
  --millie-dark-soft:   #3D2B10;

  --millie-warm-gray:   #F7F4EF;
  --millie-warm-gray-2: #EDE8E0;

  /* Text */
  --text-900: #191919;
  --text-700: #444444;
  --text-500: #777777;
  --text-400: #999999;
  --text-300: #BBBBBB;
  --text-on-dark: #FFF8E1;
  --text-on-yellow: #1A0F00;

  /* Accent */
  --accent-green:  #22C55E;
  --accent-green-bg: rgba(34, 197, 94, 0.08);
  --accent-red:    #EF4444;
  --accent-amber:  #F59E0B;

  /* Neutral */
  --gray-50:  #FAFAF8;
  --gray-100: #F0EDE8;
  --gray-200: #E0DCD5;
  --gray-300: #C5C0B8;
  --gray-400: #9E9890;
  --gray-500: #6E6860;

  /* Category Badges */
  --badge-guide:     #FFCB00;
  --badge-youtube:   #FF4444;
  --badge-interview: #6366F1;
  --badge-tips:      #F5822A;
  --badge-side-job:  #22C55E;
  --badge-hot:       #EF4444;


  /* ------------------------------------------
     Gradients
     ------------------------------------------ */
  --grad-hero:     linear-gradient(170deg, #FFFDF5 0%, #FFF8E1 100%);
  --grad-cta:      linear-gradient(135deg, #FFCB00 0%, #E5B500 100%);
  --grad-dark:     linear-gradient(175deg, #1A0F00 0%, #2C1A05 60%, #1A0F00 100%);
  --grad-stats:    linear-gradient(135deg, #FFCB00 0%, #FFD633 100%);
  --grad-warm:     linear-gradient(180deg, #F7F4EF 0%, #FFFFFF 100%);
  --grad-cream:    linear-gradient(180deg, #FFFDF5 0%, #FFF9E6 100%);
  --grad-card:     linear-gradient(180deg, #FFFFFF 0%, #FDFBF5 100%);
  --grad-overlay:  linear-gradient(180deg, rgba(26,15,0,0) 0%, rgba(26,15,0,0.75) 100%);
  --grad-overlay-full: linear-gradient(180deg, rgba(26,15,0,0.3) 0%, rgba(26,15,0,0.85) 100%);


  /* ------------------------------------------
     Typography
     ------------------------------------------ */
  --font-display: 'Paperlogy', 'Pretendard Variable', sans-serif;
  --font-body:    'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-number:  'Montserrat', 'Pretendard Variable', sans-serif;

  /* Scale */
  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-17: 17px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-22: 22px;
  --fs-24: 24px;
  --fs-28: 28px;
  --fs-32: 32px;
  --fs-36: 36px;
  --fs-40: 40px;
  --fs-48: 48px;
  --fs-56: 56px;
  --fs-64: 64px;

  /* Weights */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extrabold:800;

  /* Leading */
  --lh-tight:   1.2;
  --lh-snug:    1.35;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;
  --lh-loose:   1.8;

  /* Tracking */
  --ls-tight:  -0.03em;
  --ls-normal:  0;
  --ls-wide:    0.04em;
  --ls-wider:   0.08em;


  /* ------------------------------------------
     Spacing (4px base)
     ------------------------------------------ */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-7:  28px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-14: 56px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-28: 112px;
  --sp-32: 128px;

  /* Section Rhythm -- 각 섹션 고유의 호흡 */
  --sec-hero-pt:       0;
  --sec-hero-pb:       0;
  --sec-showcase-pt:   100px;
  --sec-showcase-pb:   80px;
  --sec-stats-py:      48px;
  --sec-persona-pt:    120px;
  --sec-persona-pb:    100px;
  --sec-calc-pt:       80px;
  --sec-calc-pb:       120px;
  --sec-blog-pt:       100px;
  --sec-blog-pb:       80px;
  --sec-testimonial-pt:60px;
  --sec-testimonial-pb:80px;
  --sec-process-pt:    100px;
  --sec-process-pb:    60px;
  --sec-faq-pt:        80px;
  --sec-faq-pb:        100px;
  --sec-darkcta-py:    120px;

  /* Container */
  --container-max:  1200px;
  --container-wide: 1320px;
  --container-px:   24px;


  /* ------------------------------------------
     Radius
     ------------------------------------------ */
  --r-xs:   4px;
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   20px;
  --r-2xl:  28px;
  --r-3xl:  36px;
  --r-full: 9999px;


  /* ------------------------------------------
     Shadows (warm tint)
     ------------------------------------------ */
  --shadow-xs: 0 1px 2px rgba(26, 15, 0, 0.04);
  --shadow-sm: 0 2px 6px rgba(26, 15, 0, 0.06);
  --shadow-md: 0 4px 16px rgba(26, 15, 0, 0.08);
  --shadow-lg: 0 8px 32px rgba(26, 15, 0, 0.10);
  --shadow-xl: 0 16px 48px rgba(26, 15, 0, 0.12);
  --shadow-2xl: 0 24px 64px rgba(26, 15, 0, 0.14);

  --shadow-yellow: 0 8px 24px rgba(255, 203, 0, 0.35);
  --shadow-yellow-lg: 0 12px 40px rgba(255, 203, 0, 0.25);
  --shadow-card-hover: 0 12px 36px rgba(26, 15, 0, 0.12);


  /* ------------------------------------------
     Transitions
     ------------------------------------------ */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);

  --dur-fast:   150ms;
  --dur-base:   280ms;
  --dur-slow:   500ms;
  --dur-slower: 800ms;

  --t-fast: var(--dur-fast) var(--ease-out);
  --t-base: var(--dur-base) var(--ease-out);
  --t-slow: var(--dur-slow) var(--ease-out);


  /* ------------------------------------------
     Z-index Layers
     ------------------------------------------ */
  --z-base:       1;
  --z-above:      10;
  --z-dropdown:   100;
  --z-sticky:     200;
  --z-floating:   300;
  --z-modal:      400;
  --z-bottomsheet:450;
  --z-toast:      500;


  /* ------------------------------------------
     Header
     ------------------------------------------ */
  --header-h-pc:     72px;
  --header-h-mobile: 60px;


  /* ------------------------------------------
     Blog-specific
     ------------------------------------------ */
  --blog-nav-h:   48px;
  --blog-grid-gap: 24px;
}