/* =========================================================
   Duovly — Design System tokens (warm-luxury rebrand)
   Codex 이미지 팔레트 기준. "깔끔한 베타 앱" → "따뜻한 럭셔리".
   warm ivory 배경 · warm coral CTA · premium teal-mint · warm ink.
   기존 변수 이름은 유지(화면 호환), 값만 warm으로 재정렬 + --duo-* 추가.
   index.html: tokens.css → app.css 순서. 변수는 전역 사용 가능.
   ========================================================= */

:root {
  /* =====================================================
     DUO — Codex 이미지 정본 토큰 (직접 참조용)
     ===================================================== */
  --duo-bg:        #FBF8F4;
  --duo-card:      #FFFFFF;
  --duo-card-warm: #FFFCF8;
  --duo-ink:       #102033;
  --duo-body:      #35445A;
  --duo-slate:     #61708A;
  --duo-muted:     #8A94A6;
  --duo-border:    #E9E2DA;
  --duo-coral:     #FF7A6B;
  --duo-rose:      #FF6F91;
  --duo-mint:      #18C7B8;
  --duo-gold:      #F6C65B;
  --duo-gold-ink:  #8A5B00;   /* 금색 위 텍스트 */
  --duo-champagne: #FFF3D2;
  --duo-pale-blue: #EAF4FF;
  --duo-lilac:     #8B6DFF;
  --duo-live:      #18C76F;    /* 라이브 점 */

  /* ---- Coral — primary action / CTA (warm, #FF7A6B) ---- */
  --coral-50:  #FFF4F2;
  --coral-100: #FFE5E0;
  --coral-200: #FFC9C0;
  --coral-300: #FFA89B;
  --coral-400: #FF8E7D;
  --coral-500: #FF7A6B;   /* primary warm coral */
  --coral-600: #F2604F;
  --coral-700: #D84A3A;
  --coral-800: #A8362A;
  --coral-900: #6E211A;

  /* ---- Mint — premium teal-mint (#18C7B8), not system green ---- */
  --mint-50:  #E7FBF7;
  --mint-100: #C8F5EE;
  --mint-200: #97EADF;
  --mint-300: #5FDDCD;
  --mint-400: #30CFBD;
  --mint-500: #18C7B8;   /* premium mint */
  --mint-600: #12A99C;
  --mint-700: #0F8A80;
  --mint-800: #0E6E66;
  --mint-900: #0C544E;

  /* ---- Navy / slate — warm ink, trust, structure, text ---- */
  --navy-50:  #FBF8F4;
  --navy-100: #EFEAE3;
  --navy-200: #DCE2EA;
  --navy-300: #B4BCC9;
  --navy-400: #8A94A6;
  --navy-500: #61708A;
  --navy-600: #45556E;
  --navy-700: #2C3C52;
  --navy-800: #1B2C40;
  --navy-900: #102033;

  /* ---- Charm accents — gold / rose / lilac ---- */
  --butter-100: #FFF3D2;   /* champagne */
  --butter-300: #FBE2A0;
  --butter-500: #F6C65B;   /* gold — ratings, 1위, glow */
  --butter-700: #8A5B00;   /* 금색 위 텍스트 */
  --rose-100: #FFE6EC;
  --rose-300: #FFB1C0;
  --rose-500: #FF6F91;
  --rose-700: #E5536F;
  --lilac-300: #C7B8FF;
  --lilac-500: #8B6DFF;
  --pale-blue: #EAF4FF;

  /* ---- Warm-ivory neutrals (warm ink on ivory surfaces) ---- */
  --warm-white:     #FBF8F4;   /* app background */
  --surface:        #FFFFFF;   /* cards, sheets */
  --surface-warm:   #FFFCF8;   /* warm card variant */
  --surface-sunken: #F4EFE9;   /* insets, fills, track */
  --surface-mute:   #F0EAE2;   /* chips, secondary fills */
  --border:         #E9E2DA;   /* hairlines */
  --border-strong:  #DBD2C7;   /* dividers needing contrast */

  --ink-900: #102033;   /* primary text / ink */
  --ink-800: #1B2C40;
  --ink-700: #35445A;   /* body text */
  --ink-600: #4B5A70;
  --ink-500: #61708A;   /* slate / secondary */
  --ink-400: #677085;   /* muted / meta — AA on white & ivory (≥4.5:1) */
  --ink-300: #B4BCC9;   /* disabled text */
  --ink-200: #DCE2EA;   /* disabled fill */

  /* ---- Semantic status ---- */
  --success:    var(--mint-500);
  --success-bg: var(--mint-50);
  --success-fg: var(--mint-700);
  --warning:    #E8A116;
  --warning-bg: #FEF4E0;
  --warning-fg: #9A6608;
  --danger:     var(--coral-600);
  --danger-bg:  var(--coral-50);
  --danger-fg:  var(--coral-700);
  --info:       var(--navy-500);
  --info-bg:    var(--navy-50);
  --info-fg:    var(--navy-700);

  /* ---- Presence (live-app states) ---- */
  --status-online:  var(--duo-live);
  --status-playing: var(--butter-500);   /* 의뢰중 / playing */
  --status-busy:    var(--coral-500);
  --status-offline: var(--ink-400);

  /* ---- Semantic surface aliases ---- */
  --bg:           var(--warm-white);
  --surface-card: var(--surface);
  --text-strong:  var(--ink-900);
  --text-body:    var(--ink-700);
  --text-muted:   var(--ink-500);
  --text-subtle:  var(--ink-400);

  /* ---- Action aliases ---- */
  --action:       var(--coral-500);
  --action-hover: var(--coral-600);
  --action-press: var(--coral-700);
  --action-soft:  var(--coral-50);
  --on-action:    #FFFFFF;
  --trust:        var(--navy-900);
  --trust-soft:   var(--navy-50);
  --focus-ring:   rgba(255, 122, 107, .40);

  /* ---- Type (Pretendard Variable; restrained weights) ---- */
  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-heavy: 800;
  --fs-display: 28px;
  --fs-h1: 22px;
  --fs-h2: 18px;
  --fs-h3: 16px;
  --fs-body-lg: 15px;
  --fs-body: 14px;
  --fs-caption: 13px;
  --fs-meta: 12px;
  --fs-tiny: 11px;
  --lh-tight: 1.25;
  --lh-snug: 1.4;
  --lh-normal: 1.55;
  /* letter-spacing: 절대 음수 금지 (스펙 규칙). 0 고정. */
  --ls-tight: 0;
  --ls-normal: 0;

  /* ---- Spacing (4px grid) ---- */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 48px; --s-10: 64px;
  --gutter: 16px;

  /* ---- Radii — ~12px default card, 8px button ---- */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-2xl: 24px;
  --r-pill: 999px;

  /* ---- Shadows — warm ink tint, soft & low ---- */
  --sh-1: 0 1px 2px rgba(16,32,51,.05), 0 1px 1px rgba(16,32,51,.04);
  --sh-2: 0 2px 8px rgba(16,32,51,.06), 0 1px 3px rgba(16,32,51,.05);
  --sh-3: 0 8px 22px rgba(16,32,51,.08), 0 2px 6px rgba(16,32,51,.05);
  --sh-card: 0 1px 2px rgba(16,32,51,.04), 0 4px 14px rgba(16,32,51,.06);
  --sh-premium: 0 18px 42px rgba(16,32,51,.09), inset 0 1px 0 rgba(255,255,255,.8);
  --sh-cta: 0 10px 24px rgba(255,122,107,.30);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(.2,.8,.2,1);
  --ease-spring: cubic-bezier(.34,1.4,.56,1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
}