/* packages/design/tokens.css — bafni.org 서비스(brieFAI·vidFAIT…)가 같이 쓰는 색·그림자·모서리 변수.
   서비스 전용 변수(예: brieFAI 일정 라벨 색)는 각 서비스 CSS의 :root에 둔다. 이 파일을 고치면 모든 서비스 화면이 바뀐다. */
/* bafni 디자인 토큰 — 소프트 헤일로(부드러운 그림자 입체) 화면.
   입체는 세 가지만: 카드(오목) · 패널·버튼(볼록) · 칩(평평). 글자는 12/15 · 14/18 · 16/20 · 20/25 네 단계이며 .hint는 13/17을 쓴다(줄높이 = ceil(크기×1.25)).
   일정은 카드(오목) → 스테이지(볼록·밝은 회색) → 항목(오목·--card)의 세 단계를 쓰고, 스테이지 안 화살표는 --card 색 볼록 버튼이다.
   색은 자유와혁신의 주색·보조색 표(2026-10-11 사용자가 나무위키 표를 확인해 알려 줌)를 그대로 쓴다.
     주색: RED #A50034 · NAVY #051C4C · BLACK #000000 · WHITE #fffff3
     보조색: DARK RED #700024 · CHARCOAL GRAY #374151 · BLUE #416CD9 · SOFT PINK #FDF2F4 · LIGHT GRAY #F9FAFB
   역할: 강조=RED · 글자=NAVY · 보조 글자=CHARCOAL GRAY · 바탕·패널·버튼=LIGHT GRAY · 칩=SOFT PINK 바탕에 DARK RED 글자(일정 라벨 칩은 라벨별 --calendar-* 색) · 그래프 선=CSS의 series 역할 변수.
   WHITE #fffff3은 면에 쓰지 않는다: 회색 카드 위 패널로 칠해 보니 노란 크림색으로 도드라져서 LIGHT GRAY로 바꿨다(그림자의 흰 하이라이트만 흰색).
   표에 없는 값은 입체감을 내려고 표의 색을 섞은 것뿐이다: 카드 #e5e8ed = LIGHT GRAY에 NAVY 8%, 칩 테두리 #ebc2ce = SOFT PINK에 RED 20%, 그림자 = NAVY를 옅게.
   글자 대비(WCAG, 계산값): NAVY 본문은 카드 13.4:1·패널 15.7:1, CHARCOAL 보조 글자는 카드 8.4:1·패널 9.9:1, RED 글자는 카드 6.5:1·패널 7.6:1, 칩 글자는 11.2:1이다.
   BLUE는 패널·툴팁 위에서만 글자로 쓴다(4.60:1). 툴팁은 뒤의 선이 비치면 4.2:1까지 떨어지므로 불투명하게 칠한다. 카드 바탕 위에서는 3.9:1이라 글자로 쓰지 않는다. 그래프 선·점·범례·툴팁은 같은 series 변수를 참조한다. */
