/* Companion v1. Reference interpretation, not sampled brand colors. */
:root {
  --ds-neutral-950: #12131a;
  --ds-neutral-700: #535561;
  --ds-neutral-100: #f4f4f6;
  --ds-danger: #d92d42;
  --ds-danger-hover: #b82236;
  --ds-radius-panel: 16px;
  --ds-radius-control: 12px;
  --ds-space-1: 4px;
  --ds-space-2: 8px;
  --ds-space-3: 12px;
  --ds-space-4: 16px;
  --ds-space-5: 20px;
  --ds-space-6: 24px;
  --ds-space-8: 32px;
  /* 5단 스케일. 퇴장은 별도 값이 아니라 진입 × 0.7 + 가속 곡선이다. */
  --ds-duration-fast: 180ms;      /* 즉각 — 호버·누름·상태 토글 */
  --ds-duration-element: 220ms;   /* 요소 — 말풍선·칩·토스트 */
  --ds-duration-panel: 320ms;     /* 패널 — 독·드로어·인박스·모달·알림 */
  --ds-duration-scene: 420ms;     /* 화면 — 통화·모드 전환 */
  --ds-duration-intro: 640ms;     /* 연출 — 인트로 전용 */
  --ds-duration-element-out: 150ms;
  --ds-duration-panel-out: 220ms;
  --ds-duration-scene-out: 300ms;
  --ds-ease: cubic-bezier(.16,1,.3,1);
  --ds-ease-exit: cubic-bezier(.4,0,1,1);
  --ds-ease-intro: cubic-bezier(.22,1,.36,1);
}
[data-theme="realism"] {
  color-scheme: light;
  --ds-bg: #fffdf6;
  --ds-surface: #fff5cc;
  --ds-accent: #f3e6a0;
  --ds-accent-hover: #fff7d6;
  --ds-on-accent: #302b1e;
  --ds-text: #302b1e;
  --ds-muted: #6b624b;
  --ds-line: transparent;
  --ds-panel: rgba(255,253,246,.94);
  --ds-focus: #78651e;
  --ds-character-bubble: #fff0b5;
  --ds-user-bubble: #efede7;
  --ds-bubble-text: #302b1e;
  --ds-glow: rgba(255,253,237,.24);
  --ds-interactive-gradient: linear-gradient(135deg, #F3E6A0, #FFFCF0);
}
[data-theme="subculture"] {
  color-scheme: dark;
  --ds-bg: #101426;
  --ds-surface: #1b223e;
  --ds-accent: #a2a7ee;
  --ds-accent-hover: #b6baf5;
  --ds-on-accent: #151a32;
  --ds-text: #f1f2fc;
  --ds-muted: #b3b9d3;
  --ds-line: #434e72;
  --ds-panel: rgba(16,20,38,.94);
  --ds-focus: #c8ccff;
  --ds-character-bubble: #333d69;
  --ds-user-bubble: #292e3e;
  --ds-bubble-text: #f1f2fc;
  --ds-glow: rgba(113,126,215,.18);
}

/* Image-overlay controls and conversation surfaces. */
[data-theme="realism"] {
  --ds-panel: rgba(255,253,246,.88);
  --ds-character-bubble: rgba(255,240,181,.5);
  --ds-user-bubble: rgba(48,49,57,.5);
  --ds-control-glow: 0 4px 18px rgba(255,245,197,.12);
}
[data-theme="subculture"] {
  --ds-panel: rgba(16,20,38,.88);
  --ds-character-bubble: rgba(57,65,118,.5);
  --ds-user-bubble: rgba(48,49,57,.5);
  --ds-control-glow: 0 0 18px rgba(126,136,238,.22), inset 0 1px 0 rgba(220,224,255,.24);
  --ds-interactive-gradient: linear-gradient(135deg, #5931AD, #784BCC);
}

/* Neutral materials for the account screens. Realism conversations moved to
   the lemon theme so the glass material reads in both worlds. The journal keeps
   this white base so it matches the conversation list and profile. */
.messenger-page[data-theme="realism"] {
  /* 면은 중립 회색을 유지하고, 강조만 레몬으로 되돌린다.
     회색 배경에 회색 강조라 실사 계정 화면에 색이 하나도 없었다. */
  --ds-bg: #fafafa;
  --ds-surface: #eeeeee;
  --ds-accent: #f3e6a0;
  --ds-accent-hover: #fff2b8;
  --ds-on-accent: #302b1e;
  --ds-text: #222222;
  --ds-muted: #666666;
  --ds-line: transparent;
  --ds-panel: rgba(250,250,250,.88);
  --ds-focus: #8a7a2f;
  --ds-character-bubble: rgba(242,242,242,.5);
  --ds-user-bubble: rgba(48,48,48,.5);
  --ds-bubble-text: #222222;
  --ds-glow: rgba(255,255,255,.2);
  --ds-interactive-gradient: linear-gradient(135deg,#353535,#5b5b5b);
  --ds-control-glow: 0 4px 18px rgba(0,0,0,.08);
}

/* Glass material. Mechanics live in conversation-materials.css and read only
   these tokens, so a theme swap is a palette swap. --glass-t is the strength
   knob: 0 = the old flat panel, 1 = full spec. */
[data-theme="subculture"] {
  --glass-a-control: .60;  /* 44px 컨트롤용 채움 하한 */
  --cta-edge-a: #9AA6F2;   /* CTA 왼쪽 광원 — 236° / 266° — 밴드 안 */
  --cta-edge-b: #CBB8F5;   /* CTA 오른쪽 광원 */
  --cta-core: #F7F6FF;    /* 밝은 중심 */
  --glass-t: .7;
  --glass-a: .30;      /* 채움 하한 — 어두운 일러스트 위 */
  --glass-base: 28,22,58;    /* 채움 */
  --glass-lit: 199,155,255;  /* 광원 */
  --glass-spec: 233,224,255; /* 상단 스펙큘러 */
  --glass-mid: 162,167,238;
  --glass-deep: 120,75,204;
  --glass-cast: 6,4,18;      /* 그림자 (중성) */
}
/* Lemon pastel, same mechanics. Cream-on-cream keeps the ring tonal rather
   than a decorative line, per the realism no-border rule in DESIGN.md.
   Not wired to realism screens yet — see conversation-materials.css. */
[data-theme="realism"] {
  --glass-a-control: .76;  /* 44px 컨트롤용 채움 하한 */
  --cta-edge-a: #F0E3A2;   /* CTA 왼쪽 광원 — 48° / 45° — 레몬 계열 */
  --cta-edge-b: #FFF3CF;   /* CTA 오른쪽 광원 */
  --cta-core: #FFFEF8;    /* 밝은 중심 */
  --glass-t: .7;
  --glass-a: .70;      /* 채움 하한 — 밝은 사진 위 · DESIGN.md 패널 88% 기준 */
  --glass-base: 255,248,224;
  --glass-lit: 255,252,240;
  --glass-spec: 255,255,248;
  --glass-mid: 243,230,160;
  --glass-deep: 232,214,150;
  --glass-cast: 35,33,28;
}