/* Design tokens adapted from open-claude-ui (https://github.com/Caho1/open-claude-ui, MIT).
   Only the tokens this app consumes are kept. Alpha ramps use plain rgba() so browsers
   without relative color syntax still get every surface, border and text color. */

:root {
  /* Gray ramp */
  --cds-gray-0: #fff;
  --cds-gray-10: #fcfcfb;
  --cds-gray-20: #f9f9f7;
  --cds-gray-50: #f0efec;
  --cds-gray-200: #c3c2b7;
  --cds-gray-400: #898781;
  --cds-gray-600: #52514e;
  --cds-gray-750: #2c2c2a;
  --cds-gray-800: #20201f;
  --cds-gray-830: #1a1a19;
  --cds-gray-850: #151515;
  --cds-gray-900: #0b0b0b;

  /* Clay */
  --cds-clay: #d97757;
  --cds-clay-emphasized: #c6613f;
  --cds-clay-light: #fbf3ef;
  --cds-clay-text: #ae461c;

  /* Surfaces */
  --cds-surface-0: var(--cds-gray-20);
  --cds-surface-1: var(--cds-gray-10);
  --cds-surface-2: var(--cds-gray-0);
  --cds-surface-3: var(--cds-gray-0);
  --cds-surface-popover: var(--cds-gray-0);
  --cds-bg-input: var(--cds-surface-3);
  --cds-page-bg: var(--cds-surface-0);

  /* Alpha ramp: fills and hairlines */
  --cds-alpha-1: rgba(11, 11, 11, 0.05);
  --cds-alpha-2: rgba(11, 11, 11, 0.1);
  --cds-alpha-3: rgba(11, 11, 11, 0.2);
  --cds-alpha-4: rgba(11, 11, 11, 0.35);
  --cds-border: var(--cds-alpha-2);
  --cds-border-strong: var(--cds-alpha-3);
  --cds-fill-ghost-hover: var(--cds-alpha-1);
  --cds-fill-ghost-selected: var(--cds-alpha-2);
  --cds-segmented-track: rgba(0, 0, 0, 0.06);
  --cds-segmented-thumb: #fff;

  /* Text */
  --cds-text-primary: var(--cds-gray-900);
  --cds-text-secondary: var(--cds-gray-600);
  --cds-text-muted: var(--cds-gray-400);
  --cds-text-accent: #184f95;

  /* Roles */
  --cds-fill-brand: var(--cds-clay-emphasized);
  --cds-fill-brand-hover: var(--cds-clay);
  --cds-fill-brand-subtle: var(--cds-clay-light);
  --cds-fill-accent: #2a78d6;
  --cds-bg-accent: #cde2fb;
  --cds-fill-danger: #dc2626;
  --cds-fill-danger-hover: #b91c1c;
  --cds-bg-danger-subtle: #fdecec;
  --cds-text-danger: #b91c1c;

  /* Radii */
  --cds-radius-sm: 6px;
  --cds-radius: 8px;
  --cds-panel-radius: 10px;
  --cds-radius-card: 12px;
  --cds-radius-dialog: 16px;
  --cds-radius-pill: 999px;

  /* Controls */
  --cds-h-control-sm: 28px;
  --cds-h-control: 32px;
  --cds-h-control-lg: 40px;

  /* Elevation */
  --cds-shadow-sm: 0 1px 2px 0 rgba(11, 11, 11, 0.06), 0 2px 8px 0 rgba(11, 11, 11, 0.08);
  --cds-shadow-md: 0 2px 4px 0 rgba(11, 11, 11, 0.07), 0 6px 16px 0 rgba(11, 11, 11, 0.08);
  --cds-shadow-popover: 0 8px 24px rgb(0 0 0 / 0.12), 0 2px 6px rgb(0 0 0 / 0.08);
  --cds-ring: 0 0 0 1px var(--cds-border);
  --cds-focus-shadow: inset 0 0 0 1px var(--cds-page-bg), 0 0 0 1px var(--cds-fill-accent), 0 0 6px 1px var(--cds-bg-accent);

  /* Motion */
  --cds-ease-swift: cubic-bezier(0.16, 1, 0.3, 1);
  --cds-ease-out: cubic-bezier(0.165, 0.84, 0.44, 1);
  --cds-dur-fast: 60ms;
  --cds-dur-snap: 120ms;
  --cds-dur-base: 200ms;
  --cds-dur-sheet: 300ms;
  --cds-dur-slow: 450ms;
  --cds-btn-spring: linear(0, 0.2459, 0.6526, 0.9468, 1.0764, 1.0915, 1.0585, 1.0219, 0.9993, 0.9914, 0.9921, 0.9957, 0.9988, 1.0004, 1);

  /* Type: system stacks only, no bundled font files */
  --cds-font-cjk: "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans CJK SC", "Hiragino Sans GB";
  --cds-font-sans: system-ui, "Segoe UI", var(--cds-font-cjk), Roboto, Helvetica, Arial, sans-serif;
  --cds-font-serif: ui-serif, Georgia, "Times New Roman", var(--cds-font-cjk), serif;
  --cds-font-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* Layout */
  --cds-panel-inset: 8px;
}

.dark-mode {
  --cds-surface-0: var(--cds-gray-900);
  --cds-surface-1: var(--cds-gray-850);
  --cds-surface-2: var(--cds-gray-830);
  --cds-surface-3: var(--cds-gray-800);
  --cds-surface-popover: var(--cds-gray-750);

  --cds-alpha-1: rgba(255, 255, 255, 0.05);
  --cds-alpha-2: rgba(255, 255, 255, 0.1);
  --cds-alpha-3: rgba(255, 255, 255, 0.2);
  --cds-alpha-4: rgba(255, 255, 255, 0.35);
  --cds-segmented-track: rgba(255, 255, 255, 0.08);
  --cds-segmented-thumb: var(--cds-gray-750);

  --cds-text-primary: var(--cds-gray-50);
  --cds-text-secondary: var(--cds-gray-200);
  --cds-text-accent: #6da7ec;

  --cds-fill-brand-subtle: rgba(217, 119, 87, 0.16);
  --cds-clay-text: #e08264;
  --cds-bg-accent: rgba(24, 79, 149, 0.6);
  --cds-bg-danger-subtle: rgba(239, 68, 68, 0.16);
  --cds-text-danger: #f87171;

  --cds-shadow-sm: 0 1px 2px 0 rgba(11, 11, 11, 0.08), 0 2px 8px 0 rgba(0, 0, 0, 0.24);
  --cds-shadow-md: 0 2px 4px 0 rgba(11, 11, 11, 0.07), 0 6px 16px 0 rgba(0, 0, 0, 0.24);
  --cds-shadow-popover: 0 8px 24px rgb(0 0 0 / 0.32), 0 2px 6px rgb(0 0 0 / 0.2);
}

/* Hairlines shrink on high density screens */
@media (min-resolution: 2dppx) {
  :root {
    --cds-ring: 0 0 0 0.5px var(--cds-border-strong);
  }
}