/* The Den — design-system tokens (from the Claude Design project) and their
   mapping onto the shared app's --app-* variables. Dark, warm, one ember accent. */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Mulish:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

:root {
  --char-950: #0C0B0A; --char-900: #141312; --char-850: #1C1A19; --char-800: #262422;
  --char-700: #383634; --char-600: #4A4744; --char-500: #6E6A66;
  --ember: #CC4529; --ember-bright: #E25234; --ember-deep: #A8351E; --ember-tint: #2A1712;
  --grey-light: #DFDFDF; --grey-mid: #D5D5D5;
  --cjk: 'PingFang HK', 'Noto Sans TC', 'Microsoft JhengHei';

  --app-page: var(--char-950);
  --app-bg: var(--char-900);
  --app-bg-deep: var(--char-950);
  --app-raised: var(--char-850);
  --app-card: var(--char-850);
  --app-hover: var(--char-800);
  --app-input-bg: var(--char-900);
  --app-line-subtle: rgba(255,255,255,0.08);
  --app-line: var(--char-700);
  --app-line-strong: var(--char-600);
  --app-slot-full: var(--char-600);

  --app-text-strong: #FFFFFF;
  --app-text: var(--grey-light);
  --app-text-muted: var(--grey-mid);
  --app-text-subtle: var(--char-500);
  --app-placeholder: var(--char-500);

  --app-accent: var(--ember);
  --app-accent-hover: var(--ember-bright);
  --app-accent-press: var(--ember-deep);
  --app-accent-tint: var(--ember-tint);
  --app-accent-text: var(--ember-bright);
  --app-on-accent: #FFFFFF;
  --app-kicker: var(--ember-bright);

  --app-header-bg: rgba(20,19,18,0.92);
  --app-header-text: #FFFFFF;
  --app-header-muted: var(--grey-mid);
  --app-header-line: rgba(255,255,255,0.08);
  --app-header-kicker: var(--ember-bright);
  --app-header-accent: var(--ember-bright);
  --app-chipbar-bg: rgba(20,19,18,0.94);
  --app-bar-bg: rgba(12,11,10,0.94);
  --app-overlay-btn: rgba(12,11,10,0.65);
  --app-backdrop: rgba(0,0,0,0.6);
  --app-disabled-bg: var(--char-800);
  --app-disabled-text: var(--char-500);
  --app-badge-bg: #FFFFFF;
  --app-badge-text: var(--char-900);
  --app-toast-bg: var(--char-800);
  --app-toast-text: #FFFFFF;
  --app-tile-bg: var(--char-800);
  --app-tile-text: var(--char-500);
  --app-hero-text: #FFFFFF;
  --app-success: #4F8A53;
  --app-danger: #E0533F;

  --app-font-display: 'Oswald', 'Arial Narrow', var(--cjk), system-ui, sans-serif;
  --app-font-body: 'Mulish', system-ui, -apple-system, var(--cjk), sans-serif;
  --app-display-weight: 600;
  --app-display-case: none;
  --app-display-tracking: -0.01em;

  --app-radius: 6px;
  --app-radius-sheet: 12px;
  --app-shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --app-shadow-md: 0 4px 14px rgba(0,0,0,0.45);
  --app-shadow-lg: 0 14px 40px rgba(0,0,0,0.55);
  --app-shadow-accent: 0 6px 22px rgba(204,69,41,0.35);
  --app-focus: 0 0 0 3px rgba(226,82,52,0.45);
}