/*
 * Portrait design-system tokens, ported from the Portrait app
 * (snapshot: plan/working-files/assets/portrait-app-theme/, copied 2026-06-02
 * from /home/c/portrait/frontend/packages/design-system/styles/themes/).
 *
 * Token names match the app exactly. App-only tokens (overlay sizes, z-index
 * stack, tooltip, project colors, most ds-component vars) are stripped; a small
 * marketing-only layer (--marketing-*) is added at the end of the common block.
 *
 * Light is the default (works without JS); dark is scoped under
 * [data-color-mode='dark'], set pre-paint by the bootstrap script in
 * templates/partials/_head.html — same mechanism and localStorage key as the app.
 */

/* ==========================================================================
   Common tokens (mode-independent) — from common-theme.css
   ========================================================================== */
:root {
  --base-text-weight-bold: 700;
  --base-text-weight-semibold: 600;
  --base-text-weight-medium: 500;
  --base-text-weight-normal: 400;
  --base-text-weight-light: 300;

  /* Size scale - Used for buttons, inputs, labels, avatars etc. */
  --size: 1.6rem;
  --size-0: 0;
  --size-1: var(--size); /* 16px */
  --size-2: calc(var(--size-1) + 0.4rem); /* 20px */
  --size-3: calc(var(--size-2) + 0.4rem); /* 24px */
  --size-4: calc(var(--size-3) + 0.4rem); /* 28px */
  --size-5: calc(var(--size-4) + 0.4rem); /* 32px */
  --size-6: calc(var(--size-5) + 0.8rem); /* 40px */
  --size-7: calc(var(--size-6) + 0.8rem); /* 48px */
  --size-8: calc(var(--size-7) + 1.6rem); /* 64px */
  --size-9: calc(var(--size-8) + 1.6rem); /* 80px */
  --size-10: calc(var(--size-9) + 1.6rem); /* 96px */
  --size-11: calc(var(--size-10) + 1.6rem); /* 112px */
  --size-12: calc(var(--size-11) + 1.6rem); /* 128px */

  /* Spacing scale: 1=4px 2=8px 3=16px 4=24px 5=32px 6=40px 7=48px 8=64px ... */
  --spacer: 0.8rem;
  --spacer-0: 0;
  --spacer-1: calc(var(--spacer) * 0.5); /* 4px */
  --spacer-2: calc(var(--spacer) * 1); /* 8px */
  --spacer-3: calc(var(--spacer) * 2); /* 16px */
  --spacer-4: calc(var(--spacer) * 3); /* 24px */
  --spacer-5: calc(var(--spacer) * 4); /* 32px */
  --spacer-6: calc(var(--spacer) * 5); /* 40px */
  --spacer-7: calc(var(--spacer) * 6); /* 48px */
  --spacer-8: calc(var(--spacer) * 8); /* 64px */
  --spacer-9: calc(var(--spacer) * 10); /* 80px */
  --spacer-10: calc(var(--spacer) * 12); /* 96px */
  --spacer-11: calc(var(--spacer) * 14); /* 112px */
  --spacer-12: calc(var(--spacer) * 16); /* 128px */

  /* Typography (rem scale on 62.5% root: 1rem = 10px) */
  --system-font: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial,
    sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  --body-font: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial,
    sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  --mono-font: 'Monaco', 'ui-monospace', Consolas, 'Lucida Console', 'Andale Mono WT', 'Andale Mono',
    'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono',
    'Nimbus Mono L', Monaco, monospace;
  --body-font-size: 1.4rem;
  --h00-size: 4.6rem;
  --h0-size: 3.2rem;
  --h1-size: 2.8rem;
  --h2-size: 2.4rem;
  --h3-size: 2rem;
  --h4-size: 1.6rem;
  --h5-size: 1.4rem;
  --h6-size: 1.2rem;
  --font-size-xsmall: 1rem;
  --font-size-small: 1.2rem;
  --font-size-medium: 1.4rem;
  --font-size-large: 1.6rem;

  --body-line-height: var(--lh-default);
  --lh-default: 1.4;
  --lh-condensed: 1.2;
  --lh-condensed-ultra: 1;

  --font-weight-bold: var(--base-text-weight-bold);
  --font-weight-semibold: var(--base-text-weight-semibold);
  --font-weight-medium: var(--base-text-weight-medium);
  --font-weight-normal: var(--base-text-weight-normal);
  --font-weight-light: var(--base-text-weight-light);

  /* Border */
  --border-width: 0.1rem;
  --border-style: solid;
  --border: var(--border-style) var(--border-width) var(--color-border-default);
  --border-subtle: var(--border-style) var(--border-width) var(--color-border-subtle);
  --border-muted: var(--border-style) var(--border-width) var(--color-border-muted);

  /* Border radius */
  --radius-xs: 0.3rem;
  --radius-sm: 0.4rem;
  --radius-md: 0.6rem;
  --radius-lg: 0.8rem;
  --radius-xl: 1.2rem;
  --radius-full: 9999px;

  /* Motion */
  --motion-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --motion-ease-emphasized-in: cubic-bezier(0.3, 0, 0.8, 0.15);
  --motion-ease-emphasized-out: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-ease-linear: linear;
  --motion-duration-fast: 144ms;
  --motion-duration-medium: 220ms;
  --motion-duration-slow: 320ms;
  --motion-duration-extra-slow: 480ms;

  --header-height: 4.8rem;
  --focus-ring-offset: 2px;

  /* ------------------------------------------------------------------
     Marketing-only layer (not in the app): display type for heroes,
     section rhythm, page container. Layered on top of the app scale
     rather than changing shared token values.
     ------------------------------------------------------------------ */
  --marketing-heading-font: 'Gelasio', Georgia, 'Times New Roman', serif;
  --marketing-display-size: clamp(3.6rem, 6vw, 5.6rem);
  --marketing-h2-size: clamp(2.6rem, 4vw, 3.4rem);
  --marketing-h3-size: clamp(2rem, 2.5vw, 2.4rem);
  --marketing-lead-size: clamp(1.7rem, 2.5vw, 2.1rem);
  --marketing-body-size: 1.6rem;
  --marketing-body-line-height: 1.6;
  --marketing-section-padding: clamp(4rem, 6vw, 7.2rem);
  --marketing-container: 108rem;
}

