/* ===== Design Tokens ===== */
:root {
    /* ===== 브랜드 컬러 ===== */
    /* 레드 - 브랜드 대표 컬러 */
    --color-lg-red: #A50034;
    --color-lg-red-light: #C8102E;
    --color-lg-red-dark: #7A0026;
    --color-lg-red-bg: #FFF0F3;

    /* 그레이 - 중립 컬러 */
    --color-lg-gray-900: #1A1A1A;
    --color-lg-gray-800: #2D2D2D;
    --color-lg-gray-700: #404040;
    --color-lg-gray-600: #525252;
    --color-lg-gray-500: #737373;
    --color-lg-gray-400: #A3A3A3;
    --color-lg-gray-300: #D4D4D4;
    --color-lg-gray-200: #E5E5E5;
    --color-lg-gray-100: #F5F5F5;
    --color-lg-gray-50: #FAFAFA;

    /* 화이트 */
    --color-lg-white: #FFFFFF;

    /* 블루 - 보조 액센트 */
    --color-lg-blue: #0056A7;
    --color-lg-blue-light: #0072CE;
    --color-lg-blue-dark: #003B73;
    --color-lg-blue-bg: #E8F1FA;

    /* 그린 - 성공/긍정 */
    --color-lg-green: #008A3E;
    --color-lg-green-light: #00A651;
    --color-lg-green-bg: #E8F5EC;

    /* 오렌지 - 경고 */
    --color-lg-orange: #E87722;
    --color-lg-orange-bg: #FEF3E8;

    /* 퍼플 - 보조 */
    --color-lg-purple: #6B2D8B;
    --color-lg-purple-bg: #F3EAF7;

    /* ===== 의미론적 컬러 매핑 ===== */
    /* 기존 Dub 스타일 토큰을 브랜드 스타일로 매핑 */
    --color-canvas-white: var(--color-lg-white);
    --color-paper-mist: var(--color-lg-gray-100);
    --color-ash: var(--color-lg-gray-200);
    --color-smoke: var(--color-lg-gray-300);
    --color-pebble: var(--color-lg-gray-400);
    --color-midnight-ink: var(--color-lg-gray-900);
    --color-charcoal: var(--color-lg-gray-800);
    --color-graphite: var(--color-lg-gray-700);
    --color-slate: var(--color-lg-gray-600);
    --color-steel: var(--color-lg-gray-500);
    --color-fog: var(--color-lg-gray-400);
    --color-silver: var(--color-lg-gray-300);
    --color-ash-light: var(--color-lg-gray-100);
    --color-ink: var(--color-lg-gray-900);
    --color-paper: var(--color-lg-white);
    --color-primary: var(--color-lg-red);

    /* 액센트 컬러 - 브랜드 컬러로 교체 */
    --color-electric-blue: var(--color-lg-blue);
    --color-deep-sapphire: var(--color-lg-blue);
    --color-soft-mint: var(--color-lg-green-bg);
    --color-vivid-green: var(--color-lg-green);
    --color-tangerine: var(--color-lg-orange);
    --color-lavender: var(--color-lg-purple);

    /* 레드 - 브랜드 대표 컬러 */
    --color-brand-primary: var(--color-lg-red);
    --color-brand-primary-light: var(--color-lg-red-light);
    --color-brand-primary-dark: var(--color-lg-red-dark);
    --color-brand-primary-bg: var(--color-lg-red-bg);

    /* Primary Action - 레드 */
    --color-primary-action-fill: var(--color-lg-red);
    --color-primary-action-hover: var(--color-lg-red-dark);
    --color-primary-action-text: var(--color-lg-white);

    /* ===== 타이포그래피 ===== */
    /* 공식 폰트: Pretendard (웹 폰트) + LG Smart UI 폴백 */
    --font-sans: 'Pretendard Variable', 'Pretendard', 'LG Smart UI', 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-display: 'Pretendard Variable', 'Pretendard', 'LG Smart Headline', 'LG Smart UI', 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    /* 타이포그래피 스케일 */
    --text-caption: 11px;
    --text-body: 14px;
    --text-body-lg: 16px;
    --text-body-xl: 18px;
    --text-subheading: 20px;
    --text-heading-sm: 24px;
    --text-heading: 30px;
    --text-heading-lg: 36px;
    --text-display: 48px;

    /* ===== 스페이싱 ===== */
    --spacing-2: 2px;
    --spacing-4: 4px;
    --spacing-6: 6px;
    --spacing-8: 8px;
    --spacing-10: 10px;
    --spacing-12: 12px;
    --spacing-16: 16px;
    --spacing-20: 20px;
    --spacing-24: 24px;
    --spacing-28: 28px;
    --spacing-32: 32px;
    --spacing-36: 36px;
    --spacing-40: 40px;
    --spacing-48: 48px;
    --spacing-56: 56px;
    --spacing-64: 64px;
    --spacing-80: 80px;
    --spacing-96: 96px;
    --spacing-112: 112px;

    /* ===== 레이아웃 ===== */
    --page-max-width: 1200px;
    --section-gap: 64px;
    --card-padding: 16px;
    --element-gap: 8px;

    /* ===== 라디우스 ===== */
    --radius-tags: 9999px;
    --radius-cards: 12px;
    --radius-inputs: 6px;
    --radius-buttons: 8px;
    --radius-largecards: 16px;

    /* ===== 섀도우 ===== */
    --shadow-subtle: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
    --shadow-sm: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px;
    --shadow-sm-2: rgba(0, 0, 0, 0.2) 0px 2px 6px 0px inset;
    --shadow-subtle-2: rgba(0, 0, 0, 0.1) 0px 0px 0px 4px;
    --shadow-md: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px;
    --shadow-lg: rgba(0, 0, 0, 0.09) 0px 20px 20px 0px;
    --shadow-subtle-3: rgb(255, 255, 255) 0px 0px 0px 3px, rgb(0, 0, 0) 0px 0px 0px 4px;

    /* ===== 서피스 ===== */
    --surface-canvas: var(--color-lg-white);
    --surface-paper: var(--color-lg-gray-100);
    --surface-card: var(--color-lg-white);
    --surface-tinted-accent: var(--color-lg-red-bg);

    /* ===== VDA6.3 심사 전용 유틸리티 토큰 ===== */
    --color-navy: var(--color-lg-blue-dark);
    --color-blue-soft: var(--color-lg-blue-bg);
    --color-crimson: var(--color-lg-red-dark);

    /* ===== 슬레이트 / 다크 유틸리티 토큰 ===== */
    --color-slate-900: #0f172a;
    --color-slate-800: #1e293b;
    --color-slate-700: #334155;
    --color-slate-600: #475569;
    --color-slate-500: #64748b;
    --color-slate-400: #94a3b8;
    --color-slate-300: #cbd5e1;
    --color-slate-200: #e2e8f0;
    --color-slate-100: #f1f5f9;
    --color-slate-50:  #f8fafc;
}