/* Claude.com theme-dark — exact semantic mapping from Source */
:root {
  /* Gray ramp */
  --color-gray-000: #ffffff;
  --color-gray-050: #faf9f5;
  --color-gray-100: #f5f4ed;
  --color-gray-150: #f0eee6;
  --color-gray-200: #e8e6dc;
  --color-gray-250: #dedcd1;
  --color-gray-300: #d1cfc5;
  --color-gray-350: #c2c0b6;
  --color-gray-400: #b0aea5;
  --color-gray-450: #9c9a92;
  --color-gray-500: #87867f;
  --color-gray-550: #73726c;
  --color-gray-600: #5e5d59;
  --color-gray-650: #4d4c48;
  --color-gray-700: #3d3d3a;
  --color-gray-750: #30302e;
  --color-gray-800: #262624;
  --color-gray-850: #1f1e1d;
  --color-gray-900: #1a1918;
  --color-gray-950: #141413;
  --color-gray-1000: #000000;

  --color-clay: #d97757;
  --color-clay-hover: #c6613f;
  --color-clay-dark: #c46849;
  --color-oat: #e3dacc;
  --color-olive: #788c5d;
  --color-error: #bf4d43;
  --color-focus: #2c84db;

  /* .theme-dark semantic (claude.com CSS) */
  --bg-primary: var(--color-gray-950);      /* #141413 page */
  --bg-secondary: var(--color-gray-900);    /* #1a1918 bands */
  --bg-tertiary: var(--color-gray-800);     /* #262624 wells */
  --bg-overlay: var(--color-gray-900);      /* elevated cards */
  --bg-elevated: var(--color-gray-850);     /* #1f1e1d mid lift */

  --fg-primary: var(--color-gray-050);      /* #faf9f5 */
  --fg-secondary: var(--color-gray-400);    /* #b0aea5 */
  --fg-tertiary: var(--color-gray-500);     /* #87867f */

  --border-primary: var(--color-gray-600);  /* #5e5d59 */
  --border-secondary: var(--color-gray-700);/* #3d3d3a */
  --border-tertiary: var(--color-gray-750); /* #30302e */

  --accent: var(--color-clay-dark);         /* #c46849 theme clay */
  --accent-hover: var(--color-clay-hover);  /* #c6613f */
  --accent-bright: var(--color-clay);       /* #d97757 sparks */

  --btn-primary-bg: var(--color-gray-050);
  --btn-primary-fg: var(--color-gray-950);
  --btn-primary-weight: 500;
  --btn-secondary-bg: var(--color-gray-750);
  --btn-secondary-fg: var(--color-gray-050);
  --btn-secondary-border: var(--color-gray-750);
  --btn-secondary-weight: 480;
  --btn-tertiary-bg: var(--color-gray-800);
  --btn-tertiary-fg: var(--color-gray-050);
  --btn-clay-bg: var(--color-clay-hover);
  --btn-clay-fg: var(--color-gray-000);

  --input-bg: var(--color-gray-800);
  --input-text: var(--color-gray-050);
  --input-placeholder: var(--color-gray-500);

  --br-4: 4px;
  --br-8: 8px;
  --br-12: 12px;
  --br-16: 16px;
  --br-24: 24px;
  --br-32: 32px;
  --br-btn: 0.6rem;
  --br-pill: 9999px;

  --sp-4: 4px;
  --sp-8: 8px;
  --sp-12: 12px;
  --sp-16: 16px;
  --sp-20: 20px;
  --sp-24: 24px;
  --sp-32: 32px;
  --sp-40: 40px;
  --sp-48: 48px;
  --sp-64: 64px;
  --sp-80: 80px;
  --sp-96: 96px;

  --gap-sm: 12px;
  --gap-md: 24px;
  --gap-lg: 48px;

  --section-sm: 48px;
  --section-md: 72px;
  --section-main: 112px;

  --max-width-main: 1440px;
  --container-margin: clamp(2rem, calc(1.43rem + 2.86vw), 4rem);
  --nav-height: 72px;

  --ease-out: cubic-bezier(0.165, 0.85, 0.45, 1);
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --dur: 150ms;
}