/* ============================================================
   RebeautyLive — design tokens
   Light / Dark / Stage(항상 어두운 통화 레이어).
   대비율은 실측 검증됨: 본문 ≥4.5:1, 인터랙티브 경계 ≥3:1.
   앱(Flutter ThemeExtension)과 같은 토큰명을 공유한다.
   ============================================================ */

:root{
  /* ── surface ── */
  --surface-canvas:#F4F7F8;
  --surface:#FFFFFF;
  --surface-raised:#FFFFFF;
  --surface-sunken:#EAF0F1;
  --surface-inset:#F8FBFB;
  --surface-overlay:#FFFFFF;
  --surface-scrim:rgba(6,20,24,.55);

  /* ── border ── */
  --border-subtle:#E4EBED;
  --border:#D6E0E2;
  --border-interactive:#7A9299;   /* 3.28:1 vs #FFF — 폼 컨트롤 전용 */
  --border-strong:#68828A;

  /* ── text ── */
  --text-primary:#10242B;    /* 16.04:1 */
  --text-secondary:#4A5F66;  /*  6.73:1 */
  --text-tertiary:#5F757B;   /*  4.86:1 */
  --text-disabled:#94A9AE;
  --text-on-brand:#FFFFFF;

  /* ── brand ── */
  --brand:#0E7C86;           /* 4.95:1 */
  --brand-hover:#0A6570;
  --brand-active:#0A5A62;
  --brand-soft:#E6F4F5;
  --brand-soft-hover:#D3ECEE;
  --brand-on-soft:#0A5A62;
  --accent:#2FB5C4;          /* 장식 전용 — 본문 텍스트 금지 */

  /* ── role ── */
  --doctor:#0E7C86;  --doctor-soft:#E6F4F5;  --doctor-on-soft:#0A5A62;
  --patient:#4B4BC4; --patient-soft:#EDEDFB; --patient-on-soft:#4B4BC4;
  --patient-bright:#5B5BD6;

  /* ── semantic ── */
  --success:#0B7A54; --success-soft:#E3F5EC; --success-on-soft:#0B7A54;
  --warning:#B8730A; --warning-soft:#FFF4E0; --warning-on-soft:#8A5200;
  --danger:#C2352F;  --danger-soft:#FDECEB;  --danger-on-soft:#C2352F;
  --info:#1F5FBF;    --info-soft:#E8F0FC;    --info-on-soft:#1F5FBF;

  --focus:#0E7C86;
  --focus-halo:rgba(14,124,134,.32);

  /* ── typography ── */
  --font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI Variable Text","Segoe UI",
    Pretendard,"Pretendard Variable",Roboto,"Helvetica Neue",
    "Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic","맑은 고딕",
    "Noto Sans","Noto Sans Arabic","Segoe UI Arabic","Geeza Pro",Tahoma,Arial,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;

  /* ── spacing / radius ── */
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-8:32px; --sp-10:40px;--sp-12:48px;--sp-16:64px;--sp-20:80px;
  --sec-y:clamp(48px,7vw,88px);
  --gutter:clamp(16px,4vw,24px);
  --wrap:1120px; --wrap-narrow:760px;

  --r-xs:6px; --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:24px; --r-2xl:32px; --r-full:999px;

  /* ── elevation ── */
  --shadow-1:0 1px 2px rgba(16,36,43,.06),0 1px 1px rgba(16,36,43,.04);
  --shadow-2:0 2px 4px rgba(16,36,43,.05),0 4px 12px -2px rgba(16,36,43,.08);
  --shadow-3:0 4px 8px rgba(16,36,43,.05),0 12px 28px -6px rgba(16,36,43,.12);
  --shadow-4:0 8px 16px rgba(16,36,43,.06),0 24px 48px -12px rgba(16,36,43,.18);
  --shadow-brand:0 6px 16px -6px rgba(14,124,134,.45);

  /* ── motion ── */
  --dur-instant:80ms; --dur-fast:140ms; --dur-base:200ms; --dur-slow:300ms; --dur-slower:460ms;
  --ease-standard:cubic-bezier(.2,0,0,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-in:cubic-bezier(.4,0,1,1);
  --ease-spring:cubic-bezier(.34,1.4,.5,1);

  /* ── stage : 테마와 무관하게 항상 어두운 통화 레이어 ── */
  --stage-bg:#0A1518;
  --stage-scrim:linear-gradient(to top,rgba(4,12,15,.88) 0%,rgba(4,12,15,.55) 42%,transparent 100%);
  --stage-chrome:rgba(19,43,50,.72);
  --stage-chrome-hover:rgba(30,60,69,.85);
  --stage-chrome-border:rgba(255,255,255,.14);
  --stage-text:#E6F0F1;
  --stage-text-dim:#9FB4BA;
  --sub-doctor-bg:#0A6570;  --sub-doctor-fg:#FFFFFF;
  --sub-patient-bg:#4B4BC4; --sub-patient-fg:#FFFFFF;
  --sub-peer-bg:#F2F7F8;    --sub-peer-fg:#10242B;
  --stage-live:#35D6A0; --stage-rec:#FF5C54; --stage-warn:#F2B44C; --stage-idle:#7A9198;
}

/* ============================ DARK ============================ */
:root[data-theme="dark"]{
  --surface-canvas:#071316;
  --surface:#0D1F24;
  --surface-raised:#142A31;
  --surface-overlay:#1A343B;
  --surface-sunken:#050F12;
  --surface-inset:#0A1B20;
  --surface-scrim:rgba(0,0,0,.66);

  --border-subtle:#1E373E;
  --border:#244048;
  --border-interactive:#5A828D;
  --border-strong:#648D97;

  --text-primary:#E6F0F1;
  --text-secondary:#A2B7BC;
  --text-tertiary:#7A9198;
  --text-disabled:#5C777F;
  --text-on-brand:#04252A;      /* * 다크에선 브랜드 버튼 글자가 잉크로 반전 */

  --brand:#3FC0CE;
  --brand-hover:#63D2DD;
  --brand-active:#2FA9B7;
  --brand-solid:#35B6C4;
  --brand-soft:#12333A;
  --brand-soft-hover:#17414A;
  --brand-on-soft:#7FE0EA;
  --accent:#5FD3E0;

  --doctor:#47C6D2;  --doctor-soft:#10323A;  --doctor-on-soft:#7FE0EA;
  --patient:#A5A6F6; --patient-soft:#1E1F45; --patient-on-soft:#BDBEF9;
  --patient-bright:#A5A6F6;

  --success:#3FD69B; --success-soft:#0F2E24; --success-on-soft:#5FE0AC;
  --warning:#F2B44C; --warning-soft:#332413; --warning-on-soft:#F5C377;
  --danger:#FF7A72;  --danger-soft:#33191A;  --danger-on-soft:#FF8F88;
  --info:#6BA6F5;    --info-soft:#12294A;    --info-on-soft:#8FBEF8;

  --focus:#3FC0CE; --focus-halo:rgba(63,192,206,.38);

  --shadow-1:0 1px 2px rgba(0,0,0,.40);
  --shadow-2:0 2px 6px rgba(0,0,0,.45),0 8px 20px -6px rgba(0,0,0,.50);
  --shadow-3:0 4px 10px rgba(0,0,0,.50),0 16px 36px -8px rgba(0,0,0,.60);
  --shadow-4:0 24px 56px -12px rgba(0,0,0,.72);
  --shadow-brand:0 6px 20px -8px rgba(63,192,206,.40);
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --surface-canvas:#071316; --surface:#0D1F24; --surface-raised:#142A31;
    --surface-overlay:#1A343B; --surface-sunken:#050F12; --surface-inset:#0A1B20;
    --surface-scrim:rgba(0,0,0,.66);
    --border-subtle:#1E373E; --border:#244048; --border-interactive:#5A828D; --border-strong:#648D97;
    --text-primary:#E6F0F1; --text-secondary:#A2B7BC; --text-tertiary:#7A9198;
    --text-disabled:#5C777F; --text-on-brand:#04252A;
    --brand:#3FC0CE; --brand-hover:#63D2DD; --brand-active:#2FA9B7; --brand-solid:#35B6C4;
    --brand-soft:#12333A; --brand-soft-hover:#17414A; --brand-on-soft:#7FE0EA; --accent:#5FD3E0;
    --doctor:#47C6D2; --doctor-soft:#10323A; --doctor-on-soft:#7FE0EA;
    --patient:#A5A6F6; --patient-soft:#1E1F45; --patient-on-soft:#BDBEF9; --patient-bright:#A5A6F6;
    --success:#3FD69B; --success-soft:#0F2E24; --success-on-soft:#5FE0AC;
    --warning:#F2B44C; --warning-soft:#332413; --warning-on-soft:#F5C377;
    --danger:#FF7A72; --danger-soft:#33191A; --danger-on-soft:#FF8F88;
    --info:#6BA6F5; --info-soft:#12294A; --info-on-soft:#8FBEF8;
    --focus:#3FC0CE; --focus-halo:rgba(63,192,206,.38);
    --shadow-1:0 1px 2px rgba(0,0,0,.40);
    --shadow-2:0 2px 6px rgba(0,0,0,.45),0 8px 20px -6px rgba(0,0,0,.50);
    --shadow-3:0 4px 10px rgba(0,0,0,.50),0 16px 36px -8px rgba(0,0,0,.60);
    --shadow-4:0 24px 56px -12px rgba(0,0,0,.72);
    --shadow-brand:0 6px 20px -8px rgba(63,192,206,.40);
  }
}

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

/* ── 모바일 밀도 ──
   페이지들이 여백을 전부 --sp-* 토큰으로 잡고 있어(인라인 style 포함),
   토큰 값을 줄이는 것이 화면 전체를 한 번에 컴팩트하게 만드는 가장 확실한 방법이다.
   개별 규칙을 !important 로 덮어쓰는 것보다 안전하고 일관적이다. */
@media(max-width:640px){
  :root{
    --sp-2:7px;  --sp-3:10px; --sp-4:12px; --sp-5:14px;
    --sp-6:16px; --sp-8:20px; --sp-10:24px; --sp-12:28px; --sp-16:32px; --sp-20:40px;
    --sec-y:20px;
    --gutter:14px;
    --r-lg:14px; --r-xl:18px; --r-2xl:22px;
  }
}