/* 디자인 토큰: 색·글꼴·간격. 라이트/다크 모두 여기서 정한다.
   흰 종이 + 잉크색 + 코랄 강조색 하나, 투베·BEST는 금색(spec 22.4).
   글자색 대비는 본문 4.5:1 이상으로 맞췄다(--accent-strong 위 흰 글자 4.8:1, --gold-ink 4.5:1 이상).
   글자가 아닌 것(입력칸 테두리, 스위치, 포커스 링, 별)은 3:1 이상이다. */
:root {
  --font: "Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --font-scale: 1;

  --paper: #fffdf8;
  --surface: #ffffff;
  --surface-2: #f7f3ec;     /* 칩·입력칸 바탕 */
  --ink: #1f1d1a;
  --ink-soft: #6b665e;
  --ink-faint: #b3ada3;     /* 장식선(글자에는 쓰지 않는다) */
  --line: #e9e4da;
  --line-strong: #8f887d;   /* 입력칸 테두리·꺼진 스위치(바탕 대비 3:1 이상) */

  --accent: #ff6b5b;        /* 코랄: 주 강조색(장식, 막대) */
  --accent-strong: #cf3f2c; /* 코랄 버튼 바탕, 코랄 글자 */
  --accent-ink: #ffffff;    /* 코랄 버튼 위 글자 */
  --accent-soft: #ffece8;

  --gold: #d4a017;          /* 투베·BEST 장식 */
  --gold-ink: #8a6400;      /* 금색 글자 */
  --gold-soft: #fff6dc;

  --good: #1a7350;          /* --good-soft 위 5.1:1 */
  --good-soft: #e4f4ec;
  --bad: #c23434;
  --on-bad: #ffffff;        /* --bad 바탕 버튼 위 글자 */
  --bad-soft: #fdeaea;
  --warn-soft: #fff1e0;
  --warn-ink: #8a4b00;

  --chart-bar: #e9685a;     /* 조회수 막대(흰 바탕 대비 3:1 이상) */
  --chart-bar-active: #b8321f;
  --chart-line: #1f1d1a;    /* 선호작 선 */

  --meta: #5a4fb0;          /* 특별 엔딩(갈아엎기·작가 회귀) 색 */
  --tip-gold: #d4a017;      /* 그래프 툴팁(진한 바탕) 위 금색 글자 */

  --night: #16172b;         /* 15화 '새벽 3시' 화면 */
  --night-ink: #e9e7f5;

  --radius: 14px;
  --radius-sm: 10px;
  --gap: 16px;
  --shadow: 0 2px 10px rgb(0 0 0 / 0.06);
  --shadow-lg: 0 10px 40px rgb(0 0 0 / 0.18);
  --tap: 44px;              /* 최소 탭 크기 */

  /* 장르 표지 그라디언트(일러스트 없이 색으로만). 회귀는 남보라→자두→붉은 코랄, 아카데미는 짙은 청록→청록→초록,
     로판은 와인→장미→청동 금색. 세 색 모두 흰 글자 대비 4.5:1 이상이라 표지 어디에 글자가 놓여도 읽힌다.
     결과 카드(share-card.js COVERS)도 같은 값을 쓴다. 색을 바꾸면 두 곳을 같이 바꾼다(tests/ui-text.test.mjs가 검사한다). */
  --cover-regression: linear-gradient(160deg, #2d2a4a 0%, #6a3a63 55%, #c0504a 100%);
  --cover-academy: linear-gradient(160deg, #173f4f 0%, #23697a 55%, #3b8160 100%);
  --cover-rofan: linear-gradient(160deg, #4a1d3a 0%, #a8506f 55%, #9a6a1f 100%);

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #141312;
    --surface: #1d1c1a;
    --surface-2: #262420;
    --ink: #f1ede6;
    --ink-soft: #a39d93;
    --ink-faint: #57524b;
    --line: #34312d;
    --line-strong: #807a72;
    --accent: #ff7d6e;
    --accent-strong: #ff7d6e;
    --accent-ink: #141312;
    --accent-soft: #3a211d;
    --gold: #e8b83a;
    --gold-ink: #e8b83a;
    --gold-soft: #2e2510;
    --good: #4cc28e;
    --good-soft: #15291f;
    --bad: #ff7b7b;
    --on-bad: #141312;
    --meta: #ab9fff;
    --tip-gold: #8a6400;
    --bad-soft: #351a1a;
    --warn-soft: #33240f;
    --warn-ink: #f0b46a;
    --chart-bar: #b0574c;
    --chart-bar-active: #ffa194;
    --chart-line: #f1ede6;
    --shadow: none;
    --shadow-lg: 0 10px 40px rgb(0 0 0 / 0.5);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --paper: #141312;
  --surface: #1d1c1a;
  --surface-2: #262420;
  --ink: #f1ede6;
  --ink-soft: #a39d93;
  --ink-faint: #57524b;
  --line: #34312d;
  --line-strong: #807a72;
  --accent: #ff7d6e;
  --accent-strong: #ff7d6e;
  --accent-ink: #141312;
  --accent-soft: #3a211d;
  --gold: #e8b83a;
  --gold-ink: #e8b83a;
  --gold-soft: #2e2510;
  --good: #4cc28e;
  --good-soft: #15291f;
  --bad: #ff7b7b;
  --on-bad: #141312;
  --meta: #ab9fff;
  --tip-gold: #8a6400;
  --bad-soft: #351a1a;
  --warn-soft: #33240f;
  --warn-ink: #f0b46a;
  --chart-bar: #b0574c;
  --chart-bar-active: #ffa194;
  --chart-line: #f1ede6;
  --shadow: none;
  --shadow-lg: 0 10px 40px rgb(0 0 0 / 0.5);
  color-scheme: dark;
}