/* ============================================================
   브랜드 테마 레이어
   ------------------------------------------------------------
   기능은 한 번만 만들고, 브랜드는 색·서체·형태만 갈아끼운다.

   - 기능 화면(OT 관리, PT 주차별 목표 등)은 브랜드를 모른다. 셸의 의미
     토큰(--surface-*, --text-*, --line-*, --font-*, --radius-*)만 참조한다.
   - 셸(app-shell.js)이 프로필 브랜드를 판정해 body[data-brand="<키>"] 를
     붙이고, 이 파일이 그 스코프 안에서 토큰 값을 브랜드 값으로 바꾼다.
   - 새 브랜드는 아래에 블록 하나만 추가하면 된다. 기능 코드는 손대지 않는다.

   반드시 지킬 것
   - :root 에 선언하지 않는다. 같은 앱의 Formula 모드와 다른 브랜드가 같은
     토큰 이름을 쓰기 때문에 전역 선언은 남의 브랜드까지 물들인다.
   - 기능 화면 CSS 에 브랜드 색을 직접 적지 않는다. 그 순간 그 기능은 한
     브랜드 전용이 된다.

   토큰 원본: design-systems/<brand>/tokens/ (런타임 사본 web/brands/<brand>/).
   이 파일은 사본이 아니라 셸 토큰으로 옮기는 어댑터다.
   기본값(브랜드 미판정)은 제품 팔레트인 GYMTOSS 스틸·시안이며
   css/gymtos-design.css 가 그대로 담당한다.
   ============================================================ */

/* ── Be:Move Gym (비무브짐) ──────────────────────────────────
   각진 형태의 오렌지·차콜 브랜드. 주요 액션은 오렌지 하나로 모은다. */
body[data-brand="bemove"] {
  /* 브랜드 램프 */
  --orange-100: #FDEADF;
  --orange-200: #FACFB6;
  --orange-300: #F5A97F;
  --orange-400: #F0854E;
  --orange-500: #EC662A;
  --orange-600: #D2531B;
  --orange-700: #A94013;
  --charcoal-900: #141414;
  --charcoal-850: #1C1C1C;
  --charcoal-800: #232323;
  --charcoal-700: #353535;
  --charcoal-500: #6B6B6B;
  --charcoal-400: #8E8E8E;
  --charcoal-300: #B5B5B5;
  --charcoal-200: #D6D6D6;
  --charcoal-100: #E9E9E9;
  --charcoal-050: #F4F4F4;
  --chalk: #FAF9F7;
  --white: #FFFFFF;

  /* 셸이 액센트 램프로 쓰는 이름을 브랜드 오렌지로 다시 가리킨다.
     이름은 제품 쪽 유산이지만, 이 축이 곧 "액센트"다. */
  --cyan-050: var(--orange-100);
  --cyan-100: var(--orange-200);
  --cyan-300: var(--orange-400);
  --cyan-500: var(--orange-500);
  --cyan-600: var(--orange-600);
  --cyan-700: var(--orange-700);
  --cyan-900: var(--charcoal-900);

  /* 의미 토큰 */
  --surface-app: var(--chalk);
  --surface-card: var(--white);
  --surface-raised: var(--white);
  --surface-sunken: var(--charcoal-050);
  --surface-inverse: var(--charcoal-900);
  --surface-accent: var(--orange-500);
  --surface-accent-soft: var(--orange-100);
  --surface-hover: var(--charcoal-050);
  --surface-active: var(--charcoal-100);
  --text-strong: var(--charcoal-900);
  --text-body: var(--charcoal-700);
  --text-muted: var(--charcoal-500);
  --text-faint: var(--charcoal-400);
  --text-accent: var(--orange-600);
  --text-on-accent: var(--white);
  --line-hairline: rgb(20 20 20 / 12%);
  --line-strong: rgb(20 20 20 / 22%);
  --line-accent: var(--orange-500);
  --state-success: #2E9E5B;
  --state-warning: #F2B01E;
  --state-danger: #D93A3A;

  /* 서체 — 표시 Oswald, 본문 Barlow/Noto Sans KR, 숫자·코드 IBM Plex Mono */
  --font-display: "Oswald", "Barlow Condensed", "Noto Sans KR", "Apple SD Gothic Neo", sans-serif;
  --font-core: "Barlow", "Noto Sans KR", "Apple SD Gothic Neo", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;

  /* 각진 브랜드 — control 4px / card 6px / sheet 10px 를 넘기지 않는다 */
  --radius-1: 2px;
  --radius-2: 4px;
  --radius-3: 6px;
  --radius-4: 10px;
  --radius: var(--radius-3);

  --elev-1: 0 1px 2px rgb(20 20 20 / 8%);
  --elev-2: 0 2px 8px rgb(20 20 20 / 10%);
  --elev-3: 0 18px 44px -18px rgb(20 20 20 / 45%);
  --shadow: var(--elev-1);
  --ring-focus: 0 0 0 2px var(--surface-app), 0 0 0 4px var(--orange-500);
  --grid-line: rgb(20 20 20 / 6%);

  /* 기존 모듈이 참조하는 호환 별칭 */
  --primary: var(--orange-500);
  --primary-dark: var(--orange-600);
  --primary-light: var(--orange-400);
  --bg: var(--surface-app);
  --card: var(--surface-card);
  --text: var(--text-strong);
  --text-sub: var(--text-muted);
  --border: var(--line-hairline);
  --success: var(--state-success);
  --warning: var(--state-warning);
  --danger: var(--state-danger);
  --pt: var(--orange-500);
  --fc: #2F6FD0;

  /* 브랜드 장식은 쓰지 않는다. 제품 셸의 금속 그라데이션을 중립 면으로 바꾼다. */
  --gradient-steel: linear-gradient(100deg, var(--charcoal-050), var(--white) 50%, var(--charcoal-050));
  --gradient-cyan: linear-gradient(120deg, var(--orange-500), var(--orange-700));
}

/* 다크는 Be:Move 기준 html[data-bemove-theme="dark"] 와 셸 토글
   html[data-formula-theme="dark"] 양쪽에서 같은 값으로 읽히게 한다. */
:root[data-bemove-theme="dark"] body[data-brand="bemove"],
:root[data-formula-theme="dark"] body[data-brand="bemove"] {
  color-scheme: dark;
  --cyan-300: var(--orange-300);
  --cyan-500: var(--orange-400);
  --cyan-600: var(--orange-500);
  --surface-app: var(--charcoal-900);
  --surface-card: var(--charcoal-850);
  --surface-raised: var(--charcoal-800);
  --surface-sunken: #0F0F0F;
  --surface-hover: var(--charcoal-800);
  --surface-active: var(--charcoal-700);
  --surface-accent-soft: rgb(236 102 42 / 16%);
  --text-strong: var(--white);
  --text-body: #E3E3E3;
  --text-muted: var(--charcoal-300);
  --text-faint: var(--charcoal-400);
  --text-accent: var(--orange-400);
  --line-hairline: rgb(255 255 255 / 14%);
  --line-strong: rgb(255 255 255 / 24%);
  --grid-line: rgb(255 255 255 / 6%);
  --ring-focus: 0 0 0 2px var(--surface-app), 0 0 0 4px var(--orange-400);
}

/* ── GYMTOSS (짐토스) ────────────────────────────────────────
   제품 브랜드는 css/gymtos-design.css 의 기본값이 곧 브랜드 값이다.
   같은 축에 있다는 것을 명시하기 위해 스코프만 선언해 둔다.
   브랜드 고유 값이 생기면 여기에 적는다. */
body[data-brand="gymtoss"] {
  --brand-key: "gymtoss";
}