/**
* MWS Design Token — CSS Variables (Runtime Layer)
* ═══════════════════════════════════════════════════════════════
* Single source of truth for all HTML pages.
* Mirrors /src/styles/tokens/*.ts so that both Next.js components
* and legacy HTML pages share identical values.
*
* Load order in every HTML page:
* (from /mobile/)
* (from root)
*
* ── Alias Layer 안내 ────────────────────────────────────────
* 파일별 인라인 :root{}에서 사용 중인 레거시 변수명을
* 시맨틱 토큰으로 매핑한 역방향 호환 별칭입니다.
* 인라인 중복 선언을 제거한 뒤에도 이 별칭이 폴백으로 작동합니다.
* ═══════════════════════════════════════════════════════════════
*/
:root {
/* ── Brand ─────────────────────────────────────────────── */
--color-brand-primary: #81D8D0; /* 실배포값 (구:#0ABAB5) */
--color-brand-primary-dark: #5ec4bb; /* 실배포값 (구:#089490) */
--color-brand-primary-light: #e8f9f8; /* 실배포값 (구:#E6F9F8) */
--color-brand-secondary: #FFB3A7; /* 실배포값 coral (구:#E88FA0) */
--color-brand-secondary-dark: #e89080; /* 실배포값 coral-dark (구:#C97080) */
--color-brand-secondary-light:#fff5f3; /* 실배포값 (구:#FFF0F3) */
/* ── Accent ─────────────────────────────────────────────── */
--color-accent-mint: #81D8D0; /* 실배포값 (구:#0ABAB5) */
--color-accent-mint-dark: #5ec4bb; /* 실배포값 (구:#089490) */
--color-accent-mint-mid: #6dcec5;
--color-accent-mint-light: #e8f9f8; /* 실배포값 (구:#E6F9F8) */
--color-accent-mint-pale: #f2fbfa;
--color-accent-mint-deep: #3aa8a0;
--color-accent-teal: #0D9488; /* bride-planner / family-support */
--color-accent-teal-light: #F0FDFA;
--color-accent-teal-dark: #0F766E;
--color-accent-warm: #f59e0b;
--color-accent-warm-dark: #D97706;
--color-accent-warm-light: #FEF3C7;
--color-accent-coral: #FFB3A7; /* 실배포값 (구:#F97316) */
--color-accent-coral-light: #fff5f3;
--color-accent-purple: #7C3AED;
--color-accent-purple-light: #F3E8FF;
--color-accent-rose: #E88FA0; /* bride-planner --rose */
--color-accent-rose-deep: #BE185D; /* bride-planner --rose-deep */
--color-accent-rose-mid: #f0a0b0; /* bride-planner --rose-mid */
--color-accent-rose-light: #FCE7F3;
/* ── Neutral ─────────────────────────────────────────────── */
--color-neutral-50: #F8FAFC;
--color-neutral-100: #F1F5F9;
--color-neutral-200: #E2E8F0;
--color-neutral-300: #CBD5E1;
--color-neutral-400: #94A3B8;
--color-neutral-500: #64748B;
--color-neutral-600: #475569;
--color-neutral-700: #334155;
--color-neutral-800: #1E293B;
--color-neutral-900: #0F172A;
--color-white: #FFFFFF;
--color-ivory: #FAFAF8;
/* ── Semantic ────────────────────────────────────────────── */
--color-success: #16A34A;
--color-success-light: #DCFCE7;
--color-success-border: #86EFAC;
--color-warning: #D97706;
--color-warning-light: #FEF3C7;
--color-warning-border: #FDE68A;
--color-error: #EF4444;
--color-error-light: #FEE2E2;
--color-error-border: #FCA5A5;
--color-info: #0EA5E9;
--color-info-light: #E0F2FE;
--color-info-border: #7DD3FC;
/* ── Badge ──────────────────────────────────────────────── */
--badge-jeongchal-bg: #FEF3C7;
--badge-jeongchal-text: #92400E;
--badge-jeongchal-border: #FDE68A;
--badge-escrow-bg: #e8f9f8;
--badge-escrow-text: #3aa8a0;
--badge-escrow-border: #81D8D0; /* 실배포값 (구:#0ABAB5) */
--badge-event-bg: #FCE7F3;
--badge-event-text: #9D174D;
--badge-event-border: #F9A8D4;
--badge-special-bg: #fff5f3;
--badge-special-text: #C2410C;
--badge-special-border: #FED7AA;
--badge-new-bg: #EFF6FF;
--badge-new-text: #1D4ED8;
--badge-new-border: #BFDBFE;
--badge-hot-bg: #FEE2E2;
--badge-hot-text: #B91C1C;
--badge-hot-border: #FCA5A5;
--badge-pt-bg: #F3E8FF;
--badge-pt-text: #6D28D9;
--badge-pt-border: #DDD6FE;
/* ── Overlay ─────────────────────────────────────────────── */
--color-overlay-modal: rgba(0,0,0,0.5);
--color-overlay-light: rgba(0,0,0,0.2);
/* ── Typography ─────────────────────────────────────────── */
--font-family-base: 'Noto Sans KR', sans-serif;
--font-family-display:'Noto Serif KR', serif;
--font-family-mono: 'Fira Code', 'Consolas', monospace;
--font-size-2xs: 10px;
--font-size-xs: 11px;
--font-size-sm: 12px;
--font-size-md: 13px;
--font-size-base: 14px;
--font-size-lg: 15px;
--font-size-xl: 16px;
--font-size-2xl: 18px;
--font-size-3xl: 20px;
--font-size-4xl: 24px;
--font-size-5xl: 30px;
--font-size-6xl: 40px;
--font-weight-light: 300;
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--font-weight-extrabold: 800;
--line-height-tight: 1.2;
--line-height-snug: 1.375;
--line-height-normal: 1.5;
--line-height-relaxed: 1.625;
--line-height-loose: 1.75;
/* ── Spacing ─────────────────────────────────────────────── */
--spacing-0: 0px;
--spacing-xs: 4px;
--spacing-sm: 8px;
--spacing-md: 12px;
--spacing-base: 16px;
--spacing-lg: 24px;
--spacing-xl: 32px;
--spacing-2xl: 48px;
--spacing-3xl: 64px;
--spacing-4xl: 80px;
--spacing-5xl: 96px;
--spacing-6xl: 120px;
/* ── Border Radius ───────────────────────────────────────── */
--radius-none: 0px;
--radius-xs: 4px;
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 16px;
--radius-xl: 24px;
--radius-2xl: 32px;
--radius-full: 9999px;
/* ── Shadow ──────────────────────────────────────────────── */
--shadow-card: 0 2px 8px rgba(0,0,0,.07);
--shadow-card-hover: 0 8px 24px rgba(129,216,208,.20), 0 2px 8px rgba(0,0,0,.06);
--shadow-popover: 0 8px 24px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06);
--shadow-modal: 0 20px 60px rgba(0,0,0,.2), 0 8px 24px rgba(0,0,0,.1);
--shadow-toast: 0 4px 16px rgba(0,0,0,.1), 0 1px 4px rgba(0,0,0,.06);
--shadow-sticky-bar-up: 0 -2px 12px rgba(0,0,0,.08);
--shadow-sm: 0 2px 8px rgba(0,0,0,.07); /* venue 계열 별칭 */
/* ── Container ───────────────────────────────────────────── */
--container-user-lg: 1080px;
--container-user-md: 1080px;
--container-user-sm: 1080px;
--container-mobile-width: 100%;
--container-mobile-padding-x: 16px;
/* ══════════════════════════════════════════════════════════
* ── Alias Layer (역방향 호환 별칭) ─────────────────────────
* 인라인 :root{} 에서 사용 중인 레거시 변수명.
* 시맨틱 토큰 정의 이후에 선언되어 최우선 적용됩니다.
* 파일별 인라인 중복 선언을 제거하더라도 즉시 깨지지 않습니다.
* ══════════════════════════════════════════════════════════ */
/* mint 계열 (그룹1·2·3·4 공통) */
--mint: #81D8D0;
--mint-dark: #5ec4bb;
--mint-dk: #5ec4bb;
--mint-mid: #6dcec5;
--mint-light: #e8f9f8;
--mint-lt: #e8f9f8;
--mint-deep: #3aa8a0;
--mint-pale: #f2fbfa;
/* teal 계열 (그룹3 — bride-planner · family-support) */
--teal: #0D9488;
--teal-lt: #F0FDFA;
--teal-dk: #0F766E;
/* coral 계열 */
--coral: #FFB3A7;
--coral-light: #fff5f3;
/* gold */
--gold: #f59e0b;
/* rose 계열 (bride-planner) */
--rose: #E88FA0;
--rose-deep: #BE185D;
--rose-mid: #f0a0b0;
/* 공통 유틸리티 (그룹4 venue 모바일 · 기타) */
--bg: #f9fafb;
--white: #fff;
--border: #eaecef;
--border-mid: #dde1e7;
--text-primary: #1a1c1e;
--text-secondary: #4a5568;
--text-muted: #8a94a6;
/* radius 단축 별칭 (venue 모바일) */
--r8: 8px;
--r12: 12px;
--r16: 16px;
--r-full:9999px;
/* shadow 단축 별칭 (venue 모바일) */
--sh-sm: 0 2px 8px rgba(0,0,0,.07);
/* layout 단축 별칭 (venue 모바일) */
--page-pad: 16px;
/* ── Motion / Transition ────────────────────────────────── */
--motion-fast: 100ms;
--motion-base: 200ms;
--motion-slow: 350ms;
--ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
--ease-decel: cubic-bezier(0, 0, 0.2, 1);
--ease-accel: cubic-bezier(0.4, 0, 1, 1);
/* 단축 별칭 (페이지별 var(--transition), var(--tr) 폴백) */
--transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
--tr: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
--tr-fast: all 0.14s cubic-bezier(0.4, 0, 0.2, 1);
--tr-slow: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
/* ── Layout / Max Width ──────────────────────────────────── */
--max-w: 1280px;
--mw: 1280px;
/* ── Breakpoints (reference only — used in @media rules) ── */
/* --bp-mobile: 0px */
/* --bp-tablet: 768px */
/* --bp-desktop: 1024px */
/* --bp-wide: 1440px */
/* ── Status / State (알림·예약 상태칩용) ─────────────────── */
--status-active-bg: #eff6ff;
--status-active-text: #1d4ed8;
--status-active-border: #bfdbfe;
--status-done-bg: #f0fdf4;
--status-done-text: #16a34a;
--status-done-border: #bbf7d0;
--status-warn-bg: #fef3c7;
--status-warn-text: #92640a;
--status-warn-border: #fde68a;
--status-info-bg: #eff6ff;
--status-info-text: #1d4ed8;
--status-info-border: #bfdbfe;
/* ── Extended Alias (파일별 인라인 :root 제거 지원) ──────── */
--font-main: 'Noto Sans KR', sans-serif;
--font-en: 'Playfair Display', serif;
--ivory: #fafaf8;
--bg: #f9fafb;
--white: #fff;
--border: #eaecef;
--border-mid: #dde1e7;
--bd-mid: #dde1e7;
--text-primary: #1a1c1e;
--text-secondary: #4a5568;
--text-muted: #8a94a6;
--text-mint: #3aa8a0;
--text-coral: #c97b6e;
--tx: #1a1c1e;
--tx2: #4a5568;
--tx3: #8a94a6;
--err: #dc2626;
--success: #16a34a;
--warn-bg: #fef3c7;
--warn-text: #92640a;
--warn-border: #fde68a;
--info-bg: #eff6ff;
--info-text: #1d4ed8;
--info-border: #bfdbfe;
--coral-pale: #fff0ee;
--coral-dark: #e89080;
--gold-pale: #fef3c7;
--gold-deep: #92640a;
--rose-pale: #fff0f3;
--rose-deep: #b5566b;
--peach: #FFDAB9;
--peach-pale: #fff8f0;
--lavender: #c4b5e8;
--lavender-pale: #f4f1fc;
--sh-xs: 0 1px 8px rgba(0,0,0,.05);
--sh-sm: 0 2px 8px rgba(0,0,0,.07);
--shadow-sm: 0 1px 4px rgba(0,0,0,.06);
--shadow-md: 0 4px 16px rgba(0,0,0,.09), 0 1px 4px rgba(0,0,0,.05);
}