/* ==========================================================================
   NautilusPoll - Design Tokens (DARK ONLY)
   Source of truth: design/DESIGN.dark.md
   There is no light theme. These values do not swap.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* --- Brand & Accent ---------------------------------------------------- */
  --color-primary:              #e60023;  /* filled CTA background only */
  --color-primary-hover:        #f5183a;
  --color-primary-pressed:      #c2001d;
  --color-primary-text:         #ff5c72;  /* red as TEXT/ICON on dark (5.72:1) */
  --color-primary-tint:         rgba(230, 0, 35, 0.14);
  --color-primary-tint-border:  #5c1420;
  --color-on-primary:           #ffffff;  /* 4.78:1 on --color-primary */

  /* --- Surface ladder (elevation = lightness, not shadow) ----------------- */
  --color-canvas:               #0f0f0d;  /* L0 ground */
  --color-surface-soft:         #151512;  /* L1 wash */
  --color-surface-card:         #1c1c18;  /* L2 card - the workhorse */
  --color-surface-raised:       #232320;  /* L3 nested / hovered */
  --color-surface-overlay:      #2a2a26;  /* L4 menu / tooltip / modal */
  --color-scrim:                rgba(0, 0, 0, 0.72);

  --color-secondary-bg:         #2a2a26;
  --color-secondary-hover:      #333330;
  --color-secondary-pressed:    #3b3b36;

  --color-hairline:             #302f2a;
  --color-hairline-soft:        #26251f;

  /* --- Text ramp --------------------------------------------------------- */
  --color-ink:                  #f5f5f0;  /* 15.63:1 on card - never #fff */
  --color-body:                 #dcdcd4;  /* 12.40:1 - DEFAULT for prose */
  --color-mute:                 #9a9a92;  /*  6.03:1 - metadata */
  --color-ash:                  #8a8a82;  /*  4.91:1 - placeholder; floor for live text */
  --color-stone:                #5a5a54;  /*  2.46:1 - NON-TEXT: disabled borders/fills only */

  /* --- Semantic (always shipped with icon + label) ----------------------- */
  --color-success:              #0ca30c;
  --color-success-text:         #3fcf6e;
  --color-success-bg:           #0f2a18;
  --color-warning:              #fab219;
  --color-warning-bg:           #33260a;
  --color-serious:              #ec835a;
  --color-serious-bg:           #33200f;
  --color-critical:             #d03b3b;
  --color-critical-text:        #ff7a7a;
  --color-critical-bg:          #331414;

  --color-focus-outer:          #6e86ff;
  --color-focus-inner:          #0f0f0d;

  /* --- Editorial accents ------------------------------------------------- */
  --color-accent-blue:          #6e86ff;
  --color-accent-purple:        #b18af5;
  --color-accent-purple-deep:   #9085e9;

  /* --- Data viz: categorical (FIXED ORDER, never cycled, never past 8) ---- */
  --viz-series-1:               #3987e5;  /* blue   - the default single series */
  --viz-series-1-dim:           #2a78d6;  /* de-emphasised same hue */
  --viz-series-2:               #d95926;  /* orange */
  --viz-series-3:               #199e70;  /* aqua   - all-pairs cap is slot 3 */
  --viz-series-4:               #c98500;  /* yellow */
  --viz-series-5:               #d55181;  /* magenta */
  --viz-series-6:               #008300;  /* green  */
  --viz-series-7:               #9085e9;  /* violet */
  --viz-series-8:               #e66767;  /* red    */

  /* --- Political data colours (2026-08-18) ---------------------------------
     정당·진영·등락은 **데이터의 뜻이 색에 붙어 있는** 예외다. 브랜드 레드 규칙과 별개로,
     여기 값만 쓴다. Web(13_Main-Web) 의 실측값을 그대로 옮겼다 - 두 화면이 같은 자료를
     다른 색으로 그리면 같은 회사 화면끼리 어긋난다.
     ★ 이 색은 데이터에만 붙는다: 정당 막대·정당 점·진영 칸·등락 화살표. 제목·버튼·배경 금지. */
  --pol-dpk:                    #152484;  /* 더불어민주당 · 진보 진영 */
  --pol-ppp:                    #e61e2b;  /* 국민의힘 · 보수 진영 */
  --pol-reform:                 #ff7210;  /* 개혁신당 */
  --pol-rebuild:                #0073cf;  /* 조국혁신당 */
  --pol-etc:                    #9ca3af;  /* 그 밖 정당·무소속 */
  --pol-approve:                #76b900;  /* 국정 긍정 */
  --pol-disapprove:             #9ca3af;  /* 국정 부정 */
  --pol-up:                     #dc2626;  /* 등락 ▲ */
  --pol-down:                   #2563eb;  /* 등락 ▼ */
  /* --- 같은 색의 **글자용** 변형 (2026-08-19) --------------------------------
     위 값은 Web(흰 바탕) 실측값이라 검정 바탕에서 글자로 쓰면 읽히지 않는다.
     실측: 카드 배경 #1c1c18 대비 민주 1.32:1 · 국힘 3.73:1 · 조국 3.54:1 (본문 기준 4.5:1 미달).
     색상(hue)·채도는 그대로 두고 **밝기만** 올려 4.7:1 을 넘긴 값이다 - 같은 정당으로 읽히면서
     읽을 수는 있어야 한다.
     ★ 쓰임이 갈린다: **글자는 -text, 칠(막대·점·칸 배경)은 원래 값.**
       칠은 배경 대비 3:1 만 넘기면 되고, 원색이어야 Web 과 같은 색으로 보인다. */
  --pol-dpk-text:               #6e7ee8;
  --pol-ppp-text:               #ec505b;
  --pol-reform-text:            #ff7210;  /* 6.24:1 - 원래 값으로 충분 */
  --pol-rebuild-text:           #008af8;
  --pol-etc-text:               #9ca3af;  /* 6.73:1 - 원래 값으로 충분 */
  --pol-up-text:                #e55b5b;
  --pol-down-text:              #5484ef;

  /* 진영 칸 배경(선거 히트맵). 검정 바탕이라 알파로 얹는다 - Web 의 연한 분홍/파랑 대응 */
  --pol-ppp-bg:                 rgba(230, 30, 43, 0.22);
  --pol-dpk-bg:                 rgba(21, 36, 132, 0.45);
  --pol-etc-bg:                 rgba(156, 163, 175, 0.18);

  /* --- Data viz: sequential (blue, light -> dark) ------------------------- */
  --viz-seq-100:                #cde2fb;
  --viz-seq-150:                #b7d3f6;
  --viz-seq-200:                #9ec5f4;
  --viz-seq-250:                #86b6ef;
  --viz-seq-300:                #6da7ec;
  --viz-seq-350:                #5598e7;
  --viz-seq-400:                #3987e5;
  --viz-seq-450:                #2a78d6;
  --viz-seq-500:                #256abf;
  --viz-seq-550:                #1c5cab;
  --viz-seq-600:                #184f95;  /* ordinal dark-end floor (2.11:1) */
  --viz-seq-650:                #104281;

  /* --- Data viz: diverging (blue <-> red, neutral gray midpoint) ---------- */
  --viz-div-neg:                #3987e5;
  --viz-div-mid:                #383835;
  --viz-div-pos:                #e66767;

  /* --- Data viz: chrome --------------------------------------------------- */
  --viz-surface:                #1c1c18;
  --viz-plane:                  #0f0f0d;
  --viz-ink:                    #f5f5f0;
  --viz-ink-secondary:          #dcdcd4;
  --viz-ink-muted:              #898781;  /* axis + tick labels */
  --viz-gridline:               #2c2c2a;  /* 1px SOLID, never dashed */
  --viz-baseline:               #383835;
  --viz-ring:                   rgba(245, 245, 240, 0.10);

  /* --- Typography ---------------------------------------------------------
     행간은 원본 시스템(라틴 전용)에서 **한글 기준으로 올렸다.**
     한글은 음절이 사각 블록이라 x-height 만 채우는 라틴 소문자보다 세로로 꽉 찬다.
     영문에서 편안한 1.15~1.4 가 한글에서는 줄이 붙어 보이므로,
     본문 1.65 · 제목 1.28~1.48 로 조정했다. 원본과 값이 갈리는 유일한 축이다.
     hero-figure(1.0)와 button(1) 은 줄바꿈이 없는 단일 행이라 그대로 둔다. */
  --font-sans: "Pretendard Variable", Pretendard, Inter, -apple-system, system-ui,
    "Segoe UI", Roboto, "Helvetica Neue", "Apple SD Gothic Neo", "Noto Sans KR",
    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";

  --text-display-xl:    600 70px/1.2  var(--font-sans);
  --text-display-lg:    700 44px/1.28 var(--font-sans);
  --text-hero-figure:   600 48px/1.0  var(--font-sans);
  --text-heading-xl:    700 28px/1.38 var(--font-sans);
  --text-heading-lg:    600 22px/1.42 var(--font-sans);
  --text-heading-md:    600 18px/1.48 var(--font-sans);
  --text-body-md:       400 16px/1.65 var(--font-sans);
  --text-body-strong:   600 16px/1.65 var(--font-sans);
  --text-body-sm:       400 14px/1.6  var(--font-sans);
  --text-body-sm-strong:700 14px/1.6  var(--font-sans);
  --text-numeric-md:    600 16px/1.4  var(--font-sans);
  --text-caption-md:    500 12px/1.55 var(--font-sans);
  --text-caption-sm:    400 12px/1.5  var(--font-sans);
  --text-link-md:       600 16px/1.65 var(--font-sans);
  --text-button-md:     700 14px/1    var(--font-sans);
  --text-button-sm:     700 12px/1    var(--font-sans);

  /* dark-mode optical tracking: negative at display, POSITIVE under 16px */
  --track-display-xl:   -1.2px;
  --track-display-lg:   -0.8px;
  --track-hero-figure:  -0.5px;
  --track-heading-xl:   -1.2px;
  --track-body-sm:       0.1px;
  --track-caption:       0.15px;

  /* --- Spacing (8px base) -------------------------------------------------- */
  --space-xxs:      4px;
  --space-xs:       6px;
  --space-sm:       8px;
  --space-md:      12px;
  --space-lg:      16px;
  --space-xl:      24px;
  --space-xxl:     32px;
  --space-section: 64px;

  /* --- Radius (three chrome values + one data value) ---------------------- */
  --radius-none:  0px;
  --radius-sm:    8px;
  --radius-md:   16px;   /* dominant component radius */
  --radius-lg:   32px;   /* large cards, modals */
  --radius-full: 9999px;
  --radius-bar:   4px;   /* DATA only - result-bar data-end. Never on chrome. */
  --radius-mark:  3px;   /* DATA only - 10px 색 마크(.swatch). 값 자체는 새것이 아니다:
                            .legend__mark·.spell-dot·.kw-dot 세 곳에 3px 리터럴로 이미 있었고
                            이름만 준 것이다. --radius-bar(4px)를 쓰지 않는 이유는 그쪽이
                            "막대의 끝" 전용이라고 규정돼 있고, 10px 정사각에 4px 를 주면
                            거의 원이 되기 때문이다. 근거: DESIGN.dark.md > Shapes. */

  /* --- Elevation (L0-L3 have NO shadow; depth is surface lightness) ------- */
  --shadow-l0: none;
  --shadow-l1: none;
  --shadow-l2: none;
  --shadow-l3: none;
  --shadow-l4: 0 8px 24px rgba(0, 0, 0, 0.50);
  --shadow-l5: 0 16px 48px rgba(0, 0, 0, 0.64);

  /* --- Layout ------------------------------------------------------------- */
  --container-max:      1280px;
  --container-instrument: 720px;  /* composer / vote / results column */
  /* 로그인·가입·비밀번호 재설정 기둥. 입력 두어 칸이 전부인 화면이라 본문 폭(720)을 쓰면
     빈 좌우가 넓어 폼이 헐거워 보인다. Poll 이 이 값을 인라인으로 갖고 있던 것을
     토큰으로 올렸다 (2026-08-15 대표님 "poll 로그인창 사이즈가 좋아보임"). */
  --container-auth:     460px;
  /* 요금제 기둥. 본문(720)보다 넓다 - 요금제는 **선택지를 나란히 놓고 비교**하는 화면이라
     카드가 3개 이상이면 720 에서 글자가 세로로 무너진다(Poll 이 4단계다).
     Poll 이 인라인 1080 으로 갖고 있던 값을 토큰으로 올렸다(2026-08-16) - 두 곳에 있으면
     한쪽만 바뀌고, 그게 "디자인이 사이트마다 다르다" 가 되는 경로다. */
  --container-pricing:  1080px;

  /* --- Motion ------------------------------------------------------------- */
  --ease:          cubic-bezier(0.2, 0, 0, 1);
  --dur-state:     120ms;
  --dur-enter:     200ms;
  --dur-modal:     320ms;
}

/* ==========================================================================
   Base
   ========================================================================== */

body {
  background: var(--color-canvas);
  color: var(--color-body);
  font: var(--text-body-md);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Universal focus rule - never remove without a replacement */
:focus-visible {
  outline: 2px solid var(--color-focus-outer);
  outline-offset: 2px;
  border-radius: inherit;
}

/* ==========================================================================
   Reduced motion - disables ALL bar animation and transitions
   ========================================================================== */

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

/* ==========================================================================
   Forced colors - texture channel takes over from hue
   ========================================================================== */

@media (forced-colors: active) {
  .result-bar__fill { forced-color-adjust: none; background: CanvasText; }
  .poll-status-pill { border: 1px solid CanvasText; }
}