/* ==========================================================================
   Light color scale (RGB triplets) — from light/color-scale-light.css
   Default mode: applies with or without data-color-mode (no-JS fallback).
   ========================================================================== */
:root,
:root[data-color-mode='light'] {
  color-scheme: light;

  --color-scale-black: 27, 31, 36;
  --color-scale-white: 255, 255, 255;

  --color-scale-gray-0: 245, 245, 245;
  --color-scale-gray-1: 235, 238, 240;
  --color-scale-gray-2: 209, 215, 219;
  --color-scale-gray-3: 176, 184, 190;
  --color-scale-gray-4: 141, 149, 156;
  --color-scale-gray-5: 111, 119, 126;
  --color-scale-gray-6: 88, 96, 103;
  --color-scale-gray-7: 67, 74, 81;
  --color-scale-gray-8: 51, 56, 61;
  --color-scale-gray-9: 37, 41, 45;

  --color-scale-blue-0: 230, 238, 255;
  --color-scale-blue-1: 213, 227, 255;
  --color-scale-blue-2: 168, 193, 255;
  --color-scale-blue-3: 137, 171, 255;
  --color-scale-blue-4: 106, 149, 255;
  --color-scale-blue-5: 75, 127, 255;
  --color-scale-blue-6: 44, 105, 255;
  --color-scale-blue-7: 6, 102, 235;
  --color-scale-blue-8: 0, 62, 255;
  --color-scale-blue-9: 0, 33, 255;

  --color-scale-green-0: 218, 251, 225;
  --color-scale-green-1: 172, 238, 187;
  --color-scale-green-2: 111, 221, 139;
  --color-scale-green-3: 74, 194, 107;
  --color-scale-green-4: 45, 164, 78;
  --color-scale-green-5: 26, 127, 55;
  --color-scale-green-6: 17, 99, 41;
  --color-scale-green-7: 4, 79, 30;
  --color-scale-green-8: 0, 61, 22;
  --color-scale-green-9: 0, 45, 17;

  --color-scale-yellow-0: 255, 254, 236;
  --color-scale-yellow-1: 255, 248, 212;
  --color-scale-yellow-2: 255, 239, 182;
  --color-scale-yellow-3: 253, 228, 144;
  --color-scale-yellow-4: 246, 213, 106;
  --color-scale-yellow-5: 232, 193, 64;
  --color-scale-yellow-6: 210, 174, 36;
  --color-scale-yellow-7: 184, 150, 22;
  --color-scale-yellow-8: 154, 125, 16;
  --color-scale-yellow-9: 122, 100, 12;

  --color-scale-orange-0: 255, 241, 229;
  --color-scale-orange-1: 255, 216, 181;
  --color-scale-orange-2: 255, 183, 124;
  --color-scale-orange-3: 251, 143, 68;
  --color-scale-orange-4: 225, 111, 36;
  --color-scale-orange-5: 188, 76, 0;
  --color-scale-orange-6: 149, 56, 0;
  --color-scale-orange-7: 118, 44, 0;
  --color-scale-orange-8: 92, 34, 0;
  --color-scale-orange-9: 71, 23, 0;

  --color-scale-red-0: 255, 235, 233;
  --color-scale-red-1: 255, 206, 203;
  --color-scale-red-2: 255, 171, 168;
  --color-scale-red-3: 255, 129, 130;
  --color-scale-red-4: 250, 69, 73;
  --color-scale-red-5: 207, 34, 46;
  --color-scale-red-6: 164, 14, 38;
  --color-scale-red-7: 130, 7, 30;
  --color-scale-red-8: 102, 0, 24;
  --color-scale-red-9: 76, 0, 20;

  --color-scale-purple-0: 237, 233, 242;
  --color-scale-purple-1: 218, 212, 230;
  --color-scale-purple-2: 200, 190, 217;
  --color-scale-purple-3: 182, 169, 204;
  --color-scale-purple-4: 163, 147, 191;
  --color-scale-purple-5: 145, 126, 179;
  --color-scale-purple-6: 127, 105, 166;
  --color-scale-purple-7: 109, 83, 153;
  --color-scale-purple-8: 72, 40, 128;
  --color-scale-purple-9: 47, 15, 103;

  --color-scale-pink-0: 255, 239, 247;
  --color-scale-pink-1: 255, 211, 235;
  --color-scale-pink-2: 255, 173, 218;
  --color-scale-pink-3: 255, 128, 200;
  --color-scale-pink-4: 232, 90, 173;
  --color-scale-pink-5: 191, 57, 137;
  --color-scale-pink-6: 153, 40, 110;
  --color-scale-pink-7: 119, 32, 87;
  --color-scale-pink-8: 97, 19, 71;
  --color-scale-pink-9: 77, 3, 54;

  --color-scale-coral-0: 255, 240, 235;
  --color-scale-coral-1: 255, 214, 204;
  --color-scale-coral-2: 255, 180, 161;
  --color-scale-coral-3: 253, 140, 115;
  --color-scale-coral-4: 236, 101, 71;
  --color-scale-coral-5: 196, 67, 43;
  --color-scale-coral-6: 158, 47, 28;
  --color-scale-coral-7: 128, 31, 15;
  --color-scale-coral-8: 105, 17, 5;
  --color-scale-coral-9: 81, 9, 1;

  /* ----- Light role tokens — from light/light-theme.css ----- */

  /* fg (foreground): text and icons */
  --color-fg-default: rgb(var(--color-scale-black));
  --color-fg-secondary: rgb(var(--color-scale-gray-9));
  --color-fg-muted: rgb(var(--color-scale-gray-6));
  --color-fg-subtle: rgb(var(--color-scale-gray-4));
  --color-fg-on-emphasis: rgb(var(--color-scale-white));

  --color-brand: var(--color-fg-default);

  --color-sidebar-bg: hsl(0 0% 96% / 1);
  --color-app-bg: hsl(0 0% 99% / 1);

  --color-focus-ring: rgb(var(--color-scale-blue-6));

  /* canvas-*: background colors */
  --color-canvas-default: hsl(0 0% 99% / 1);
  --color-canvas-subtle: rgb(var(--color-scale-gray-0));
  --color-canvas-inset: rgb(var(--color-scale-white));
  --color-canvas-overlay: rgb(var(--color-scale-white));
  --color-canvas-inverted: #212121;

  /* Borders */
  --color-border-default: hsl(204 13% 87% / 1);
  --color-border-muted: hsl(204 14% 90% / 1);
  --color-border-subtle: rgba(var(--color-scale-black), 0.1);
  --color-border-contrast: rgb(var(--color-scale-gray-3));

  /* Shadows */
  --color-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 2px 6px rgba(0, 0, 0, 0.02);
  --color-shadow-md: 0 2px 6px rgba(0, 0, 0, 0.08), 0 6px 12px rgba(0, 0, 0, 0.06);
  --color-shadow-lg: 0 4px 10px rgba(0, 0, 0, 0.1), 0 12px 24px rgba(0, 0, 0, 0.08);
  --color-shadow-xlg: 0 6px 16px rgba(0, 0, 0, 0.12), 0 20px 40px rgba(0, 0, 0, 0.1);
  --color-shadow-xlspread: 0 10px 28px rgba(0, 0, 0, 0.12), 0 32px 64px rgba(0, 0, 0, 0.08);
  --color-shadow-focus-visible-sm: 0 0 0 2px rgba(var(--color-scale-purple-5), 0.55), 0 0 6px rgba(var(--color-scale-purple-5), 0.4);
  --color-shadow-focus-visible: 0 0 0 2px rgba(var(--color-scale-purple-5), 0.6), 0 0 10px rgba(var(--color-scale-purple-5), 0.45);

  --color-neutral-emphasis-plus: rgba(var(--color-scale-gray-9), 1);
  --color-neutral-emphasis: rgba(var(--color-scale-gray-5), 1);
  --color-neutral-muted: rgba(var(--color-scale-gray-2), 1);
  --color-neutral-subtle: rgba(var(--color-scale-black), 0.08);

  /* Accent (primary = purple) */
  --color-accent-fg: rgb(var(--color-scale-purple-8));
  --color-accent-emphasis: rgb(var(--color-scale-purple-8));
  --color-accent-muted: rgb(var(--color-scale-purple-2));
  --color-accent-subtle: rgb(var(--color-scale-purple-1), 0.6);

  --color-success-fg: rgba(var(--color-scale-green-5), 1);
  --color-success-emphasis: rgba(var(--color-scale-green-4), 1);
  --color-success-muted: rgba(var(--color-scale-green-2), 1);
  --color-success-subtle: rgba(var(--color-scale-green-1), 0.4);

  --color-info-fg: rgb(var(--color-scale-blue-5));
  --color-info-subtle: rgba(var(--color-scale-blue-1), 0.4);
  --color-info-muted: rgba(var(--color-scale-blue-2), 1);
  --color-info-emphasis: rgb(var(--color-scale-blue-6));

  --color-attention-fg: rgba(var(--color-scale-yellow-7));
  --color-attention-emphasis: rgb(var(--color-scale-yellow-8));
  --color-attention-muted: rgba(var(--color-scale-yellow-3));
  --color-attention-subtle: rgba(var(--color-scale-yellow-3), 0.4);

  --color-severe-fg: rgba(var(--color-scale-orange-6), 1);
  --color-severe-emphasis: rgba(var(--color-scale-orange-5), 1);
  --color-severe-muted: rgba(var(--color-scale-orange-1), 1);
  --color-severe-subtle: rgba(var(--color-scale-orange-1), 0.3);

  --color-danger-fg: rgba(var(--color-scale-red-5), 1);
  --color-danger-emphasis: rgba(var(--color-scale-red-5), 1);
  --color-danger-muted: rgba(var(--color-scale-red-1), 1);
  --color-danger-subtle: rgba(var(--color-scale-red-1), 0.3);

  /* ----- Button tokens — from light/components-light.css (ds-button) ----- */

  /* Default neutral button */
  --color-btn-fg: rgb(var(--color-scale-gray-8));
  --color-btn-bg: color-mix(in oklab, rgb(var(--color-scale-gray-0)), rgb(var(--color-scale-black)) 2%);
  --color-btn-border: rgb(var(--color-scale-gray-2));
  --color-btn-shadow: 0 1px 0 rgba(var(--color-scale-black), 0.04);
  --color-btn-inset-shadow: inset 0 1px 0 rgba(var(--color-scale-white), 0.6);
  --color-btn-hover-fg: rgb(var(--color-scale-gray-9));
  --color-btn-hover-bg: color-mix(in oklab, rgb(var(--color-scale-gray-1)), rgb(var(--color-scale-black)) 4%);
  --color-btn-hover-border: rgb(var(--color-scale-gray-2));
  --color-btn-active-fg: rgb(var(--color-scale-gray-9));
  --color-btn-active-bg: rgb(var(--color-scale-gray-2));
  --color-btn-active-border: color-mix(in oklab, rgb(var(--color-scale-gray-3)), rgb(var(--color-scale-black)) 2%);

  /* Primary button (purple) */
  --color-btn-primary-fg: rgb(var(--color-scale-white));
  --color-btn-primary-bg: rgb(var(--color-scale-purple-8));
  --color-btn-primary-border: rgb(var(--color-scale-purple-9));
  --color-btn-primary-shadow: 0 1px 0 rgba(var(--color-scale-black), 0.1);
  --color-btn-primary-inset-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --color-btn-primary-hover-fg: rgb(var(--color-scale-white));
  --color-btn-primary-hover-bg: rgb(var(--color-scale-purple-9));
  --color-btn-primary-hover-border: rgb(var(--color-scale-purple-9));
  --color-btn-primary-hover-shadow: 0 1px 0 rgba(var(--color-scale-black), 0.12);
  --color-btn-primary-active-fg: rgb(var(--color-scale-white));
  --color-btn-primary-active-bg: rgb(37 11 80);
  --color-btn-primary-active-border: rgb(var(--color-scale-purple-9));

  /* Marketing-only: link hover shade (app handles link hover per component) */
  --marketing-link-hover-fg: rgb(var(--color-scale-purple-9));
}

