/* ===========================================================================
   한마디 실험실 · 디자인 토큰 (2판)
   ---------------------------------------------------------------------------
   시각 체계는 코덱스 디자인 스토리보드 3판에서 확정된 통합안을 따른다.
     07 당신의 녹음실  → 어두운 초록 무대, 실물 마이크, 명확한 녹음 콘솔
     05 꽃 기록실      → 코스모스 사진과 편집형 타이포그래피
     08 밤에 쓰는 편지 → 종이 편지 형태의 결과물, 첫 문구
   운영자가 설정 화면에서 고른 색은 실행 중에 --event-* 로 덮어써진다.
   =========================================================================== */

:root {
  /* 행사 색 — 실행 시 설정값으로 교체됨 */
  --event-night:  #12201b;   /* 무대(배경) */
  --event-paper:  #f4f1e8;   /* 종이(밝은 면) */
  --event-ink:    #1f2e25;   /* 종이 위 글자 */
  --event-coral:  #ef8569;   /* 행동(버튼) */
  --event-flower: #e9a49c;   /* 꽃잎(강조) */
  --event-sage:   #aabd9e;   /* 세이지(보조 초록) */

  /* 무대(어두운 면) 계층 — 무대색에서 파생 */
  --stage:    var(--event-night);
  --stage-0:  color-mix(in srgb, var(--event-night) 88%, #000);
  --stage-1:  color-mix(in srgb, var(--event-night) 90%, #e4ebe1);
  --stage-2:  color-mix(in srgb, var(--event-night) 84%, #e4ebe1);
  --stage-3:  color-mix(in srgb, var(--event-night) 76%, #e4ebe1);
  --stage-4:  color-mix(in srgb, var(--event-night) 62%, #e4ebe1);

  /* 무대 위 글자 */
  --text:       var(--event-paper);
  --text-soft:  color-mix(in srgb, var(--event-paper) 78%, var(--event-night));
  --text-faint: color-mix(in srgb, var(--event-paper) 58%, var(--event-night));

  /* 무대 위 선 */
  --rule:        color-mix(in srgb, var(--event-paper) 16%, transparent);
  --rule-strong: color-mix(in srgb, var(--event-paper) 34%, transparent);

  /* 종이(밝은 면) 계층 */
  --paper:    var(--event-paper);
  --paper-2:  color-mix(in srgb, var(--event-paper) 92%, var(--event-sage));
  --paper-3:  color-mix(in srgb, var(--event-paper) 82%, var(--event-sage));
  --ink:      var(--event-ink);
  --ink-soft: color-mix(in srgb, var(--event-ink) 72%, var(--event-paper));
  --ink-faint:color-mix(in srgb, var(--event-ink) 52%, var(--event-paper));
  --ink-rule: color-mix(in srgb, var(--event-ink) 26%, var(--event-paper));

  /* 기존 이름 유지 — 화면들이 surface/line 이름으로도 쓴다 */
  --surface:    var(--stage-2);
  --surface-2:  var(--stage-1);
  --surface-3:  var(--stage-3);
  --line:        var(--rule);
  --line-strong: var(--rule-strong);
  --overlay:    rgba(6, 12, 9, .72);
  --on-primary: #17251c;

  /* 강조 */
  --coral:  var(--event-coral);
  --flower: var(--event-flower);
  --sage:   var(--event-sage);

  /* 의미색 (무대 위) */
  --ok:      #9fd3a8;   --ok-bg:     #1b3a27;
  --warn:    #f0c98a;   --warn-bg:   #3d2f14;
  --danger:  #f0a49b;   --danger-bg: #43221f;
  --info:    #b9d4e6;   --info-bg:   #1d3140;

  /* 글꼴 — 온라인이면 Noto Serif/Sans KR·DM Mono 를 받아 오고,
     현장 오프라인에서는 PC 에 있는 Batang·Malgun Gothic·Consolas 로 같은 구조를 유지한다 */
  --font:       'Noto Sans KR', 'Malgun Gothic', '맑은 고딕', 'Apple SD Gothic Neo', system-ui, sans-serif;
  --font-serif: 'Noto Serif KR', 'Batang', '바탕', 'Apple Myungjo', serif;
  --font-mono:  'DM Mono', 'Cascadia Mono', Consolas, 'D2Coding', monospace;

  /* 글자 크기 — 편집형 대비: 아주 큰 명조 제목 + 작은 본문 + 아주 작은 모노 라벨 */
  --step--2: clamp(.62rem, .6rem + .1vw, .7rem);      /* 모노 라벨 10~11px */
  --step--1: clamp(.78rem, .74rem + .2vw, .86rem);    /* 보조 12~14px */
  --step-0:  clamp(.92rem, .88rem + .2vw, 1rem);      /* 본문 15~16px */
  --step-1:  clamp(1.05rem, .98rem + .35vw, 1.25rem); /* 강조 본문 */
  --step-2:  clamp(1.5rem, 1.2rem + 1.2vw, 2.3rem);   /* 소제목 */
  --step-3:  clamp(2.3rem, 1.6rem + 2.6vw, 4.1rem);   /* 큰 제목 */
  --step-4:  clamp(2.8rem, 1.8rem + 3.8vw, 5.5rem);   /* 첫 화면 제목 */

  /* 간격 */
  --s1: .35rem; --s2: .7rem; --s3: 1.1rem; --s4: 1.6rem;
  --s5: 2.4rem; --s6: 3.4rem; --s7: 5rem; --s8: 7.5rem;
  --gutter: clamp(20px, 5vw, 84px);
  --measure: 1600px;

  /* 모서리 — 편집형 화면은 직각. 아주 작은 요소만 살짝 깎는다 */
  --r-s: 0; --r-m: 0; --r-l: 0; --r-xl: 0; --r-pill: 0;
  --shadow-1: 0 1px 2px rgba(0,0,0,.25);
  --shadow-2: 0 12px 25px rgba(0,0,0,.28);
  --shadow-3: 0 25px 55px rgba(0,0,0,.42);

  /* 터치 목표 — 장갑 낀 손도 누를 수 있게 */
  --touch: 52px;
  --touch-lg: 61px;

  --ease: cubic-bezier(.2, .7, .3, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* 운영자 화면은 정보 밀도가 높아 살짝 작은 기본 크기 */
[data-density="compact"] {
  --step-0: clamp(.86rem, .82rem + .15vw, .94rem);
  --touch: 44px;
  --touch-lg: 52px;
}

/* 종이색 화면 (운영자가 켤 수 있음 · 밝은 실내, 인쇄 확인용) */
[data-theme="light"] {
  --stage:    var(--event-paper);
  --stage-0:  color-mix(in srgb, var(--event-paper) 94%, #000);
  --stage-1:  #ffffff;
  --stage-2:  #ffffff;
  --stage-3:  color-mix(in srgb, var(--event-paper) 90%, var(--event-sage));
  --stage-4:  color-mix(in srgb, var(--event-paper) 78%, var(--event-sage));
  --text:       var(--event-ink);
  --text-soft:  color-mix(in srgb, var(--event-ink) 74%, var(--event-paper));
  --text-faint: color-mix(in srgb, var(--event-ink) 54%, var(--event-paper));
  --rule:        color-mix(in srgb, var(--event-ink) 16%, transparent);
  --rule-strong: color-mix(in srgb, var(--event-ink) 34%, transparent);
  --overlay: rgba(20, 30, 24, .55);
  --ok:      #2f7d52;   --ok-bg:     #e6f3ea;
  --warn:    #8a5a10;   --warn-bg:   #fdf1d9;
  --danger:  #a93226;   --danger-bg: #fbe9e7;
  --info:    #2c6c96;   --info-bg:   #e5f0f7;
  --shadow-1: 0 1px 2px rgba(31,42,36,.08);
  --shadow-2: 0 10px 24px rgba(31,42,36,.12);
  --shadow-3: 0 20px 50px rgba(31,42,36,.2);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}