@font-face {
  font-family: "Orbit";
  src: url("fonts/Orbit-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

/* ponytail: 현재 랜딩 문구 글리프만 포함한다. 문구를 늘리면 공식 원본에서 subset을 다시 만든다. */
@font-face {
  font-family: "Gowun Batang";
  src: url("fonts/GowunBatang-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Gowun Batang";
  src: url("fonts/GowunBatang-Bold.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  color-scheme: light;

  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;

  --dur-fast: 150ms;
  --dur-base: 260ms;
  --dur-flip: 1800ms;
  --ease-sand: cubic-bezier(.22, .61, .36, 1);

  --font-body: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  --font-display: var(--font-body);
  --font-accent: "Orbit", ui-monospace, monospace;
  --font-hero: "Gowun Batang", "AppleMyungjo", "Noto Serif KR", serif;

  --bg: #D5C0AA;
  --bg-elevated: #DEC9B3;
  --surface: #C8AE94;
  --border: #AA8C70;

  --ink: #2D1C14;
  --ink-dim: #614534;
  /* 클레이 배경 위 4.5:1을 넘기는 선. 이 토큰은 장식 번호뿐 아니라 입력 placeholder에도
     쓰여서 본문 기준을 지켜야 한다(이전 #80634F는 3.13:1로 미달이었다). */
  --ink-faint: #674A39;

  --sand: #4E8F82;
  --sand-hi: #6FB0A2;
  --sand-dim: #2E5E55;
  --glass: #9E8B7D;

  --hourglass-sand: #E3BE63;
  --hourglass-sand-hi: #F4D992;
  --hourglass-sand-dim: #AE8438;
  --hourglass-glass: #C9C0AC;
  --hourglass-frame: #AE7A4B;
  --hourglass-frame-dark: #7A4E2E;
  --hourglass-key: #FFF4E4;
  --hourglass-fill: #D5C0AA;

  --frame: #5C3A27;
  --frame-dark: #2D1C14;
  --primary-ink: #D5C0AA;

  --focus-ring: #3D261A;
  --brand-ink: color-mix(in srgb, var(--ink) 88%, var(--hourglass-sand));

  /* 뉴모 CTA 글자색. UI 강조 틸(--sand)은 라이트의 웜 클레이/우드 톤과 충돌해
     클레이 배경 위 대비도 2:1대로 낮다. 라이트는 딥 우드, 다크는 틸을 유지한다. */
  --cta-ink: #5C3A27;
  --cta-ink-hover: #7A4E2E;

  /* 기기 연결 QR. 스캐너는 높은 명암비만 요구하므로 순백·순흑 대신 팔레트에 어울리는
     오프화이트/딥 잉크를 쓴다(약 17:1). 이 둘만은 테마를 따르지 않는다 — 테마색을 그대로
     쓰면 다크에서 배경과 모듈이 모두 어두워져 인식이 안 된다. */
  --qr-bg: #FAF6F0;
  --qr-ink: #191414;

  --shadow-dark: #B49A80;
  --shadow-light: #E5D0B9;
  --neumo-raised: 10px 10px 22px var(--shadow-dark), -10px -10px 22px var(--shadow-light);
  --neumo-small: 5px 5px 12px var(--shadow-dark), -5px -5px 12px var(--shadow-light);
  --neumo-inset: inset 5px 5px 12px var(--shadow-dark), inset -5px -5px 12px var(--shadow-light);
}

[data-theme="dark"] {
  color-scheme: dark;

  /* 다크도 캡·광원·모래·프레임의 네 원색만 교체한다. */
  --palette-ground: #111210;
  /* 광원을 중성 근백색이 아니라 톤다운 틸로 둔다. 이 한 값이 글자(--ink 계열)·면·테두리·
     뉴모 하이라이트를 전부 만들기 때문에, 여기만 바꾸면 UI에서 흰 기가 사라진다.
     모래시계는 --hourglass-* 만 쓰므로 이 변경의 영향을 받지 않는다(모래색 보존).
     --palette-sand(#57B8B0)와 같은 색상 계열을 채도만 낮춰 잡았다. 배경 대비 10.4:1(AAA). */
  --palette-light: #A6C6C2;
  --palette-sand: #57B8B0;
  --palette-frame: #050605;

  --bg: var(--palette-ground);
  --bg-elevated: color-mix(in srgb, var(--palette-ground) 94%, var(--palette-light));
  --surface: color-mix(in srgb, var(--palette-ground) 90%, var(--palette-light));
  --border: color-mix(in srgb, var(--palette-ground) 78%, var(--palette-light));

  --ink: var(--palette-light);
  --ink-dim: color-mix(in srgb, var(--palette-light) 74%, var(--bg));
  /* 55%는 근백색 광원 기준으로 잡힌 값이라, 광원이 어두워진 지금은 4.5:1 아래로 떨어진다.
     --ink-faint는 장식 번호만이 아니라 입력 placeholder에도 쓰이므로 본문 기준을 지켜야 한다. */
  --ink-faint: color-mix(in srgb, var(--palette-light) 66%, var(--bg));

  --sand: var(--palette-sand);
  --sand-hi: color-mix(in srgb, var(--palette-sand) 72%, var(--palette-light));
  --sand-dim: color-mix(in srgb, var(--palette-sand) 38%, var(--bg));
  --glass: color-mix(in srgb, var(--palette-light) 42%, var(--bg));

  --hourglass-sand: #57B8B0;
  --hourglass-sand-hi: #83D7D0;
  --hourglass-sand-dim: #204B48;
  --hourglass-glass: #606862;
  --hourglass-frame: #443A32;
  --hourglass-frame-dark: #080A09;
  --hourglass-key: #D8DAD6;
  --hourglass-fill: #111210;

  --frame: var(--palette-frame);
  --frame-dark: var(--palette-ground);
  --primary-ink: var(--bg);

  --focus-ring: var(--palette-sand);

  /* 다크는 틸 CTA가 흑단 배경과 잘 맞으므로 유지 */
  --cta-ink: var(--sand);
  --cta-ink-hover: var(--sand-hi);

  --shadow-dark: var(--palette-frame);
  --shadow-light: color-mix(in srgb, var(--bg) 85%, var(--palette-light));
}