@import url('./assets/fonts/pretendard/pretendardvariable-dynamic-subset.css');

/* Seed tokens from the Danmuzi waitlist designs. See project-docs
   design/tokens/danmuzi-ui-design-tokens.md for scope and Figma references.
   Keep the --dm-ui-* declarations in sync with project-docs design/tokens/danmuji-tokens.css,
   which designer HTML templates load (node scripts/design.mjs check --web <web/>). */
:root,
[data-dm-theme="light"] {
  --dm-ui-canvas: #ffffff;
  --dm-ui-text-primary: #191919;
  --dm-ui-text-secondary: #424242;
  --dm-ui-text-muted: #949494;
  --dm-ui-action-primary-bg: #191919;
  --dm-ui-action-primary-text: #ffffff;

  --dm-ui-font-family: 'Pretendard Variable', 'Pretendard', 'Apple SD Gothic Neo', sans-serif;
  --dm-ui-font-weight-regular: 400;
  --dm-ui-font-weight-semibold: 600;
  --dm-ui-font-size-display: 64px;
  --dm-ui-font-size-kicker: 20px;
  --dm-ui-font-size-body: 14px;
  --dm-ui-font-size-action: 16px;
  --dm-ui-font-size-caption: 13px;
  --dm-ui-radius-pill: 100px;

  /* Derived for shared app components; these are not Figma Variables. */
  --dm-ui-surface: #ffffff;
  --dm-ui-surface-soft: #f5f5f5;
  --dm-ui-border: #e9e9e9;
  --dm-ui-border-strong: #bdbdbd;
  --dm-ui-text-on-action: #ffffff;
  --dm-ui-focus: #191919;
  --dm-ui-kakao: #fee500;
  --dm-ui-kakao-text: #191919;
  --dm-ui-danger: #a7442c;
  --dm-ui-elevation: 0 8px 28px #1919190d;
  --dm-ui-dark-canvas: #202020;
  --dm-ui-dark-text-primary: #f2f2f2;
  --dm-ui-dark-text-secondary: #dfdfdf;
  --dm-ui-dark-text-secondary-mobile: #c9c9c9;
  --dm-ui-dark-text-muted: #828282;
  --dm-ui-dark-action-text: #080808;
  --dm-ui-chat-dark-canvas: #080808;
  --dm-ui-chat-dark-card: #101010;
  --dm-ui-chat-dark-surface: #1f1f1f;
  --dm-ui-chat-dark-ink: #f9f9f9;
  /* Menu surface roles. Hero yellow and rail sizes come from the Figma guide. */
  --dm-ui-menu-hero-bg: #fcea4a;
  --dm-ui-menu-hero-ink: #171717;
  --dm-ui-menu-action-bg: #fff8bf;
  --dm-ui-menu-usage-bg: #fff5ad;
  --dm-ui-menu-usage-track: #e8dc93;
  --dm-ui-menu-rail-closed: 50px;
  --dm-ui-menu-rail-open: 290px;
  --dm-ui-menu-rail-bg: #ffffff;
  --dm-ui-menu-rail-border: #efefef;
  --dm-ui-menu-rail-ink: #191919;
  --dm-ui-menu-rail-hover: #f5f5f5;
  --dm-ui-menu-usage-surface: #ffffff;
  --dm-ui-menu-rail-usage-track: #e9e9e9;
  --dm-ui-menu-usage-fill: #191919;
}

[data-dm-theme="dark"] {
  --dm-ui-canvas: #202020;
  --dm-ui-text-primary: #f2f2f2;
  --dm-ui-text-secondary: #dfdfdf;
  --dm-ui-text-muted: #828282;
  --dm-ui-action-primary-bg: #f2f2f2;
  --dm-ui-action-primary-text: #080808;
  --dm-ui-surface: #292929;
  --dm-ui-surface-soft: #333333;
  --dm-ui-border: #454545;
  --dm-ui-border-strong: #828282;
  --dm-ui-text-on-action: #080808;
  --dm-ui-focus: #f2f2f2;
  --dm-ui-elevation: none;
  --dm-ui-menu-rail-bg: #1f1f1f;
  --dm-ui-menu-rail-border: #303030;
  --dm-ui-menu-rail-ink: #f2f2f2;
  --dm-ui-menu-rail-hover: #303030;
  --dm-ui-menu-usage-surface: #191919;
  --dm-ui-menu-rail-usage-track: #303030;
  --dm-ui-menu-usage-track: #303030;
  --dm-ui-menu-usage-fill: #f2f2f2;
}

@media (max-width: 700px) {
  :root,
  [data-dm-theme="light"] {
    --dm-ui-text-secondary: #595959;
    --dm-ui-font-size-display: 36px;
    --dm-ui-font-size-kicker: 16px;
  }

  [data-dm-theme="dark"] {
    --dm-ui-text-secondary: #c9c9c9;
    --dm-ui-font-size-display: 36px;
    --dm-ui-font-size-kicker: 16px;
  }
}