/* Shannon - Design Tokens
   Reused verbatim from the Claude.ai design-system rebuild
   (~/Desktop/claude/design-system/assets/css/tokens.css), which was
   pixel/color-verified against the live claude.ai site. */

:root,
[data-theme="light"] {
  /* Primitives - gray scale */
  --gray-0: #ffffff;
  --gray-10: #fcfcfb;
  --gray-15: #f0efec;
  --gray-20: #f9f9f7;
  --gray-100: #edece8;
  --gray-400: #898781;
  --gray-600: #52514e;
  --gray-800-hover: #262626;
  --gray-900: #0b0b0b;
  --gray-950-pressed: #000000;

  /* Primitives - alpha + accent */
  --black-alpha-5: rgba(11, 11, 11, 0.05);
  --black-alpha-10: rgba(11, 11, 11, 0.1);
  --black-alpha-20: rgba(11, 11, 11, 0.2);
  --black-alpha-50: rgba(0, 0, 0, 0.5);
  --clay-500: #d97757;
  --blue-500: #2563eb;
  --blue-700: #184f95;
  --violet-500: #7c6fd1;
  --yellow-500: #f5a623;
  --red-500: #dc2626;

  /* Semantic - surfaces */
  --bg-page: var(--gray-10);
  --bg-surface: var(--gray-0);
  --bg-surface-alt: var(--gray-20);
  --bg-selected: var(--gray-100);
  --bg-inverse: var(--gray-900);

  /* Semantic - text */
  --text-primary: var(--gray-900);
  --text-secondary: var(--gray-600);
  --text-muted: var(--gray-400);
  --text-on-inverse: var(--gray-0);
  --text-link: var(--blue-700);

  /* Semantic - accents */
  --accent-brand: var(--clay-500);
  --accent-interactive: var(--blue-500);
  --accent-pro: var(--violet-500);

  /* Semantic - borders + overlay */
  --border-default: var(--black-alpha-10);
  --border-strong: var(--black-alpha-20);
  --overlay-backdrop: var(--black-alpha-50);

  /* Semantic - status */
  --status-warning: var(--yellow-500);
  --status-error: var(--red-500);

  /* Semantic - primary button (kept separate from raw gray/900 so dark mode can invert for contrast) */
  --btn-primary-bg: var(--gray-900);
  --btn-primary-bg-hover: var(--gray-800-hover);
  --btn-primary-bg-pressed: var(--gray-950-pressed);
  --btn-primary-text: var(--text-on-inverse);

  /* Ghost button hover */
  --btn-ghost-hover-bg: var(--gray-15);

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 24px;
  --spacing-2xl: 32px;
  --spacing-3xl: 48px;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --radius-2xl: 20px;
  --radius-3xl: 24px;
  --radius-full: 999px;
  --radius-bubble: 12px;

  /* Message-bubble background uses alpha-5 of the ink color, mirrors automatically in dark mode */
  --bg-bubble: var(--black-alpha-5);

  /* Composer shadow - soft ambient shadow + 1px inset border */
  --shadow-composer: 0 4px 20px rgba(0, 0, 0, 0.035);

  /* Fonts */
  --font-serif: "Hoefler Text", Charter, Georgia, "Noto Serif", "Droid Serif", "Fraunces", serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", Roboto, "Segoe UI", Helvetica, Arial, "Inter", sans-serif;
  --font-mono: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;
}

[data-theme="dark"] {
  --bg-page: #111111;
  --bg-surface: #151515;
  --bg-surface-alt: #1c1c1c;
  --bg-selected: #262626;
  --bg-inverse: #f5f5f3;

  --text-primary: #f0efec;
  --text-secondary: #b5b3ac;
  --text-muted: #7a7872;
  --text-on-inverse: #0b0b0b;
  --text-link: #6ea0e8;

  --border-default: rgba(255, 255, 255, 0.1);
  --border-strong: rgba(255, 255, 255, 0.2);
  --overlay-backdrop: rgba(0, 0, 0, 0.65);

  --bg-bubble: rgba(255, 255, 255, 0.05);

  --btn-primary-bg: #f5f5f3;
  --btn-primary-bg-hover: #e2e2de;
  --btn-primary-bg-pressed: #cfcfca;
  --btn-primary-text: #0b0b0b;

  --btn-ghost-hover-bg: rgba(255, 255, 255, 0.08);
}