/* 색은 여기서 정의하고 각 요소는 역할 변수를 참조한다. */
:root {
  color-scheme: light;
  --red: #A50034;
  --navy: #051C4C;
  --black: #000000;
  --white: #fffff3;
  --dark-red: #700024;
  --charcoal: #374151;
  --blue: #416CD9;
  --soft-pink: #FDF2F4;
  --light-gray: #F9FAFB;
  --highlight-base: #ffffff;
  --bg: var(--light-gray);
  --card: #e5e8ed;
  --panel: var(--light-gray);
  --button: var(--light-gray);
  --chip: var(--soft-pink);
  --chip-line: #ebc2ce;
  --chip-ink: var(--dark-red);
  --ink: var(--navy);
  --ink-soft: var(--charcoal);
  --line: color-mix(in srgb, var(--navy) 10%, transparent);
  --accent: var(--red);
  --shadow-dark: 5, 28, 76;
  --shadow-panel: 5, 28, 76;
  --surface-highlight-anchor: var(--highlight-base);
  --shadow-pressed-subtle: rgba(var(--shadow-dark), .2);
  --shadow-inset-wide: rgba(var(--shadow-dark), .30);
  --shadow-inset-edge: rgba(var(--shadow-dark), .18);
  --shadow-inset-strong: rgba(var(--shadow-dark), .45);
  --shadow-inset-short: rgba(var(--shadow-dark), .25);
  --shadow-label: rgba(var(--shadow-dark), .4);
  --shadow-raised: rgba(var(--shadow-panel), .10);
  --shadow-hover: rgba(var(--shadow-panel), .22);
  --shadow-tooltip: rgba(var(--shadow-panel), .16);
  --shadow-hover-strong: rgba(var(--shadow-panel), .31);
  --highlight-pressed: color-mix(in srgb, var(--highlight-base) 90%, transparent);
  --highlight-panel: color-mix(in srgb, var(--highlight-base) 62%, transparent);
  --highlight-button: color-mix(in srgb, var(--highlight-base) 58%, transparent);
  --highlight-hover: color-mix(in srgb, var(--highlight-base) 67%, transparent);
  --highlight-label: color-mix(in srgb, var(--highlight-base) 85%, transparent);
  --chart-grid: color-mix(in srgb, var(--navy) 8%, transparent);
  --chart-cursor: color-mix(in srgb, var(--navy) 30%, transparent);
  --series-0: var(--red);
  --series-1: var(--blue);
  --series-2: var(--navy);
  --series-3: var(--charcoal);
  --series-4: var(--black);
  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23051C4C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  --select-chevron-selected: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23A50034' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  --logo-ink: var(--white);
  --logo-filter: none;
  --browser-chrome: var(--bg);
  --radius-card: 24px;
  --radius-panel: 22px;
  --radius-button: 12px;
  --radius-chip: 7px;
}
/* 공식 BI의 BLACK과 CHARCOAL 혼합으로 면을 구분하고 새 색상 계열은 더하지 않는다. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: var(--black);
  --card: color-mix(in srgb, var(--charcoal) 45%, var(--black));
  --panel: color-mix(in srgb, var(--charcoal) 72%, var(--black));
  --button: var(--charcoal);
  --chip: var(--dark-red);
  --chip-line: color-mix(in srgb, var(--red) 60%, var(--soft-pink));
  --chip-ink: var(--soft-pink);
  --ink: var(--white);
  --ink-soft: color-mix(in srgb, var(--light-gray) 78%, var(--charcoal));
  --line: color-mix(in srgb, var(--light-gray) 20%, var(--charcoal));
  --accent: var(--soft-pink);
  --shadow-dark: 0, 0, 0;
  --shadow-panel: 0, 0, 0;
  --surface-highlight-anchor: color-mix(in srgb, var(--card) 85%, var(--light-gray));
  --shadow-inset-wide: rgba(var(--shadow-dark), .5);
  --shadow-inset-edge: rgba(var(--shadow-dark), .28);
  --shadow-inset-strong: rgba(var(--shadow-dark), .5);
  /* 날짜 모달 배경막 전용. 검정 투명도는 이미 검정인 페이지 바탕 자체를 더 어둡게 만들지는 못하지만
     뒤에 떠 있는 카드·패널(검정보다 밝은 면)은 확실히 가려야 하므로 50%보다 짙은 60%를 쓴다. */
  --shadow-backdrop-strong: rgba(var(--shadow-dark), .6);
  --shadow-raised: rgba(var(--shadow-panel), .3);
  --shadow-hover: rgba(var(--shadow-panel), .45);
  --shadow-tooltip: rgba(var(--shadow-panel), .45);
  --shadow-hover-strong: rgba(var(--shadow-panel), .45);
  --highlight-pressed: color-mix(in srgb, var(--light-gray) 6%, transparent);
  --highlight-panel: color-mix(in srgb, var(--light-gray) 7%, transparent);
  --highlight-button: color-mix(in srgb, var(--light-gray) 6.5%, transparent);
  --highlight-hover: color-mix(in srgb, var(--light-gray) 8%, transparent);
  --highlight-label: color-mix(in srgb, var(--light-gray) 10%, transparent);
  --chart-grid: color-mix(in srgb, var(--light-gray) 10%, transparent);
  --chart-cursor: var(--ink-soft);
  --series-0: color-mix(in srgb, var(--red) 35%, var(--soft-pink));
  --series-1: color-mix(in srgb, var(--blue) 40%, var(--light-gray));
  --series-2: var(--white);
  --series-3: color-mix(in srgb, var(--light-gray) 60%, var(--charcoal));
  --series-4: var(--soft-pink);
  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23fffff3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  --select-chevron-selected: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23FDF2F4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  --logo-filter: url(#brand-white);
}