/* ==========================================================================
   Dark color scale (RGB triplets) — from dark/color-scale-dark.css
   ========================================================================== */
:root[data-color-mode='dark'] {
  color-scheme: dark;

  --color-scale-black: 8, 10, 12;
  --color-scale-white: 250, 251, 253;

  --color-scale-gray-0: 252, 252, 252;
  --color-scale-gray-1: 224, 224, 224;
  --color-scale-gray-2: 194, 194, 194;
  --color-scale-gray-3: 155, 155, 155;
  --color-scale-gray-4: 120, 120, 120;
  --color-scale-gray-5: 84, 84, 84;
  --color-scale-gray-6: 56, 56, 56;
  --color-scale-gray-7: 38, 38, 38;
  --color-scale-gray-8: 24, 24, 24;
  --color-scale-gray-9: 12, 12, 12;

  --color-scale-blue-0: 238, 244, 255;
  --color-scale-blue-1: 207, 225, 254;
  --color-scale-blue-2: 168, 200, 251;
  --color-scale-blue-3: 124, 172, 246;
  --color-scale-blue-4: 86, 144, 233;
  --color-scale-blue-5: 56, 115, 203;
  --color-scale-blue-6: 38, 86, 160;
  --color-scale-blue-7: 26, 62, 118;
  --color-scale-blue-8: 16, 41, 82;
  --color-scale-blue-9: 10, 26, 54;

  --color-scale-green-0: 214, 248, 223;
  --color-scale-green-1: 167, 229, 187;
  --color-scale-green-2: 123, 204, 151;
  --color-scale-green-3: 88, 175, 123;
  --color-scale-green-4: 61, 144, 96;
  --color-scale-green-5: 40, 114, 73;
  --color-scale-green-6: 28, 85, 53;
  --color-scale-green-7: 19, 60, 37;
  --color-scale-green-8: 12, 40, 24;
  --color-scale-green-9: 8, 27, 15;

  --color-scale-yellow-0: 255, 252, 217;
  --color-scale-yellow-1: 255, 243, 170;
  --color-scale-yellow-2: 255, 227, 102;
  --color-scale-yellow-3: 255, 210, 56;
  --color-scale-yellow-4: 231, 186, 29;
  --color-scale-yellow-5: 197, 160, 18;
  --color-scale-yellow-6: 161, 131, 12;
  --color-scale-yellow-7: 126, 100, 8;
  --color-scale-yellow-8: 96, 76, 6;
  --color-scale-yellow-9: 70, 56, 4;

  --color-scale-orange-0: 255, 237, 220;
  --color-scale-orange-1: 255, 214, 178;
  --color-scale-orange-2: 250, 183, 130;
  --color-scale-orange-3: 235, 146, 78;
  --color-scale-orange-4: 210, 114, 36;
  --color-scale-orange-5: 178, 86, 14;
  --color-scale-orange-6: 146, 64, 8;
  --color-scale-orange-7: 114, 46, 6;
  --color-scale-orange-8: 84, 32, 4;
  --color-scale-orange-9: 62, 22, 3;

  --color-scale-red-0: 255, 236, 239;
  --color-scale-red-1: 255, 206, 213;
  --color-scale-red-2: 252, 164, 172;
  --color-scale-red-3: 242, 104, 118;
  --color-scale-red-4: 220, 60, 76;
  --color-scale-red-5: 190, 36, 58;
  --color-scale-red-6: 151, 20, 46;
  --color-scale-red-7: 114, 10, 35;
  --color-scale-red-8: 78, 5, 24;
  --color-scale-red-9: 52, 3, 17;

  --color-scale-purple-0: 246, 233, 252;
  --color-scale-purple-1: 235, 210, 247;
  --color-scale-purple-2: 218, 180, 239;
  --color-scale-purple-3: 197, 147, 226;
  --color-scale-purple-4: 170, 116, 208;
  --color-scale-purple-5: 142, 87, 181;
  --color-scale-purple-6: 113, 61, 149;
  --color-scale-purple-7: 86, 40, 114;
  --color-scale-purple-8: 61, 25, 87;
  --color-scale-purple-9: 42, 14, 61;

  --color-scale-pink-0: 255, 241, 248;
  --color-scale-pink-1: 255, 220, 238;
  --color-scale-pink-2: 247, 192, 221;
  --color-scale-pink-3: 234, 156, 201;
  --color-scale-pink-4: 209, 116, 174;
  --color-scale-pink-5: 177, 81, 143;
  --color-scale-pink-6: 142, 52, 108;
  --color-scale-pink-7: 109, 30, 76;
  --color-scale-pink-8: 79, 14, 51;
  --color-scale-pink-9: 56, 5, 30;

  --color-scale-coral-0: 255, 239, 232;
  --color-scale-coral-1: 255, 218, 204;
  --color-scale-coral-2: 251, 193, 167;
  --color-scale-coral-3: 241, 162, 131;
  --color-scale-coral-4: 224, 125, 97;
  --color-scale-coral-5: 202, 91, 70;
  --color-scale-coral-6: 169, 67, 48;
  --color-scale-coral-7: 135, 45, 30;
  --color-scale-coral-8: 103, 28, 17;
  --color-scale-coral-9: 78, 19, 10;

  /* ----- Dark role tokens — from dark/dark-theme.css ----- */

  /* Foreground (text & icons) */
  --color-fg-default: rgb(var(--color-scale-white));
  --color-fg-secondary: lch(90.421 1 272);
  --color-fg-muted: color-mix(in oklab, rgb(var(--color-scale-gray-3)), rgb(var(--color-scale-gray-2)) 30%);
  --color-fg-subtle: rgb(var(--color-scale-gray-4));
  --color-fg-on-emphasis: rgb(var(--color-scale-white));

  --color-brand: var(--color-fg-default);
  --color-sidebar-bg: hsl(0 0% 4% / 1);
  --color-app-bg: hsl(0 0% 7% / 1);

  --color-focus-ring: rgb(var(--color-scale-blue-5));

  /* Canvas (backgrounds) */
  --color-canvas-default: hsl(0 0% 7% / 1);
  --color-canvas-subtle: color-mix(in oklab, rgb(var(--color-scale-gray-8)), rgb(var(--color-scale-gray-7)) 30%);
  --color-canvas-inset: rgb(var(--color-scale-black));
  --color-canvas-overlay: rgb(var(--color-scale-gray-7));
  --color-canvas-inverted: rgb(var(--color-scale-white));

  /* Neutral roles */
  --color-neutral-subtle: rgba(var(--color-scale-gray-0), 0.08);
  --color-neutral-emphasis-plus: rgb(var(--color-scale-gray-0));
  --color-neutral-emphasis: rgb(var(--color-scale-gray-2));
  --color-neutral-muted: rgb(var(--color-scale-gray-5));

  /* Shadows: darker, softer on dark backgrounds */
  --color-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.18), 0 3px 8px rgba(0, 0, 0, 0.16);
  --color-shadow-md: 0 2px 6px rgba(0, 0, 0, 0.2), 0 8px 16px rgba(0, 0, 0, 0.18);
  --color-shadow-lg: 0 4px 10px rgba(0, 0, 0, 0.22), 0 16px 32px rgba(0, 0, 0, 0.2);
  --color-shadow-xlg: 0 8px 18px rgba(0, 0, 0, 0.24), 0 24px 48px rgba(0, 0, 0, 0.22);
  --color-shadow-xlspread: 0 12px 32px rgba(0, 0, 0, 0.22), 0 40px 96px rgba(0, 0, 0, 0.18);
  --color-shadow-focus-visible-sm: 0 0 0 2px rgba(var(--color-scale-purple-4), 0.55), 0 0 6px rgba(var(--color-scale-purple-4), 0.45);
  --color-shadow-focus-visible: 0 0 0 2px rgba(var(--color-scale-purple-4), 0.65), 0 0 10px rgba(var(--color-scale-purple-4), 0.5);

  /* Borders */
  --color-border-default: color-mix(in oklab, rgb(var(--color-scale-gray-6)), rgb(var(--color-scale-gray-7)) 30%);
  --color-border-muted: rgb(var(--color-scale-gray-7));
  --color-border-subtle: rgba(var(--color-scale-white), 0.1);
  --color-border-contrast: rgb(var(--color-scale-gray-5));

  /* Accent (primary = purple) */
  --color-accent-fg: rgb(var(--color-scale-purple-3));
  --color-accent-subtle: rgba(var(--color-scale-purple-6), 0.22);
  --color-accent-muted: rgba(var(--color-scale-purple-7), 1);
  --color-accent-emphasis: rgb(var(--color-scale-purple-6));

  /* Success */
  --color-success-fg: rgb(var(--color-scale-green-2));
  --color-success-subtle: rgba(var(--color-scale-green-6), 0.22);
  --color-success-muted: rgba(var(--color-scale-green-7), 1);
  --color-success-emphasis: rgb(var(--color-scale-green-5));

  --color-info-fg: rgb(var(--color-scale-blue-2));
  --color-info-subtle: rgba(var(--color-scale-blue-5), 0.22);
  --color-info-muted: rgba(var(--color-scale-blue-7), 1);
  --color-info-emphasis: rgb(var(--color-scale-blue-6));

  /* Attention (yellow) */
  --color-attention-fg: rgb(var(--color-scale-yellow-3));
  --color-attention-subtle: rgba(var(--color-scale-yellow-6), 0.22);
  --color-attention-muted: rgba(var(--color-scale-yellow-6), 1);
  --color-attention-emphasis: rgb(var(--color-scale-yellow-6));

  /* Severe (orange) */
  --color-severe-fg: rgb(var(--color-scale-orange-2));
  --color-severe-subtle: rgba(var(--color-scale-orange-6), 0.22);
  --color-severe-muted: rgba(var(--color-scale-orange-7), 1);
  --color-severe-emphasis: rgb(var(--color-scale-orange-6));

  /* Danger (red) */
  --color-danger-fg: rgb(var(--color-scale-red-3));
  --color-danger-subtle: rgba(var(--color-scale-red-6), 0.16);
  --color-danger-muted: rgba(var(--color-scale-red-7), 1);
  --color-danger-emphasis: rgb(var(--color-scale-red-6));

  /* ----- Button tokens — from dark/components-dark.css (ds-button) ----- */

  /* Default neutral button */
  --color-btn-fg: rgb(var(--color-scale-gray-0));
  --color-btn-bg: rgb(var(--color-scale-gray-6));
  --color-btn-border: color-mix(in oklab, rgb(var(--color-scale-gray-5)), rgb(var(--color-scale-black)) 6%);
  --color-btn-shadow: 0 0 transparent;
  --color-btn-inset-shadow: 0 0 transparent;
  --color-btn-hover-fg: rgb(var(--color-scale-gray-1));
  --color-btn-hover-bg: color-mix(in oklab, rgb(var(--color-scale-gray-5)), rgb(var(--color-scale-black)) 8%);
  --color-btn-hover-border: color-mix(in oklab, rgb(var(--color-scale-gray-4)), rgb(var(--color-scale-black)) 8%);
  --color-btn-active-fg: rgb(var(--color-scale-gray-2));
  --color-btn-active-bg: color-mix(in oklab, rgb(var(--color-scale-gray-5)), rgb(var(--color-scale-black)) 24%);
  --color-btn-active-border: color-mix(in oklab, rgb(var(--color-scale-gray-4)), rgb(var(--color-scale-black)) 24%);

  /* Primary button (purple) */
  --color-btn-primary-fg: rgb(var(--color-scale-white));
  --color-btn-primary-bg: rgb(var(--color-scale-purple-6));
  --color-btn-primary-border: rgb(var(--color-scale-purple-5));
  --color-btn-primary-shadow: 0 0 transparent;
  --color-btn-primary-inset-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --color-btn-primary-hover-fg: rgb(var(--color-scale-white));
  --color-btn-primary-hover-bg: color-mix(in oklch, rgb(var(--color-scale-purple-6)), rgb(var(--color-scale-white)) 8%);
  --color-btn-primary-hover-border: rgb(var(--color-scale-purple-4));
  --color-btn-primary-hover-shadow: 0 0 transparent;
  --color-btn-primary-active-fg: rgb(var(--color-scale-white));
  --color-btn-primary-active-bg: rgb(var(--color-scale-purple-6));
  --color-btn-primary-active-border: rgb(var(--color-scale-purple-5));

  /* Marketing-only: link hover shade */
  --marketing-link-hover-fg: rgb(var(--color-scale-purple-2));
}