/* ============================================
   Digital PB School 2.0 - Design Tokens
   ============================================ */

:root {
  /* ── Primary Colors ── */
  --color-primary:        #1B1F3B;     /* Deep Navy - 메인 브랜드 컬러 */
  --color-primary-light:  #2A2F54;     /* Navy Light */
  --color-primary-dark:   #0F1228;     /* Navy Dark */

  /* ── Accent Colors ── */
  --color-accent:         #D4B07A;     /* Antique Gold - 포인트 컬러 */
  --color-accent-light:   #D4B07A;     /* Gold Light */
  --color-accent-dark:    #96753D;     /* Gold Dark */

  /* ── Neutral Colors ── */
  --color-white:          #FFFFFF;
  --color-off-white:      #F7F7F5;     /* 따뜻한 오프화이트 */
  --color-gray-100:       #F0EDE8;
  --color-gray-200:       #E2DED6;
  --color-gray-300:       #C4BFB5;
  --color-gray-400:       #9A9488;
  --color-gray-500:       #6E685C;
  --color-gray-600:       #4A4640;
  --color-gray-700:       #33302C;
  --color-black:          #111111;

  /* ── Semantic Colors ── */
  --color-success:        #3A7D5C;
  --color-warning:        #C4912A;
  --color-error:          #B23A3A;
  --color-info:           #3A6B9F;

  /* ── Background Colors ── */
  --bg-hero:              linear-gradient(135deg, #1B1F3B 0%, #0F1228 60%, #1A1530 100%);
  --bg-section-light:     #F7F7F5;
  --bg-section-dark:      #1B1F3B;
  --bg-card:              #FFFFFF;
  --bg-overlay:           rgba(15, 18, 40, 0.65);

  /* ── Typography ── */
  --font-display:         'Noto Serif KR', 'Georgia', serif;
  --font-body:            'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:            'JetBrains Mono', 'Fira Code', monospace;
  --font-en-display:      'Cormorant Garamond', 'Georgia', serif;

  /* Font Sizes - Fluid Typography */
  --fs-hero:              clamp(2.4rem, 5vw, 4.2rem);
  --fs-h1:                clamp(2rem, 3.5vw, 3rem);
  --fs-h2:                clamp(1.6rem, 2.8vw, 2.4rem);
  --fs-h3:                clamp(1.25rem, 2vw, 1.75rem);
  --fs-h4:                clamp(1.1rem, 1.5vw, 1.35rem);
  --fs-body-lg:           clamp(1.05rem, 1.2vw, 1.2rem);
  --fs-body:              clamp(0.95rem, 1vw, 1.05rem);
  --fs-body-sm:           clamp(0.85rem, 0.9vw, 0.925rem);
  --fs-caption:           clamp(0.75rem, 0.8vw, 0.825rem);
  --fs-label:             clamp(0.7rem, 0.75vw, 0.775rem);

  /* Font Weights */
  --fw-light:             300;
  --fw-regular:           400;
  --fw-medium:            500;
  --fw-semibold:          600;
  --fw-bold:              700;

  /* Line Heights */
  --lh-tight:             1.3;
  --lh-normal:            1.65;
  --lh-relaxed:           1.85;

  /* Letter Spacing */
  --ls-tight:             -0.02em;
  --ls-normal:            0;
  --ls-wide:              0.04em;
  --ls-wider:             0.08em;
  --ls-widest:            0.14em;

  /* ── Spacing ── */
  --space-xs:             0.5rem;
  --space-sm:             0.75rem;
  --space-md:             1rem;
  --space-lg:             1.5rem;
  --space-xl:             2rem;
  --space-2xl:            3rem;
  --space-3xl:            4.5rem;
  --space-4xl:            6rem;
  --space-5xl:            8rem;
  --space-section:        clamp(5rem, 10vw, 9rem);

  /* ── Layout ── */
  --max-width:            1280px;
  --max-width-narrow:     960px;
  --max-width-wide:       1440px;
  --content-padding:      clamp(1.25rem, 4vw, 3rem);
  --header-height:        80px;
  --header-height-scroll: 64px;

  /* ── Borders ── */
  --radius-sm:            4px;
  --radius-md:            8px;
  --radius-lg:            12px;
  --radius-xl:            20px;
  --radius-full:          9999px;
  --border-thin:          1px solid var(--color-gray-200);
  --border-accent:        1px solid var(--color-accent);

  /* ── Shadows ── */
  --shadow-sm:            0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md:            0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-lg:            0 8px 32px rgba(0, 0, 0, 0.1);
  --shadow-xl:            0 16px 48px rgba(0, 0, 0, 0.12);
  --shadow-card:          0 2px 12px rgba(0, 0, 0, 0.06);
  --shadow-card-hover:    0 8px 30px rgba(0, 0, 0, 0.12);
  --shadow-glow:          0 0 40px rgba(184, 148, 95, 0.15);

  /* ── Transitions ── */
  --ease-default:         cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-out:             cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:          cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:          cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast:        0.2s;
  --duration-normal:      0.35s;
  --duration-slow:        0.6s;
  --duration-slower:      0.9s;

  /* ── Z-index Scale ── */
  --z-base:               1;
  --z-dropdown:           100;
  --z-sticky:             200;
  --z-header:             500;
  --z-overlay:            800;
  --z-modal:              1000;
}