/* Claude (claude.ai web app, Oct 2026) — design tokens. Study copy for the AltLeads team; not for shipping. Claude belongs to Anthropic.
   Where the values come from (every line is marked):
     real      = read from claude.ai's own stylesheet (assets-proxy.anthropic.com/claude-ai/v2/assets/v1/c6a992d55-pPKXE631.css,
                 the file the signed-out login page loaded on 12 Oct 2026, html data-color-version="v2" data-density="comfortable"),
                 or from computed styles of that live login page (rendered from the Wayback copy, 12 Oct 2026).
     measured  = read from real pictures (Anthropic's 16 Sep 2026 launch video at 4K, claude.com product images, help-centre shots).
     est.      = our best guess where no source shows the value.
   Claude's own design system is called "cds" in its code. We keep its names in comments so the values can be traced.
   Dark mode: add class "cl-dark" on <html> (claude.ai uses [data-mode=dark]). */

@font-face { font-family: "Claude Sans Stand-in"; src: url("fonts/InstrumentSans-normal-latin.woff2") format("woff2"); font-weight: 400 700; font-stretch: 75% 100%; font-style: normal; font-display: swap; }
@font-face { font-family: "Claude Sans Stand-in"; src: url("fonts/InstrumentSans-italic-latin.woff2") format("woff2"); font-weight: 400 700; font-stretch: 75% 100%; font-style: italic; font-display: swap; }
@font-face { font-family: "Claude Serif Stand-in"; src: url("fonts/SourceSerif4-normal-latin.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Claude Serif Stand-in"; src: url("fonts/SourceSerif4-italic-latin.woff2") format("woff2"); font-weight: 200 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Claude Mono Stand-in"; src: url("fonts/JetBrainsMono-normal-latin.woff2") format("woff2"); font-weight: 100 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Claude Mono Stand-in"; src: url("fonts/JetBrainsMono-italic-latin.woff2") format("woff2"); font-weight: 100 800; font-style: italic; font-display: swap; }

:root {
  /* ---------- Raw scales (real: --cds-gray-*, --cds-blue-* …) ---------- */
  --cl-gray-0: #ffffff; --cl-gray-10: #fcfcfb; --cl-gray-20: #f9f9f7; --cl-gray-30: #f6f6f4; --cl-gray-40: #f3f3f0; --cl-gray-50: #f0efec;
  --cl-gray-60: #edece8; --cl-gray-70: #eae9e4; --cl-gray-80: #e7e6e1; --cl-gray-90: #e4e3dd; --cl-gray-100: #e1e0d9; --cl-gray-150: #d2d1c7;
  --cl-gray-200: #c3c2b7; --cl-gray-250: #b4b3a8; --cl-gray-300: #a5a49a; --cl-gray-350: #97958d; --cl-gray-400: #898781; --cl-gray-450: #7b7974;
  --cl-gray-500: #6d6b67; --cl-gray-550: #5f5e5a; --cl-gray-600: #52514e; --cl-gray-650: #454442; --cl-gray-700: #383835; --cl-gray-750: #2c2c2a;
  --cl-gray-800: #20201f; --cl-gray-830: #1a1a19; --cl-gray-850: #151515; --cl-gray-870: #111111; --cl-gray-890: #0d0d0d; --cl-gray-900: #0b0b0b;
  --cl-clay: #d97757;              /* real: --cds-clay (the spark, brand hover) */
  --cl-clay-emphasized: #c6613f;   /* real: --cds-clay-emphasized (--cds-fill-brand) */
  --cl-heather: #cbcadb; --cl-plum: #827dbd; --cl-cactus: #bcd1ca; --cl-mineral: #629987; /* real: illustration accents */
  --cl-blue-100: #cde2fb; --cl-blue-300: #6da7ec; --cl-blue-400: #3987e5; --cl-blue-450: #2a78d6; --cl-blue-600: #184f95; --cl-blue-700: #0d366b; --cl-blue-800: #032042;
  --cl-red-100: #fad6d6; --cl-red-300: #ec7e7e; --cl-red-400: #e34948; --cl-red-450: #d03b3b; --cl-red-600: #8e2626; --cl-red-800: #3c0e0e;
  --cl-green-100: #caeac7; --cl-green-400: #0ca30c; --cl-green-450: #009300; --cl-green-600: #006300; --cl-green-800: #11260f;
  --cl-yellow-100: #f9dca4; --cl-yellow-200: #fab219; --cl-yellow-300: #db9300; --cl-yellow-600: #734500; --cl-yellow-800: #311a00;
  --cl-violet-100: #dfdbfd; --cl-violet-300: #a096eb; --cl-violet-450: #7161e0; --cl-violet-600: #4a3aa7; --cl-violet-800: #1d1649;
  --cl-orange-100: #f7d8cb; --cl-orange-300: #ec835a; --cl-orange-600: #863311; --cl-orange-800: #371407;
  --cl-aqua-100: #bfebdb; --cl-aqua-300: #3bbd8c; --cl-aqua-600: #065f49;
  --cl-magenta-100: #f9d4e2; --cl-magenta-300: #e87ba4; --cl-magenta-600: #862a4c;

  /* ---------- Roles, light (real unless marked) ---------- */
  --cl-page: var(--cl-gray-10);           /* real: body bg-surface-1 = #FCFCFB (login page computed) */
  --cl-page-0: var(--cl-gray-20);         /* real: --cds-surface-0 / --cds-page-bg = #F9F9F7 */
  --cl-surface: var(--cl-gray-0);         /* real: --cds-surface-2 (panels, composer) = #FFF */
  --cl-popover: var(--cl-gray-0);         /* real: --cds-surface-3 / --cds-surface-popover */
  --cl-sidebar: var(--cl-gray-20);        /* est.: sidebar one step darker than the page (old builds used bg-200) */
  --cl-canvas: var(--cl-gray-60);         /* real: --cds-bg-editor-canvas (artifact canvas behind slides) = #EDECE8; measured #EEEEEB in the Sep 2026 video */
  --cl-text: var(--cl-gray-900);          /* real: --cds-text-primary = #0B0B0B (login body color rgb(11,11,11)) */
  --cl-text-2: var(--cl-gray-600);        /* real: --cds-text-secondary = #52514E ("OR", nav links) */
  --cl-text-3: var(--cl-gray-400);        /* real: --cds-text-muted = #898781 */
  --cl-text-disabled: rgb(11 11 11 / .35);/* real: --cds-text-disabled = alpha-4 */
  --cl-border: rgb(11 11 11 / .10);       /* real: --cds-border = alpha-2 */
  --cl-border-strong: rgb(11 11 11 / .20);/* real: --cds-border-strong = alpha-3 */
  --cl-border-stronger: rgb(11 11 11 / .40);/* real */
  --cl-hover: rgb(11 11 11 / .05);        /* real: --cds-fill-ghost-hover = alpha-1 */
  --cl-selected: rgb(11 11 11 / .10);     /* real: --cds-fill-ghost-selected = alpha-2 */
  --cl-control: rgb(11 11 11 / .10);      /* real: --cds-fill-control */
  --cl-control-hover: rgb(11 11 11 / .20);/* real */
  --cl-field: rgb(255 255 255 / .50);     /* real: --cds-fill-field (login input background) */
  --cl-user-bubble: rgb(11 11 11 / .05);  /* real: --cds-bg-user-message = bg-neutral = alpha-1; measured #F2F2F2 on white in the video */
  --cl-primary: var(--cl-gray-900);       /* real: --cds-fill-primary (black "Continue with email") */
  --cl-primary-hover: var(--cl-gray-750); /* real */
  --cl-on-primary: #ffffff;               /* real */
  --cl-secondary: rgb(255 255 255 / .10); /* real: --cds-fill-secondary (+ 1px ring) */
  --cl-secondary-hover: rgb(11 11 11 / .05);
  --cl-secondary-ring: inset 0 0 0 1px var(--cl-border), 0 1px 2px 0 #0000000d; /* real: .shadow-field */
  --cl-brand: var(--cl-clay-emphasized);  /* real: --cds-fill-brand (orange send button) */
  --cl-brand-hover: var(--cl-clay);       /* real */
  --cl-on-brand: #ffffff;                 /* real */
  --cl-accent: var(--cl-blue-450);        /* real: --cds-fill-accent (switch on, focus) */
  --cl-accent-hover: var(--cl-blue-400);
  --cl-accent-text: var(--cl-blue-600);   /* real: links (#184F95, login "Privacy Policy") */
  --cl-accent-bg: var(--cl-blue-100);     /* real: --cds-bg-accent */
  --cl-danger: var(--cl-red-450);  --cl-danger-text: var(--cl-red-600);  --cl-danger-bg: var(--cl-red-100);   /* real */
  --cl-success: var(--cl-green-450); --cl-success-text: var(--cl-green-600); --cl-success-bg: var(--cl-green-100); /* real */
  --cl-warning: var(--cl-yellow-200); --cl-warning-text: var(--cl-yellow-600); --cl-warning-bg: var(--cl-yellow-100); /* real */
  --cl-pro: var(--cl-violet-450); --cl-pro-text: var(--cl-violet-600); --cl-pro-bg: var(--cl-violet-100); /* real */
  --cl-tooltip-bg: var(--cl-gray-900); --cl-tooltip-fg: #ffffff;      /* real */
  --cl-backdrop: rgb(0 0 0 / .40);        /* real: --cds-backdrop #0006 */
  --cl-chip-docs: #d7e8fa; --cl-chip-slides: #faebce; --cl-chip-design: #e5e2fd; /* measured: icon tiles in the Output menu (Sep 2026 video) ~ blue-80 / orange-80 / violet-80 */
  --cl-ico-docs: var(--cl-blue-450); --cl-ico-slides: #c98500; --cl-ico-design: var(--cl-violet-450); /* measured */

  /* ---------- Type (real: --cds-font-size-* at data-density=comfortable) ---------- */
  --cl-font-sans: "Claude Sans Stand-in", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;   /* real face: anthropic-sans (not open; Instrument Sans stands in) */
  --cl-font-serif: "Claude Serif Stand-in", Georgia, "Times New Roman", serif;                           /* real face: anthropic-serif (not open; Source Serif 4 stands in) */
  --cl-font-mono: "Claude Mono Stand-in", ui-monospace, Menlo, Consolas, monospace;                      /* real face: anthropic-mono (not open; JetBrains Mono stands in) */
  --cl-font-response: var(--cl-font-serif);  /* real: --font-claude-response = anthropic-serif (Claude's replies are serif by default) */
  --cl-font-user: var(--cl-font-sans);       /* real: --font-user-message = sans */
  --cl-fs-caption: 12px;  --cl-lh-caption: 17px;   /* real */
  --cl-fs-footnote: 13px; --cl-lh-footnote: 17px;  /* real */
  --cl-fs-code: 13px;     --cl-lh-code: 19px;      /* real */
  --cl-fs-body: 14px;     --cl-lh-body: 20px;      /* real */
  --cl-fs-control: 15px;  --cl-lh-control: 22px;   /* real: login buttons and input (15/22) */
  --cl-fs-heading: 15px;  --cl-lh-heading: 20px;   /* real */
  --cl-fs-prose: 16px;    --cl-lh-prose: 24px;     /* real: chat text, medium size */
  --cl-fs-prose-sm: 15px; --cl-lh-prose-sm: 22px;  /* real: chat text size "small" */
  --cl-fs-prose-lg: 18px; --cl-lh-prose-lg: 27px;  /* real: chat text size "large" */
  --cl-fs-title: 22px;    --cl-lh-title: 28px;     /* real */
  --cl-fs-page-title: 24px; --cl-lh-page-title: 32px; /* real: --cds-page-header-title-size */
  --cl-fs-greeting: 33px; --cl-lh-greeting: 40px;  /* measured: "Good morning, ..." (video, zoom removed); serif weight 330 like the login headline */
  --cl-fs-hero: 56px;     --cl-lh-hero: 64.4px;    /* real: login h2 56px / 1.15, weight 330, opsz 48 */
  --cl-sans-track: .015em;  /* ours: Instrument Sans runs about 3% narrower than Anthropic Sans; this spacing makes lines the same length */
  --cl-serif-opsz: 12;      /* ours: Source Serif 4 at optical size 12 matches Anthropic Serif's width (measured on "Good morning, ..." and chat text) */
  --cl-w-regular: 400; --cl-w-medium: 500; --cl-w-semibold: 580; --cl-w-bold: 600;  /* real */
  --cl-wght-regular: "wght" 400; --cl-wght-medium: "wght" 500;                     /* real (light) */
  --cl-prose-h1: 1.75em; --cl-prose-h2: 1.375em; --cl-prose-h3: 1.125em;          /* real: .prose */

  /* ---------- Shape and space (real at data-density=comfortable) ---------- */
  --cl-radius: 8px;           /* real: --cds-radius */
  --cl-radius-sm: 7px;        /* real: --cds-radius--sm */
  --cl-radius-lg: 10px;       /* real: --cds-radius--lg (login buttons, input) */
  --cl-radius-card: 12px;     /* real: .rounded-card = radius + 4 */
  --cl-radius-panel: 12px;    /* real: --cds-panel-radius */
  --cl-radius-composer: 14px; /* real: --cds-radius-composer at comfortable density (.875rem); the video measures 14px once its 1.33x zoom is removed */
  --cl-radius-menu: 12px;     /* measured: Output menu = --cds-panel-radius 12px (video, zoom removed) */
  --cl-radius-bubble: 12px;   /* measured: user message bubble (video) = rounded-card */
  --cl-radius-login-card: 32px; /* real: login card */
  --cl-h-control: 32px; --cl-h-control-sm: 28px; --cl-h-control-xs: 24px; --cl-h-control-lg: 40px; /* real */
  --cl-icon: 20px; --cl-icon-sm: 16px; --cl-icon-lg: 24px;   /* real */
  --cl-pad-xs: 6px; --cl-pad-sm: 8px; --cl-pad-md: 12px; --cl-pad-lg: 16px; --cl-pad-xl: 24px; /* real */
  --cl-gap-xs: 8px; --cl-gap-sm: 12px; --cl-gap-md: 16px; --cl-gap-lg: 28px; --cl-gap-xl: 40px; /* real */
  --cl-avatar-sm: 24px; --cl-avatar-md: 32px; --cl-avatar-lg: 40px;  /* real */
  --cl-checkbox: 20px; --cl-checkbox-radius: 5px; --cl-switch-h: 20px; /* real */
  --cl-thread-w: 580px;       /* measured: home composer 580px wide in a 1080px window (video). The chat column grows with the window (est. max 768) */
  --cl-sidebar-w: 288px;      /* est. (no 2026 picture of the open sidebar) */
  --cl-sidebar-rail: 52px;    /* est. */

  /* ---------- Depth (real) ---------- */
  --cl-shadow-sm: 0 1px 2px 0 rgb(11 11 11 / .06), 0 2px 8px 0 rgb(11 11 11 / .08);
  --cl-shadow-md: 0 2px 4px 0 rgb(11 11 11 / .07), 0 6px 16px 0 rgb(11 11 11 / .08);
  --cl-shadow-lg: 0 4px 8px 0 rgb(11 11 11 / .08), 0 12px 28px -2px rgb(11 11 11 / .08);
  --cl-shadow-popover: 0 8px 24px #0000001f, 0 2px 6px #00000014;
  --cl-shadow-field: 0 1px 2px 0 #0000000d;
  --cl-ring: 0 0 0 1px var(--cl-border);                 /* real: rings are outside in light, inside in dark */
  --cl-shadow-panel: 0 0 0 1px var(--cl-border), var(--cl-shadow-sm);
  --cl-shadow-composer: 0 0 0 1px var(--cl-border), 0 4px 20px rgb(11 11 11 / .035); /* measured: very soft lift under the composer */
  --cl-focus: inset 0 0 0 1px var(--cl-page), 0 0 0 1px var(--cl-accent), 0 0 6px 1px var(--cl-accent-bg); /* real: --cds-focus-shadow */

  /* ---------- Motion (real) ---------- */
  --cl-ease-out: cubic-bezier(.165, .84, .44, 1);
  --cl-ease-snap: cubic-bezier(.32, .72, 0, 1);
  --cl-ease-overshoot: cubic-bezier(.34, 1.3, .64, 1);
  --cl-ease-standard: cubic-bezier(.4, 0, .2, 1);   /* Tailwind default used for most colour changes */
  --cl-press: .975;  /* real: buttons squish to 97.5% while pressed (60ms), then spring back (450ms, --cl-btn-spring) */
  --cl-dur-fast: 60ms; --cl-dur-snap: 120ms; --cl-dur-default: 150ms; --cl-dur-base: 200ms; --cl-dur-sheet: 300ms; --cl-dur-slow: 450ms;
  --cl-btn-spring: linear(0, .2459, .6526, .9468, 1.0764, 1.0915, 1.0585, 1.0219, .9993, .9914, .9921, .9957, .9988, 1.0004, 1);
  --cl-z-modal: 40; --cl-z-popover: 50; --cl-z-tooltip: 50; --cl-z-toast: 60;   /* real */
  color-scheme: light;
}

/* ---------- Dark (real: [data-mode=dark] .cds-root + v2 colours) ---------- */
html.cl-dark {
  --cl-page: var(--cl-gray-850);          /* real: surface-1 dark = #151515 (login page computed) */
  --cl-page-0: var(--cl-gray-900);        /* real: surface-0 dark */
  --cl-surface: var(--cl-gray-830);       /* real: surface-2 dark = #1A1A19 */
  --cl-popover: var(--cl-gray-800);       /* real: surface-3 dark = #20201F */
  --cl-sidebar: var(--cl-gray-870);       /* est.: one step darker than the page (#111, the login card colour) */
  --cl-canvas: var(--cl-gray-900);        /* real: neutral-60 flips to gray-840 #181817; we use the darker page-0 for contrast (est.) */
  --cl-text: var(--cl-gray-50);           /* real: #F0EFEC */
  --cl-text-2: var(--cl-gray-200);        /* real: #C3C2B7 */
  --cl-text-3: var(--cl-gray-400);        /* real: #898781 */
  --cl-text-disabled: rgb(255 255 255 / .35);
  --cl-border: rgb(255 255 255 / .10);    /* real (login card border) */
  --cl-border-strong: rgb(255 255 255 / .20);
  --cl-border-stronger: rgb(255 255 255 / .40);
  --cl-hover: rgb(255 255 255 / .075);    /* real: dark ghost hover 7.5% */
  --cl-selected: rgb(255 255 255 / .15);  /* real: dark ghost selected 15% */
  --cl-control: rgb(255 255 255 / .10);
  --cl-control-hover: rgb(255 255 255 / .20);
  --cl-field: rgb(255 255 255 / .05);     /* real (login input) */
  --cl-user-bubble: rgb(255 255 255 / .05);
  --cl-primary: #ffffff;                  /* real: white button, black words */
  --cl-primary-hover: var(--cl-gray-100);
  --cl-on-primary: var(--cl-gray-900);
  --cl-secondary: rgb(255 255 255 / .10);
  --cl-secondary-hover: rgb(255 255 255 / .14);
  --cl-secondary-ring: none;              /* real: --cds-fill-secondary-ring is transparent in dark */
  --cl-accent-text: var(--cl-blue-300);   /* real: #6DA7EC (login link, dark) */
  --cl-accent-bg: var(--cl-blue-800);
  --cl-danger-text: var(--cl-red-300); --cl-danger-bg: var(--cl-red-800);
  --cl-success-text: var(--cl-green-400); --cl-success-bg: var(--cl-green-800);
  --cl-warning-text: var(--cl-yellow-300); --cl-warning-bg: var(--cl-yellow-800);
  --cl-pro-text: var(--cl-violet-300); --cl-pro-bg: var(--cl-violet-800);
  --cl-tooltip-bg: var(--cl-gray-800); --cl-tooltip-fg: var(--cl-gray-50);
  --cl-backdrop: rgb(0 0 0 / .50);
  --cl-chip-docs: #062b57; --cl-chip-slides: #4b1b08; --cl-chip-design: #271e60;   /* est. (blue/orange/violet-750) */
  --cl-ico-docs: var(--cl-blue-300); --cl-ico-slides: var(--cl-orange-300); --cl-ico-design: var(--cl-violet-300);
  --cl-wght-regular: "wght" 360; --cl-wght-medium: "wght" 460;   /* real: Claude draws text thinner in dark mode */
  --cl-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .3), 0 2px 8px 0 #0000003d;
  --cl-shadow-md: 0 2px 4px 0 rgb(0 0 0 / .3), 0 6px 16px 0 #0000003d;
  --cl-shadow-lg: 0 4px 8px 0 rgb(0 0 0 / .3), 0 12px 28px -2px #0000003d;
  --cl-shadow-popover: 0 8px 24px #00000052, 0 2px 6px #0003;   /* real */
  --cl-ring: inset 0 0 0 1px var(--cl-border);                     /* real: inner ring in dark */
  --cl-shadow-panel: inset 0 0 0 1px var(--cl-border), var(--cl-shadow-sm);
  --cl-shadow-composer: inset 0 0 0 1px var(--cl-border), 0 4px 20px rgb(0 0 0 / .25);
  --cl-focus: inset 0 0 0 1px var(--cl-page), 0 0 0 1px var(--cl-accent), 0 0 6px 1px rgb(24 79 149 / .6);
  color-scheme: dark;
}