/* ===== Sarib design tokens v2.9.0 =========================================
   GENERATED by scripts/build.mjs. Do not edit: change the origin (syedsarib.com
   src/app/tokens.css, itself generated from the brand foundations repo) or
   src/tokens.extra.css, then run `npm run build`.
   Every origin var() chain is resolved to a literal; `npm run check` proves parity.

   Light is the default. Dark: data-mode="dark" (the origin's switch) or
   data-theme="dark" on <html> or on any element (scoped dark subtree).
   Follow the OS instead: data-mode="system" on <html>.
   Tokens only. Components live in components.css. */

:root {
  color-scheme: light;

  /* --- Primitives (do not use directly in components) --- */
  --s-prim-neutral-10: #f7f7f4;
  --s-prim-neutral-20: #ecebe8;
  --s-prim-neutral-25: #e4e4e1;
  --s-prim-neutral-30: #dddcd9;
  --s-prim-neutral-35: #d4d3d0;
  --s-prim-neutral-40: #cbcac8;
  --s-prim-neutral-50: #b8b7b4;
  --s-prim-neutral-60: #605f5c;
  --s-prim-neutral-65: #4b4a48;
  --s-prim-neutral-70: #444441;
  --s-prim-neutral-75: #3b3a38;
  --s-prim-neutral-80: #32322f;
  --s-prim-neutral-85: #272624;
  --s-prim-neutral-90: #22221f;
  --s-prim-neutral-100: #181715;
  --s-prim-neutral-110: #0f0e0c;
  --s-prim-neutral-white: #ffffff;
  --s-prim-neutral-black: #000000;
  --s-prim-brand-10: #ffebe4;
  --s-prim-brand-20: #ffcdc0;
  --s-prim-brand-30: #ffa48d;
  --s-prim-brand-40: #ff7559;
  --s-prim-brand-50: #f53606;
  --s-prim-brand-60: #c31800;
  --s-prim-brand-70: #a70d00;
  --s-prim-brand-80: #810300;
  --s-prim-brand-90: #5b0000;
  --s-prim-brand-100: #380000;
  --s-prim-brand-alt-10: #e4f6f4;
  --s-prim-brand-alt-20: #bfe8e2;
  --s-prim-brand-alt-30: #86d5cc;
  --s-prim-brand-alt-40: #3abbaf;
  --s-prim-brand-alt-50: #009a8d;
  --s-prim-brand-alt-60: #007f74;
  --s-prim-brand-alt-70: #006b62;
  --s-prim-brand-alt-80: #00524a;
  --s-prim-brand-alt-90: #003832;
  --s-prim-brand-alt-100: #00201c;
  --s-prim-error-10: #ffe9e8;
  --s-prim-error-20: #ffccca;
  --s-prim-error-30: #ffa1a0;
  --s-prim-error-40: #f75c64;
  --s-prim-error-50: #e42d45;
  --s-prim-error-60: #ba0b2f;
  --s-prim-error-70: #9c0325;
  --s-prim-error-80: #75061b;
  --s-prim-error-90: #4c0610;
  --s-prim-error-100: #280205;
  --s-prim-success-10: #e1f7e4;
  --s-prim-success-20: #beecc6;
  --s-prim-success-30: #8fd89e;
  --s-prim-success-40: #4db869;
  --s-prim-success-50: #009a44;
  --s-prim-success-60: #007f34;
  --s-prim-success-70: #006429;
  --s-prim-success-80: #004b1d;
  --s-prim-success-90: #023011;
  --s-prim-success-100: #011706;
  --s-prim-warning-10: #ffefd7;
  --s-prim-warning-20: #ffdcab;
  --s-prim-warning-30: #ffc16c;
  --s-prim-warning-40: #fcaa38;
  --s-prim-warning-50: #e19005;
  --s-prim-warning-60: #b46e00;
  --s-prim-warning-70: #8c5500;
  --s-prim-warning-80: #663d00;
  --s-prim-warning-90: #432600;
  --s-prim-warning-100: #231200;
  --s-prim-info-10: #e2f2ff;
  --s-prim-info-20: #c1e2ff;
  --s-prim-info-30: #8ccaff;
  --s-prim-info-40: #4ba3f7;
  --s-prim-info-50: #007cdf;
  --s-prim-info-60: #0062c6;
  --s-prim-info-70: #0051ad;
  --s-prim-info-80: #003c82;
  --s-prim-info-90: #002654;
  --s-prim-info-100: #00112d;
  --s-prim-spectrum-blue-10: #d8f6ff;
  --s-prim-spectrum-blue-20: #afe4ff;
  --s-prim-spectrum-blue-30: #83cbff;
  --s-prim-spectrum-blue-40: #58aefb;
  --s-prim-spectrum-blue-50: #2191e7;
  --s-prim-spectrum-blue-60: #0075c4;
  --s-prim-spectrum-blue-70: #005ea2;
  --s-prim-spectrum-blue-80: #00447c;
  --s-prim-spectrum-blue-90: #002f5d;
  --s-prim-spectrum-blue-100: #001b3d;
  --s-prim-spectrum-yellow-10: #fff5c8;
  --s-prim-spectrum-yellow-20: #ffe38d;
  --s-prim-spectrum-yellow-30: #f8d14f;
  --s-prim-spectrum-yellow-40: #e2b926;
  --s-prim-spectrum-yellow-50: #c09a00;
  --s-prim-spectrum-yellow-60: #9e7c00;
  --s-prim-spectrum-yellow-70: #7c5f00;
  --s-prim-spectrum-yellow-80: #5b4500;
  --s-prim-spectrum-yellow-90: #3f2e00;
  --s-prim-spectrum-yellow-100: #251900;
  --s-prim-spectrum-green-10: #d0ffdb;
  --s-prim-spectrum-green-20: #a6f3ba;
  --s-prim-spectrum-green-30: #70e093;
  --s-prim-spectrum-green-40: #47cf79;
  --s-prim-spectrum-green-50: #00b057;
  --s-prim-spectrum-green-60: #008d41;
  --s-prim-spectrum-green-70: #00702f;
  --s-prim-spectrum-green-80: #00531e;
  --s-prim-spectrum-green-90: #003b11;
  --s-prim-spectrum-green-100: #002405;

  /* --- Foundations: spacing, radius, stroke, type, motion, layout --- */
  --s-spacing-1: 4px;
  --s-spacing-2: 6px;
  --s-spacing-3: 8px;
  --s-spacing-4: 12px;
  --s-spacing-5: 16px;
  --s-spacing-6: 20px;
  --s-spacing-7: 24px;
  --s-spacing-8: 28px;
  --s-spacing-9: 32px;
  --s-spacing-10: 36px;
  --s-spacing-11: 40px;
  --s-spacing-12: 48px;
  --s-spacing-13: 56px;
  --s-spacing-14: 64px;
  --s-spacing-15: 72px;
  --s-spacing-16: 80px;
  --s-spacing-17: 96px;
  --s-spacing-18: 120px;
  --s-radius-1: 2px;
  --s-radius-2: 4px;
  --s-radius-3: 6px;
  --s-radius-4: 8px;
  --s-radius-5: 10px;
  --s-radius-6: 12px;
  --s-radius-7: 14px;
  --s-radius-8: 16px;
  --s-radius-9: 18px;
  --s-radius-10: 20px;
  --s-radius-11: 24px;
  --s-radius-12: 32px;
  --s-radius-13: 40px;
  --s-radius-14: 56px;
  --s-radius-full: 1000px;
  --s-stroke-width-1: 0.5px;
  --s-stroke-width-2: 1px;
  --s-stroke-width-3: 1.5px;
  --s-stroke-width-4: 2px;
  --s-stroke-width-5: 2.5px;
  --s-stroke-width-6: 4px;
  --s-focus-ring-width: 2px;
  --s-focus-ring-offset: 2px;
  --s-size-target-min: 44px;
  --s-size-target-comfortable: 48px;
  --s-icon-size-sm: 16px;
  --s-icon-size-md: 20px;
  --s-icon-size-lg: 24px;
  --s-icon-size-xl: 32px;
  --s-icon-stroke: 2px;
  --s-layer-base: 0;
  --s-layer-dropdown: 1000;
  --s-layer-sticky: 1100;
  --s-layer-overlay: 1200;
  --s-layer-modal: 1300;
  --s-layer-popover: 1400;
  --s-layer-toast: 1500;
  --s-layer-tooltip: 1600;
  --s-drag-opacity: 0.5;
  --s-breakpoint-sm: 480px;
  --s-breakpoint-md: 768px;
  --s-breakpoint-lg: 1024px;
  --s-breakpoint-xl: 1280px;
  --s-container-sm: 640px;
  --s-container-md: 768px;
  --s-container-lg: 1024px;
  --s-container-xl: 1280px;
  --s-container-gutter: 24px;
  --s-container-measure: 65ch;
  --s-font-family-display: "Google Sans Flex", system-ui, sans-serif;
  --s-font-family-heading: "Google Sans Flex", system-ui, sans-serif;
  --s-font-family-body: "Google Sans Flex", system-ui, sans-serif;
  --s-font-family-label: "Google Sans Flex", system-ui, sans-serif;
  --s-font-family-code: "Google Sans Code", ui-monospace, monospace;
  --s-font-family-pixel: "Bitcount", "Google Sans Code", monospace;
  --s-font-family-pixel-alt: "Pixelify Sans", "Google Sans Code", monospace;
  --s-font-weight-regular: 400;
  --s-font-weight-medium: 500;
  --s-font-weight-semibold: 600;
  --s-font-weight-bold: 700;
  --s-font-weight-extrabold: 800;
  --s-font-style-regular: Regular;
  --s-font-style-medium: Medium;
  --s-font-style-semibold: SemiBold;
  --s-font-style-bold: Bold;
  --s-font-style-extrabold: ExtraBold;
  --s-font-size-display-md: clamp(36px, calc(36px + (72 - 36) * (100vw - 360px) / 880), 72px);
  --s-font-size-display-sm: clamp(32px, calc(32px + (60 - 32) * (100vw - 360px) / 880), 60px);
  --s-font-size-display-xs: clamp(28px, calc(28px + (48 - 28) * (100vw - 360px) / 880), 48px);
  --s-font-size-heading-2xl: clamp(28px, calc(28px + (40 - 28) * (100vw - 360px) / 880), 40px);
  --s-font-size-heading-xl: clamp(26px, calc(26px + (36 - 26) * (100vw - 360px) / 880), 36px);
  --s-font-size-heading-lg: clamp(24px, calc(24px + (32 - 24) * (100vw - 360px) / 880), 32px);
  --s-font-size-heading-md: clamp(22px, calc(22px + (28 - 22) * (100vw - 360px) / 880), 28px);
  --s-font-size-heading-sm: clamp(20px, calc(20px + (24 - 20) * (100vw - 360px) / 880), 24px);
  --s-font-size-heading-xs: clamp(18px, calc(18px + (20 - 18) * (100vw - 360px) / 880), 20px);
  --s-font-size-body-xl: 20px;
  --s-font-size-body-lg: 18px;
  --s-font-size-body-md: 16px;
  --s-font-size-body-sm: 14px;
  --s-font-size-body-xs: 12px;
  --s-font-size-label-2xl: 20px;
  --s-font-size-label-xl: 18px;
  --s-font-size-label-lg: 16px;
  --s-font-size-label-md: 14px;
  --s-font-size-label-sm: 12px;
  --s-font-size-label-xs: 11px;
  --s-line-height-display-md: 1.167;
  --s-line-height-display-sm: 1.2;
  --s-line-height-display-xs: 1.167;
  --s-line-height-heading-2xl: 1.2;
  --s-line-height-heading-xl: 1.222;
  --s-line-height-heading-lg: 1.25;
  --s-line-height-heading-md: 1.286;
  --s-line-height-heading-sm: 1.333;
  --s-line-height-heading-xs: 1.2;
  --s-line-height-body-xl: 1.4;
  --s-line-height-body-lg: 1.556;
  --s-line-height-body-md: 1.5;
  --s-line-height-body-sm: 1.429;
  --s-line-height-body-xs: 1.333;
  --s-line-height-label-2xl: 1.2;
  --s-line-height-label-xl: 1.333;
  --s-line-height-label-lg: 1.25;
  --s-line-height-label-md: 1.429;
  --s-line-height-label-sm: 1.333;
  --s-line-height-label-xs: 1.455;
  --s-letter-spacing-display-md: -0.02em;
  --s-letter-spacing-display-sm: -0.015em;
  --s-letter-spacing-display-xs: 0em;
  --s-letter-spacing-heading-2xl: 0em;
  --s-letter-spacing-heading-xl: 0em;
  --s-letter-spacing-heading-lg: 0em;
  --s-letter-spacing-heading-md: 0em;
  --s-letter-spacing-heading-sm: 0.005em;
  --s-letter-spacing-heading-xs: 0.005em;
  --s-letter-spacing-body-xl: 0em;
  --s-letter-spacing-body-lg: 0em;
  --s-letter-spacing-body-md: 0.005em;
  --s-letter-spacing-body-sm: 0.005em;
  --s-letter-spacing-body-xs: 0.005em;
  --s-letter-spacing-label-2xl: 0.01em;
  --s-letter-spacing-label-xl: 0.01em;
  --s-letter-spacing-label-lg: 0.01em;
  --s-letter-spacing-label-md: 0.01em;
  --s-letter-spacing-label-sm: 0.01em;
  --s-letter-spacing-label-xs: 0.015em;
  --s-default-weight-display: bold;
  --s-default-weight-heading: semibold;
  --s-default-weight-body: regular;
  --s-default-weight-label: medium;
  --s-motion-spring-effects-fast: linear(0, 0.024, 0.0822, 0.1593, 0.2446, 0.3313, 0.4151, 0.4932, 0.5644, 0.628, 0.6842, 0.7333, 0.7756, 0.812, 0.843, 0.8693, 0.8915, 0.9101, 0.9257, 0.9387, 0.9496, 0.9585, 0.966, 0.9721, 0.9772, 0.9814, 0.9848, 0.9876, 0.9899, 0.9918, 0.9933, 0.9946, 0.9956, 0.9964, 0.9971, 0.9977, 0.9981, 0.9985, 0.9988, 1);
  --s-motion-spring-effects-fast-ms: 120ms;
  --s-motion-spring-effects-default: linear(0, 0.024, 0.0822, 0.1593, 0.2446, 0.3313, 0.4151, 0.4932, 0.5644, 0.628, 0.6842, 0.7333, 0.7756, 0.812, 0.843, 0.8693, 0.8915, 0.9101, 0.9257, 0.9387, 0.9496, 0.9585, 0.966, 0.9721, 0.9772, 0.9814, 0.9848, 0.9876, 0.9899, 0.9918, 0.9933, 0.9946, 0.9956, 0.9964, 0.9971, 0.9977, 0.9981, 0.9985, 0.9988, 1);
  --s-motion-spring-effects-default-ms: 180ms;
  --s-motion-spring-effects-slow: linear(0, 0.024, 0.0822, 0.1593, 0.2446, 0.3313, 0.4151, 0.4932, 0.5644, 0.628, 0.6842, 0.7333, 0.7756, 0.812, 0.843, 0.8693, 0.8915, 0.9101, 0.9257, 0.9387, 0.9496, 0.9585, 0.966, 0.9721, 0.9772, 0.9814, 0.9848, 0.9876, 0.9899, 0.9918, 0.9933, 0.9946, 0.9956, 0.9964, 0.9971, 0.9977, 0.9981, 0.9985, 0.9988, 1);
  --s-motion-spring-effects-slow-ms: 280ms;
  --s-motion-spring-spatial-fast: linear(0, 0.018, 0.064, 0.1281, 0.2028, 0.2822, 0.3624, 0.4403, 0.5141, 0.5823, 0.6444, 0.7001, 0.7493, 0.7924, 0.8297, 0.8616, 0.8888, 0.9116, 0.9306, 0.9463, 0.9592, 0.9696, 0.9779, 0.9845, 0.9896, 0.9936, 0.9966, 0.9988, 1.0004, 1.0016, 1.0023, 1.0027, 1.0029, 1.003, 1.0029, 1.0028, 1.0026, 1.0023, 1.0021, 1);
  --s-motion-spring-spatial-fast-ms: 190ms;
  --s-motion-spring-spatial-default: linear(0, 0.0207, 0.0736, 0.1469, 0.2318, 0.3214, 0.4108, 0.4967, 0.5766, 0.6492, 0.7139, 0.7705, 0.8192, 0.8605, 0.8949, 0.9231, 0.946, 0.9641, 0.9782, 0.989, 0.997, 1.0027, 1.0066, 1.0091, 1.0105, 1.0111, 1.011, 1.0106, 1.0098, 1.0089, 1.0079, 1.0069, 1.006, 1.0051, 1.0042, 1.0035, 1.0028, 1.0022, 1.0017, 1);
  --s-motion-spring-spatial-default-ms: 340ms;
  --s-motion-spring-spatial-slow: linear(0, 0.0229, 0.0812, 0.1618, 0.2547, 0.352, 0.4484, 0.5398, 0.6239, 0.6991, 0.7649, 0.8213, 0.8685, 0.9074, 0.9387, 0.9632, 0.9821, 0.9961, 1.0061, 1.0128, 1.017, 1.0192, 1.0199, 1.0196, 1.0185, 1.0169, 1.0151, 1.0131, 1.0112, 1.0094, 1.0077, 1.0061, 1.0048, 1.0037, 1.0027, 1.0019, 1.0013, 1.0008, 1.0004, 1);
  --s-motion-spring-spatial-slow-ms: 480ms;
  --s-motion-spring-expressive: linear(0, 0.0361, 0.1273, 0.2508, 0.3887, 0.5271, 0.6565, 0.7708, 0.8666, 0.9429, 1.0004, 1.0407, 1.0662, 1.0796, 1.0835, 1.0806, 1.073, 1.0628, 1.0513, 1.0397, 1.0289, 1.0193, 1.0113, 1.0049, 1, 0.9966, 0.9945, 0.9934, 0.993, 0.9933, 0.9939, 0.9947, 0.9957, 0.9967, 0.9976, 0.9984, 0.9991, 0.9996, 1, 1);
  --s-motion-spring-expressive-ms: 520ms;
  --s-motion-scale-spatial: 1;
  --s-motion-duration-instant: 0ms;
  --s-motion-duration-fast: 150ms;
  --s-motion-duration-base: 250ms;
  --s-motion-duration-slow: 420ms;
  --s-motion-duration-slower: 720ms;
  --s-motion-duration-ambient: 1500ms;
  --s-motion-easing-entrance: cubic-bezier(0.34, 1.56, 0.64, 1);
  --s-motion-easing-exit: cubic-bezier(0.4, 0, 1, 1);
  --s-motion-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --s-motion-easing-linear: linear;

  /* --- Semantic colour roles + elevation --- */
  --s-color-background: #ffffff;
  --s-color-surface-primary: #f7f7f4;
  --s-color-surface-primary-variant: #ffffff;
  --s-color-surface-secondary: #ecebe8;
  --s-color-surface-secondary-variant: #f7f7f4;
  --s-color-surface-tertiary: #dddcd9;
  --s-color-surface-tertiary-variant: #ecebe8;
  --s-color-surface-inverse: #0f0e0c;
  --s-color-surface-elevated: #ffffff;
  --s-color-surface-overlay: #ffffff;
  --s-color-surface-fixed: #ffffff;
  --s-color-surface-brand: #ffebe4;
  --s-color-surface-critical: #ffe9e8;
  --s-color-surface-success: #e1f7e4;
  --s-color-surface-warning: #ffefd7;
  --s-color-surface-info: #e2f2ff;
  --s-color-surface-brand-flat: #ffebe4;
  --s-color-surface-critical-flat: #ffe9e8;
  --s-color-surface-success-flat: #e1f7e4;
  --s-color-surface-warning-flat: #ffefd7;
  --s-color-surface-info-flat: #e2f2ff;
  --s-color-surface-skeleton: #ecebe8;
  --s-color-surface-skeleton-highlight: #f7f7f4;
  --s-color-fill-primary: #f7f7f4;
  --s-color-fill-primary-hover: #ecebe8;
  --s-color-fill-primary-active: #dddcd9;
  --s-color-fill-primary-disabled: rgba(247, 247, 244, 0.5);
  --s-color-fill-primary-variant: #ffffff;
  --s-color-fill-primary-variant-hover: #f7f7f4;
  --s-color-fill-primary-variant-active: #ecebe8;
  --s-color-fill-primary-variant-disabled: rgba(255, 255, 255, 0.5);
  --s-color-fill-secondary: #ecebe8;
  --s-color-fill-secondary-hover: #dddcd9;
  --s-color-fill-secondary-active: #cbcac8;
  --s-color-fill-secondary-disabled: rgba(236, 235, 232, 0.5);
  --s-color-fill-secondary-variant: #f7f7f4;
  --s-color-fill-secondary-variant-hover: #ecebe8;
  --s-color-fill-secondary-variant-active: #dddcd9;
  --s-color-fill-secondary-variant-disabled: rgba(247, 247, 244, 0.5);
  --s-color-fill-tertiary: #dddcd9;
  --s-color-fill-tertiary-hover: #cbcac8;
  --s-color-fill-tertiary-active: #b8b7b4;
  --s-color-fill-tertiary-disabled: rgba(221, 220, 217, 0.5);
  --s-color-fill-tertiary-variant: #ecebe8;
  --s-color-fill-tertiary-variant-hover: #dddcd9;
  --s-color-fill-tertiary-variant-active: #cbcac8;
  --s-color-fill-tertiary-variant-disabled: rgba(236, 235, 232, 0.5);
  --s-color-fill-inverse: #0f0e0c;
  --s-color-fill-inverse-hover: #181715;
  --s-color-fill-inverse-active: #22221f;
  --s-color-fill-inverse-disabled: rgba(15, 14, 12, 0.5);
  --s-color-fill-elevated: #ffffff;
  --s-color-fill-elevated-hover: #f7f7f4;
  --s-color-fill-elevated-active: #ecebe8;
  --s-color-fill-elevated-disabled: rgba(255, 255, 255, 0.5);
  --s-color-fill-fixed: #ffffff;
  --s-color-fill-fixed-disabled: rgba(255, 255, 255, 0.5);
  --s-color-fill-brand: #c31800;
  --s-color-fill-brand-hover: #a70d00;
  --s-color-fill-brand-active: #810300;
  --s-color-fill-brand-disabled: rgba(195, 24, 0, 0.5);
  --s-color-fill-brand-secondary: rgba(245, 54, 6, 0.15);
  --s-color-fill-brand-secondary-hover: rgba(245, 54, 6, 0.3);
  --s-color-fill-brand-secondary-active: rgba(195, 24, 0, 0.3);
  --s-color-fill-brand-secondary-disabled: rgba(245, 54, 6, 0.08);
  --s-color-fill-success: #007f34;
  --s-color-fill-success-hover: #006429;
  --s-color-fill-success-active: #004b1d;
  --s-color-fill-success-disabled: rgba(0, 127, 52, 0.5);
  --s-color-fill-warning: #e19005;
  --s-color-fill-warning-hover: #b46e00;
  --s-color-fill-warning-active: #8c5500;
  --s-color-fill-warning-disabled: rgba(225, 144, 5, 0.5);
  --s-color-fill-critical: #ba0b2f;
  --s-color-fill-critical-hover: #9c0325;
  --s-color-fill-critical-active: #75061b;
  --s-color-fill-critical-disabled: rgba(186, 11, 47, 0.5);
  --s-color-fill-info: #0062c6;
  --s-color-fill-info-hover: #0051ad;
  --s-color-fill-info-active: #003c82;
  --s-color-fill-info-disabled: rgba(0, 98, 198, 0.5);
  --s-color-fill-success-secondary: rgba(0, 154, 68, 0.15);
  --s-color-fill-success-secondary-hover: rgba(0, 154, 68, 0.3);
  --s-color-fill-success-secondary-active: rgba(0, 127, 52, 0.3);
  --s-color-fill-success-secondary-disabled: rgba(0, 154, 68, 0.08);
  --s-color-fill-warning-secondary: rgba(225, 144, 5, 0.15);
  --s-color-fill-warning-secondary-hover: rgba(225, 144, 5, 0.3);
  --s-color-fill-warning-secondary-active: rgba(180, 110, 0, 0.3);
  --s-color-fill-warning-secondary-disabled: rgba(225, 144, 5, 0.08);
  --s-color-fill-critical-secondary: rgba(228, 45, 69, 0.15);
  --s-color-fill-critical-secondary-hover: rgba(228, 45, 69, 0.3);
  --s-color-fill-critical-secondary-active: rgba(186, 11, 47, 0.3);
  --s-color-fill-critical-secondary-disabled: rgba(228, 45, 69, 0.08);
  --s-color-fill-info-secondary: rgba(0, 124, 223, 0.15);
  --s-color-fill-info-secondary-hover: rgba(0, 124, 223, 0.3);
  --s-color-fill-info-secondary-active: rgba(0, 98, 198, 0.3);
  --s-color-fill-info-secondary-disabled: rgba(0, 124, 223, 0.08);
  --s-color-fill-selected: rgba(245, 54, 6, 0.15);
  --s-color-fill-selected-hover: rgba(245, 54, 6, 0.3);
  --s-color-fill-selected-active: rgba(195, 24, 0, 0.3);
  --s-color-fill-selected-disabled: rgba(245, 54, 6, 0.08);
  --s-color-fill-text-selection: rgba(245, 54, 6, 0.3);
  --s-color-fill-dropzone: rgba(245, 54, 6, 0.15);
  --s-color-fill-dropzone-active: rgba(245, 54, 6, 0.3);
  --s-color-border-primary: #e4e4e1;
  --s-color-border-primary-hover: #d4d3d0;
  --s-color-border-primary-disabled: rgba(228, 228, 225, 0.5);
  --s-color-border-secondary: #d4d3d0;
  --s-color-border-secondary-hover: #cbcac8;
  --s-color-border-secondary-disabled: rgba(212, 211, 208, 0.5);
  --s-color-border-tertiary: #cbcac8;
  --s-color-border-tertiary-hover: #b8b7b4;
  --s-color-border-tertiary-disabled: rgba(203, 202, 200, 0.5);
  --s-color-border-inverse: #0f0e0c;
  --s-color-border-inverse-hover: #181715;
  --s-color-border-inverse-disabled: rgba(15, 14, 12, 0.5);
  --s-color-border-elevated: #e4e4e1;
  --s-color-border-elevated-hover: #dddcd9;
  --s-color-border-elevated-disabled: rgba(228, 228, 225, 0.5);
  --s-color-border-brand: #c31800;
  --s-color-border-brand-hover: #a70d00;
  --s-color-border-brand-disabled: rgba(195, 24, 0, 0.5);
  --s-color-border-brand-secondary: rgba(245, 54, 6, 0.15);
  --s-color-border-brand-secondary-hover: rgba(245, 54, 6, 0.3);
  --s-color-border-brand-secondary-active: rgba(195, 24, 0, 0.3);
  --s-color-border-brand-secondary-disabled: rgba(245, 54, 6, 0.08);
  --s-color-border-selected: #a70d00;
  --s-color-border-success: #009a44;
  --s-color-border-success-hover: #007f34;
  --s-color-border-success-disabled: rgba(0, 154, 68, 0.5);
  --s-color-border-warning: #e19005;
  --s-color-border-warning-hover: #b46e00;
  --s-color-border-warning-disabled: rgba(225, 144, 5, 0.5);
  --s-color-border-critical: #e42d45;
  --s-color-border-critical-hover: #ba0b2f;
  --s-color-border-critical-disabled: rgba(228, 45, 69, 0.5);
  --s-color-border-info: #007cdf;
  --s-color-border-info-hover: #0062c6;
  --s-color-border-info-disabled: rgba(0, 124, 223, 0.5);
  --s-color-border-dropzone: rgba(195, 24, 0, 0.3);
  --s-color-border-primary-active: #cbcac8;
  --s-color-border-secondary-active: #b8b7b4;
  --s-color-border-brand-active: #810300;
  --s-color-border-critical-active: #9c0325;
  --s-color-border-success-active: #006429;
  --s-color-border-warning-active: #8c5500;
  --s-color-border-info-active: #0051ad;
  --s-color-border-focus: #c31800;
  --s-color-border-focus-inverse: #ffffff;
  --s-color-content-primary: #0f0e0c;
  --s-color-content-secondary: #605f5c;
  --s-color-content-tertiary: rgba(15, 14, 12, 0.5);
  --s-color-content-primary-disabled: rgba(15, 14, 12, 0.3);
  --s-color-content-secondary-disabled: rgba(96, 95, 92, 0.3);
  --s-color-content-tertiary-disabled: rgba(15, 14, 12, 0.15);
  --s-color-content-primary-inverse: #ffffff;
  --s-color-content-primary-inverse-disabled: rgba(255, 255, 255, 0.5);
  --s-color-content-secondary-inverse: #b8b7b4;
  --s-color-content-secondary-inverse-disabled: rgba(184, 183, 180, 0.5);
  --s-color-content-fixed: #0f0e0c;
  --s-color-content-fixed-disabled: rgba(15, 14, 12, 0.5);
  --s-color-content-fixed-inverse: #ffffff;
  --s-color-content-fixed-inverse-disabled: rgba(255, 255, 255, 0.5);
  --s-color-content-on-brand: #ffffff;
  --s-color-content-on-brand-disabled: rgba(255, 255, 255, 0.5);
  --s-color-content-on-critical: #ffffff;
  --s-color-content-on-critical-disabled: rgba(255, 255, 255, 0.5);
  --s-color-content-on-success: #ffffff;
  --s-color-content-on-success-disabled: rgba(255, 255, 255, 0.5);
  --s-color-content-on-warning: #0f0e0c;
  --s-color-content-on-warning-disabled: rgba(15, 14, 12, 0.5);
  --s-color-content-on-info: #ffffff;
  --s-color-content-on-info-disabled: rgba(255, 255, 255, 0.5);
  --s-color-content-link: #a70d00;
  --s-color-content-link-hover: #810300;
  --s-color-content-link-visited: #5b0000;
  --s-color-content-placeholder: rgba(15, 14, 12, 0.5);
  --s-color-content-selected: #810300;
  --s-color-content-brand: #a70d00;
  --s-color-content-brand-hover: #810300;
  --s-color-content-brand-active: #5b0000;
  --s-color-content-brand-disabled: rgba(167, 13, 0, 0.5);
  --s-color-content-critical: #9c0325;
  --s-color-content-critical-hover: #75061b;
  --s-color-content-critical-active: #4c0610;
  --s-color-content-critical-disabled: rgba(156, 3, 37, 0.5);
  --s-color-content-success: #006429;
  --s-color-content-success-hover: #004b1d;
  --s-color-content-success-active: #023011;
  --s-color-content-success-disabled: rgba(0, 100, 41, 0.5);
  --s-color-content-warning: #8c5500;
  --s-color-content-warning-hover: #663d00;
  --s-color-content-warning-active: #432600;
  --s-color-content-warning-disabled: rgba(140, 85, 0, 0.5);
  --s-color-content-info: #0051ad;
  --s-color-content-info-hover: #003c82;
  --s-color-content-info-active: #002654;
  --s-color-content-info-disabled: rgba(0, 81, 173, 0.5);
  --s-color-content-brand-inverse: #ffa48d;
  --s-color-content-critical-inverse: #f75c64;
  --s-color-content-success-inverse: #4db869;
  --s-color-content-warning-inverse: #fcaa38;
  --s-color-content-info-inverse: #4ba3f7;
  --s-elevation-overlay-dimness: rgba(0, 0, 0, 0.5);
  --s-elevation-overlay-blur: 4px;
  --s-elevation-drop-shadow-x-small: rgba(159, 158, 156, 0.08);
  --s-elevation-drop-shadow-small: rgba(159, 158, 156, 0.12);
  --s-elevation-drop-shadow-medium: rgba(159, 158, 156, 0.16);
  --s-elevation-drop-shadow-large: rgba(159, 158, 156, 0.22);
  --s-elevation-sm: 0 1px 2px rgba(159, 158, 156, 0.12), 0 1px 3px rgba(159, 158, 156, 0.12);
  --s-elevation-md: 0 2px 6px rgba(159, 158, 156, 0.16), 0 4px 12px rgba(159, 158, 156, 0.16);
  --s-elevation-lg: 0 8px 24px rgba(159, 158, 156, 0.22), 0 2px 6px rgba(159, 158, 156, 0.22);

  /* --- sarib-design additions (src/tokens.extra.css) --- */
  --site-font-size-hero: clamp(32px, calc(32px + 24 * (100vw - 360px) / 1080), 56px);
  --site-hero-sm-size: 32px;
  --site-hero-sm-line-height: 40px;
  --site-hero-lg-size: 48px;
  --site-hero-lg-line-height: 56px;
  --site-content-max: 1376px;
  --site-article-max: 720px;
  --site-copy-max: 560px;
  --site-header-height: 80px;
  --site-breakpoint-desktop: 1025px;
  --s-breakpoint-desktop: 1025px;
  --site-panel-width: 600px;
  --site-menu-width: 360px;
  --site-composer-radius: 28px;
  --site-send-gradient: linear-gradient(to bottom, #c31800, #5d0b00);
  --s-bg: var(--s-color-background);
  --s-canvas: var(--s-color-fill-primary-disabled);
  --s-surface: var(--s-color-surface-elevated);
  --s-surface-muted: var(--s-color-fill-secondary);
  --s-ink: var(--s-color-content-primary);
  --s-muted: var(--s-color-content-secondary);
  --s-faint: var(--s-color-content-tertiary);
  --s-line: var(--s-color-border-primary);
  --s-accent: var(--s-color-content-brand);
  --s-accent-fill: var(--s-color-fill-brand);
  --s-accent-tint: var(--s-color-fill-brand-secondary);
  --s-focus: var(--s-color-border-focus);
  --s-success: var(--s-color-content-success);
  --s-warning: var(--s-color-content-warning);
  --s-error: var(--s-color-content-critical);
  --s-color-scrim: color-mix(in srgb, var(--s-color-content-primary) 30%, transparent);
  --s-color-fill-on-image: rgba(0, 0, 0, 0.4);
  --s-color-fill-on-image-hover: rgba(0, 0, 0, 0.6);
  --s-color-data-1: var(--s-color-content-primary);
  --s-color-data-2: #0062c6;
  --s-color-data-3: #007f34;
  --s-color-data-4: #e19005;
  --s-color-data-5: #ba0b2f;
  --s-color-data-6: var(--s-color-content-secondary);
  --s-color-data-muted: var(--s-color-content-tertiary);
  --s-color-data-highlight: var(--s-color-fill-brand);
  --s-color-data-baseline: var(--s-color-border-primary);
  --s-data-area-opacity: 0.08;
  --s-color-category-1: #3b73c4;
  --s-color-category-2: #3f9a5a;
  --s-color-category-3: #a97b0f;
  --s-color-category-4: #8a5bc9;
  --s-color-category-5: #6f7f2a;
  --s-color-category-6: #1f9a9a;
  --s-color-category-7: #cf4f95;
  --s-color-category-8: #9a6a3f;
  --s-color-fill-raised-secondary: var(--s-color-fill-secondary);
  --s-color-fill-raised-secondary-hover: var(--s-color-fill-secondary-hover);
  --s-color-fill-raised-secondary-active: var(--s-color-fill-secondary-active);
  --s-color-fill-raised-secondary-disabled: var(--s-color-fill-secondary-disabled);
  --s-color-fill-raised-tertiary: var(--s-color-fill-tertiary);
  --s-color-fill-raised-tertiary-hover: var(--s-color-fill-tertiary-hover);
  --s-color-fill-raised-tertiary-active: var(--s-color-fill-tertiary-active);
  --s-color-fill-raised-tertiary-disabled: var(--s-color-fill-tertiary-disabled);
  --s-color-fill-raised-ghost-hover: var(--s-color-fill-primary-variant-hover);
  --s-color-fill-raised-ghost-active: var(--s-color-fill-primary-variant-active);
  --s-color-menu-inverse-surface: #181715;
  --s-color-menu-inverse-border: #32322f;
  --s-color-menu-inverse-hover: #32322f;
  --s-color-menu-inverse-active: #3b3a38;
  --s-color-menu-inverse-content: #f7f7f4;
  --s-color-menu-inverse-content-secondary: #b8b7b4;
  --s-color-menu-inverse-content-tertiary: rgba(247, 247, 244, 0.5);
  --s-color-menu-inverse-content-disabled: rgba(247, 247, 244, 0.3);
  --s-color-menu-inverse-brand: #ffa48d;
  --s-color-menu-inverse-critical: #f75c64;
  --s-color-menu-inverse-critical-fill: rgba(228, 45, 69, 0.15);
  --s-color-menu-inverse-focus: #ff7559;
  --s-type-label-xs: 400 var(--s-font-size-label-xs)/var(--s-line-height-label-xs) var(--s-font-family-body);
  --s-type-body-xs: 400 var(--s-font-size-body-xs)/var(--s-line-height-body-xs) var(--s-font-family-body);
  --s-type-body-sm: 400 var(--s-font-size-body-sm)/var(--s-line-height-body-sm) var(--s-font-family-body);
  --s-type-body-md: 400 var(--s-font-size-body-md)/var(--s-line-height-body-md) var(--s-font-family-body);
  --s-type-body-lg: 400 var(--s-font-size-body-lg)/var(--s-line-height-body-lg) var(--s-font-family-body);
  --s-type-body-xl: 400 var(--s-font-size-body-xl)/var(--s-line-height-body-xl) var(--s-font-family-body);
  --s-type-heading-lg: 500 var(--s-font-size-heading-lg)/var(--s-line-height-heading-lg) var(--s-font-family-body);
  --s-type-code-label-xs: 400 var(--s-font-size-label-xs)/var(--s-line-height-label-xs) var(--s-font-family-code);
  --s-type-code-body-sm: 400 var(--s-font-size-body-sm)/var(--s-line-height-body-sm) var(--s-font-family-code);
  --s-type-code-body-md: 400 var(--s-font-size-body-md)/var(--s-line-height-body-md) var(--s-font-family-code);
  --s-type-code-body-lg: 400 var(--s-font-size-body-lg)/var(--s-line-height-body-lg) var(--s-font-family-code);
  --s-type-code-heading-xl: 400 var(--s-font-size-heading-xl)/var(--s-line-height-heading-xl) var(--s-font-family-code);
  --s-type-code-amount: 400 var(--s-amount-size)/var(--s-amount-line) var(--s-font-family-code);
  --s-type-code-amount-md: 400 var(--s-amount-size-md)/var(--s-amount-line-md) var(--s-font-family-code);
  --s-type-code-key: 400 var(--s-font-size-body-xl)/var(--s-line-height-body-xl) var(--s-font-family-code);
  --s-type-hero-sm: 400 var(--site-hero-sm-size)/var(--site-hero-sm-line-height) var(--s-font-family-code);
  --s-control-h-sm: 36px;
  --s-control-h-md: 40px;
  --s-control-h-lg: 44px;
  --s-control-h-xl: 44px;
  --s-control-h-xs: 28px;
  --s-control-h-2xs: 24px;
  --s-field-h-xs: 32px;
  --s-field-h-md: 48px;
  --s-field-h-sm: 36px;
  --s-field-max-h: 160px;
  --s-chip-h: 32px;
  --s-seg-h-sm: 28px;
  --s-seg-h-md: 36px;
  --s-badge-h: 20px;
  --s-check-size: 20px;
  --s-switch-w: 40px;
  --s-switch-h: 24px;
  --s-switch-knob: 20px;
  --s-track-pad: 2px;
  --s-swatch-size: 20px;
  --s-dot-size: 8px;
  --s-progress-h: 4px;
  --s-avatar-xs: 20px;
  --s-avatar-sm: 24px;
  --s-avatar-md: 32px;
  --s-avatar-lg: 40px;
  --s-row-h-sm: 36px;
  --s-row-h-md: 40px;
  --s-row-h-lg: 56px;
  --s-thumb-size: 40px;
  --s-msg-action-size: 20px;
  --s-header-h: 80px;
  --s-footer-gutter: 128px;
  --s-appbar-h: 64px;
  --s-tabbar-h: 64px;
  --s-fab-h: 56px;
  --s-sidebar-w: 280px;
  --s-rail-w: 64px;
  --s-drawer-w-menu: 360px;
  --s-drawer-w-panel: 600px;
  --s-drawer-gap: 15px;
  --s-dialog-w: 440px;
  --s-auth-w: 400px;
  --s-panel-w: 420px;
  --s-panel-w-sm: 320px;
  --s-panel-w-xs: 280px;
  --s-toast-w: 420px;
  --s-tooltip-w: 256px;
  --s-menu-min-w: 200px;
  --s-menu-max-w: 320px;
  --s-menu-max-h: 360px;
  --s-search-min-w: 200px;
  --s-search-max-w: 360px;
  --s-bubble-max-w: 360px;
  --s-settings-label-w: 200px;
  --s-sheet-handle-w: 40px;
  --s-sheet-handle-h: 4px;
  --s-composer-radius: 28px;
  --s-amount-size: 56px;
  --s-amount-line: 64px;
  --s-amount-size-md: 32px;
  --s-amount-line-md: 40px;
  --s-amount-fit-min: 0.4;
  --s-amount-rise: 0.32em;
  --s-amount-chip-h: 28px;
  --s-amount-sign-w: 0.6em;
  --s-amount-sign-gap: 0.08em;
  --s-amount-key-h: 56px;
  --s-motion-duration-fade: 150ms;
  --s-rise: 8px;
  --s-pop-scale: 0.95;
  --s-space-10: 10px;
  --s-chat-log-pad: 18px;
  --s-msg-meta-gap: 3px;
  --s-table-pad-y: 10px;
  --s-exp-name-w: 128px;
  --s-underline-offset: 2px;
  --s-nudge-2: 2px;
  --s-glyph-12: 12px;
  --s-glyph-14: 14px;
  --s-glyph-16: 16px;
  --s-glyph-18: 18px;
  --s-glyph-20: 20px;
  --s-glyph-24: 24px;
  --s-glyph-28: 28px;
  --s-glyph-32: 32px;
  --s-btn-pad-x: var(--s-spacing-4);
  --s-btn-pad-y-sm: var(--s-spacing-3);
  --s-btn-pad-y-md: var(--s-spacing-3);
  --s-btn-pad-y-lg: var(--s-spacing-3);
  --s-btn-pad-y-xl: var(--s-spacing-3);
  --s-btn-radius-sm: var(--s-radius-7);
  --s-btn-radius-md: var(--s-radius-8);
  --s-btn-radius-lg: var(--s-radius-9);
  --s-btn-icon-sm: var(--s-glyph-14);
  --s-btn-icon-md: var(--s-glyph-16);
  --s-btn-icon-lg: var(--s-glyph-20);
  --s-btn-icon-xl: var(--s-glyph-24);
  --s-btn-glyph-sm: var(--s-glyph-24);
  --s-btn-glyph-md: var(--s-glyph-28);
  --s-btn-glyph-lg: var(--s-glyph-32);
  --s-row-pad-y: var(--s-spacing-3);
  --s-row-pad-x: var(--s-spacing-4);
  --s-row-gap: var(--s-spacing-4);
  --s-row-radius-sm: var(--s-radius-6);
  --s-row-radius-md: var(--s-radius-7);
  --s-row-radius-lg: var(--s-radius-8);
  --s-row-icon: var(--s-glyph-20);
  --s-label-pad-y: var(--s-spacing-3);
  --s-label-pad-x: var(--s-spacing-4);
  --s-sidebar-pad: var(--s-spacing-4);
  --s-sidebar-gap: var(--s-spacing-7);
  --s-appbar-pad-x: var(--s-spacing-6);
  --s-appbar-pad-x-wide: var(--s-spacing-9);
  --s-logo-size: var(--s-avatar-md);
  --s-field-pad-x: var(--s-spacing-6);
  --s-field-pad-x-sm: var(--s-spacing-5);
  --s-field-icon: var(--s-glyph-20);
  --s-menu-item-h: var(--s-row-h-sm);
  --s-menu-item-pad-y: var(--s-spacing-3);
  --s-menu-item-radius: var(--s-radius-6);
  --s-surface-radius: var(--s-radius-10);
  --s-pop-radius: var(--s-radius-8);
  --s-card-pad: var(--s-spacing-7);
  --s-card-pad-compact: var(--s-spacing-6);
  --s-card-pad-tight: var(--s-spacing-4);
  --s-dialog-pad: var(--s-spacing-7);
  --s-panel-pad: var(--s-spacing-5);
  --s-tooltip-pad: var(--s-spacing-4);
  --s-tip-pad-y: var(--s-spacing-3);
  --s-tip-pad-x: var(--s-spacing-4);
  --s-toast-pad-y: var(--s-spacing-4);
  --s-toast-pad-x: var(--s-spacing-5);
  --s-table-pad-x: var(--s-spacing-5);
  --s-table-pad-y-dense: var(--s-spacing-3);
  --s-input-touch-size: 16px;
  --s-motion-hover-duration: var(--s-motion-duration-fast);
  --s-motion-hover-easing: var(--s-motion-easing-standard);
  --s-motion-hover: var(--s-motion-hover-duration) var(--s-motion-hover-easing);
  --s-motion-reveal-duration: var(--s-motion-duration-fast);
  --s-motion-reveal-easing: var(--s-motion-easing-standard);
  --s-motion-reveal: var(--s-motion-reveal-duration) var(--s-motion-reveal-easing);
  --s-motion-tooltip-duration: var(--s-motion-duration-fast);
  --s-motion-tooltip-easing: var(--s-motion-easing-standard);
  --s-motion-tooltip: var(--s-motion-tooltip-duration) var(--s-motion-tooltip-easing);
  --s-motion-popover-duration: var(--s-motion-duration-fast);
  --s-motion-popover-easing: var(--s-motion-easing-standard);
  --s-motion-popover-easing-out: var(--s-motion-easing-exit);
  --s-motion-popover: var(--s-motion-popover-duration) var(--s-motion-popover-easing);
  --s-motion-popover-out: var(--s-motion-popover-duration) var(--s-motion-popover-easing-out);
  --s-motion-dialog-duration: var(--s-motion-duration-fast);
  --s-motion-dialog-easing: var(--s-motion-easing-standard);
  --s-motion-dialog-easing-out: var(--s-motion-easing-exit);
  --s-motion-dialog: var(--s-motion-dialog-duration) var(--s-motion-dialog-easing);
  --s-motion-dialog-out: var(--s-motion-dialog-duration) var(--s-motion-dialog-easing-out);
  --s-motion-toast-duration: var(--s-motion-duration-fast);
  --s-motion-toast-easing: var(--s-motion-easing-standard);
  --s-motion-toast-easing-out: var(--s-motion-easing-exit);
  --s-motion-toast: var(--s-motion-toast-duration) var(--s-motion-toast-easing);
  --s-motion-toast-out: var(--s-motion-toast-duration) var(--s-motion-toast-easing-out);
  --s-motion-arrival-duration: var(--s-motion-duration-fast);
  --s-motion-arrival-easing: var(--s-motion-easing-standard);
  --s-motion-arrival: var(--s-motion-arrival-duration) var(--s-motion-arrival-easing);
  --s-motion-drawer-duration: var(--s-motion-duration-slow);
  --s-motion-drawer-easing: var(--s-motion-easing-standard);
  --s-motion-drawer-easing-out: var(--s-motion-easing-standard);
  --s-motion-drawer: var(--s-motion-drawer-duration) var(--s-motion-drawer-easing);
  --s-motion-drawer-out: var(--s-motion-drawer-duration) var(--s-motion-drawer-easing-out);
  --s-motion-backdrop-duration: var(--s-motion-duration-slow);
  --s-motion-backdrop-easing: var(--s-motion-easing-standard);
  --s-motion-backdrop-easing-out: var(--s-motion-easing-standard);
  --s-motion-backdrop: var(--s-motion-backdrop-duration) var(--s-motion-backdrop-easing);
  --s-motion-backdrop-out: var(--s-motion-backdrop-duration) var(--s-motion-backdrop-easing-out);
  --s-motion-expand-duration: var(--s-motion-duration-base);
  --s-motion-expand-easing: var(--s-motion-easing-standard);
  --s-motion-expand: var(--s-motion-expand-duration) var(--s-motion-expand-easing);
  --s-motion-theme-duration: var(--s-motion-duration-slow);
  --s-motion-theme-easing: var(--s-motion-easing-standard);
  --s-motion-theme: var(--s-motion-theme-duration) var(--s-motion-theme-easing);
  --s-motion-expressive-easing: var(--s-motion-easing-entrance);
}

/* --- DARK (explicit switch; also works scoped on any element) --- */
[data-mode="dark"],
[data-theme="dark"] {
  color-scheme: dark;
  --s-color-background: #0f0e0c;
  --s-color-surface-primary: #181715;
  --s-color-surface-primary-variant: #0f0e0c;
  --s-color-surface-secondary: #22221f;
  --s-color-surface-secondary-variant: #181715;
  --s-color-surface-tertiary: #32322f;
  --s-color-surface-tertiary-variant: #22221f;
  --s-color-surface-inverse: #f7f7f4;
  --s-color-surface-elevated: #3b3a38;
  --s-color-surface-overlay: #3b3a38;
  --s-color-surface-fixed: #ffffff;
  --s-color-surface-brand: rgba(245, 54, 6, 0.15);
  --s-color-surface-critical: rgba(228, 45, 69, 0.15);
  --s-color-surface-success: rgba(0, 154, 68, 0.15);
  --s-color-surface-warning: rgba(180, 110, 0, 0.15);
  --s-color-surface-info: rgba(0, 124, 223, 0.15);
  --s-color-surface-brand-flat: #380000;
  --s-color-surface-critical-flat: #280205;
  --s-color-surface-success-flat: #011706;
  --s-color-surface-warning-flat: #231200;
  --s-color-surface-info-flat: #00112d;
  --s-color-surface-skeleton: #22221f;
  --s-color-surface-skeleton-highlight: #32322f;
  --s-color-fill-primary: #181715;
  --s-color-fill-primary-hover: #22221f;
  --s-color-fill-primary-active: #32322f;
  --s-color-fill-primary-disabled: rgba(24, 23, 21, 0.5);
  --s-color-fill-primary-variant: #0f0e0c;
  --s-color-fill-primary-variant-hover: #181715;
  --s-color-fill-primary-variant-active: #22221f;
  --s-color-fill-primary-variant-disabled: rgba(15, 14, 12, 0.5);
  --s-color-fill-secondary: #22221f;
  --s-color-fill-secondary-hover: #32322f;
  --s-color-fill-secondary-active: #444441;
  --s-color-fill-secondary-disabled: rgba(34, 34, 31, 0.5);
  --s-color-fill-secondary-variant: #181715;
  --s-color-fill-secondary-variant-hover: #22221f;
  --s-color-fill-secondary-variant-active: #32322f;
  --s-color-fill-secondary-variant-disabled: rgba(24, 23, 21, 0.5);
  --s-color-fill-tertiary: #32322f;
  --s-color-fill-tertiary-hover: #444441;
  --s-color-fill-tertiary-active: #605f5c;
  --s-color-fill-tertiary-disabled: rgba(50, 50, 47, 0.5);
  --s-color-fill-tertiary-variant: #22221f;
  --s-color-fill-tertiary-variant-hover: #32322f;
  --s-color-fill-tertiary-variant-active: #444441;
  --s-color-fill-tertiary-variant-disabled: rgba(34, 34, 31, 0.5);
  --s-color-fill-inverse: #f7f7f4;
  --s-color-fill-inverse-hover: #ecebe8;
  --s-color-fill-inverse-active: #dddcd9;
  --s-color-fill-inverse-disabled: rgba(247, 247, 244, 0.5);
  --s-color-fill-elevated: #3b3a38;
  --s-color-fill-elevated-hover: #444441;
  --s-color-fill-elevated-active: #605f5c;
  --s-color-fill-elevated-disabled: rgba(59, 58, 56, 0.5);
  --s-color-fill-fixed: #ffffff;
  --s-color-fill-fixed-disabled: rgba(255, 255, 255, 0.5);
  --s-color-fill-brand: #c31800;
  --s-color-fill-brand-hover: #a70d00;
  --s-color-fill-brand-active: #810300;
  --s-color-fill-brand-disabled: rgba(195, 24, 0, 0.5);
  --s-color-fill-brand-secondary: rgba(245, 54, 6, 0.15);
  --s-color-fill-brand-secondary-hover: rgba(245, 54, 6, 0.3);
  --s-color-fill-brand-secondary-active: rgba(255, 117, 89, 0.3);
  --s-color-fill-brand-secondary-disabled: rgba(245, 54, 6, 0.08);
  --s-color-fill-success: #007f34;
  --s-color-fill-success-hover: #006429;
  --s-color-fill-success-active: #004b1d;
  --s-color-fill-success-disabled: rgba(0, 127, 52, 0.5);
  --s-color-fill-warning: #e19005;
  --s-color-fill-warning-hover: #fcaa38;
  --s-color-fill-warning-active: #ffc16c;
  --s-color-fill-warning-disabled: rgba(225, 144, 5, 0.5);
  --s-color-fill-critical: #ba0b2f;
  --s-color-fill-critical-hover: #9c0325;
  --s-color-fill-critical-active: #75061b;
  --s-color-fill-critical-disabled: rgba(186, 11, 47, 0.5);
  --s-color-fill-info: #0062c6;
  --s-color-fill-info-hover: #0051ad;
  --s-color-fill-info-active: #003c82;
  --s-color-fill-info-disabled: rgba(0, 98, 198, 0.5);
  --s-color-fill-success-secondary: rgba(0, 154, 68, 0.15);
  --s-color-fill-success-secondary-hover: rgba(0, 154, 68, 0.3);
  --s-color-fill-success-secondary-active: rgba(77, 184, 105, 0.3);
  --s-color-fill-success-secondary-disabled: rgba(0, 154, 68, 0.08);
  --s-color-fill-warning-secondary: rgba(225, 144, 5, 0.15);
  --s-color-fill-warning-secondary-hover: rgba(225, 144, 5, 0.3);
  --s-color-fill-warning-secondary-active: rgba(252, 170, 56, 0.3);
  --s-color-fill-warning-secondary-disabled: rgba(225, 144, 5, 0.08);
  --s-color-fill-critical-secondary: rgba(228, 45, 69, 0.15);
  --s-color-fill-critical-secondary-hover: rgba(228, 45, 69, 0.3);
  --s-color-fill-critical-secondary-active: rgba(247, 92, 100, 0.3);
  --s-color-fill-critical-secondary-disabled: rgba(228, 45, 69, 0.08);
  --s-color-fill-info-secondary: rgba(0, 124, 223, 0.15);
  --s-color-fill-info-secondary-hover: rgba(0, 124, 223, 0.3);
  --s-color-fill-info-secondary-active: rgba(75, 163, 247, 0.3);
  --s-color-fill-info-secondary-disabled: rgba(0, 124, 223, 0.08);
  --s-color-fill-selected: rgba(245, 54, 6, 0.15);
  --s-color-fill-selected-hover: rgba(245, 54, 6, 0.3);
  --s-color-fill-selected-active: rgba(255, 117, 89, 0.3);
  --s-color-fill-selected-disabled: rgba(245, 54, 6, 0.08);
  --s-color-fill-text-selection: rgba(245, 54, 6, 0.3);
  --s-color-fill-dropzone: rgba(245, 54, 6, 0.15);
  --s-color-fill-dropzone-active: rgba(245, 54, 6, 0.3);
  --s-color-border-primary: #272624;
  --s-color-border-primary-hover: #32322f;
  --s-color-border-primary-disabled: rgba(39, 38, 36, 0.5);
  --s-color-border-secondary: #32322f;
  --s-color-border-secondary-hover: #444441;
  --s-color-border-secondary-disabled: rgba(50, 50, 47, 0.5);
  --s-color-border-tertiary: #444441;
  --s-color-border-tertiary-hover: #605f5c;
  --s-color-border-tertiary-disabled: rgba(68, 68, 65, 0.5);
  --s-color-border-inverse: #f7f7f4;
  --s-color-border-inverse-hover: #ecebe8;
  --s-color-border-inverse-disabled: rgba(247, 247, 244, 0.5);
  --s-color-border-elevated: #4b4a48;
  --s-color-border-elevated-hover: #605f5c;
  --s-color-border-elevated-disabled: rgba(75, 74, 72, 0.5);
  --s-color-border-brand: #f53606;
  --s-color-border-brand-hover: #ff7559;
  --s-color-border-brand-disabled: rgba(245, 54, 6, 0.5);
  --s-color-border-brand-secondary: rgba(245, 54, 6, 0.15);
  --s-color-border-brand-secondary-hover: rgba(245, 54, 6, 0.3);
  --s-color-border-brand-secondary-active: rgba(255, 117, 89, 0.3);
  --s-color-border-brand-secondary-disabled: rgba(245, 54, 6, 0.08);
  --s-color-border-selected: #ff7559;
  --s-color-border-success: #009a44;
  --s-color-border-success-hover: #4db869;
  --s-color-border-success-disabled: rgba(0, 154, 68, 0.5);
  --s-color-border-warning: #e19005;
  --s-color-border-warning-hover: #fcaa38;
  --s-color-border-warning-disabled: rgba(225, 144, 5, 0.5);
  --s-color-border-critical: #e42d45;
  --s-color-border-critical-hover: #f75c64;
  --s-color-border-critical-disabled: rgba(228, 45, 69, 0.5);
  --s-color-border-info: #007cdf;
  --s-color-border-info-hover: #4ba3f7;
  --s-color-border-info-disabled: rgba(0, 124, 223, 0.5);
  --s-color-border-dropzone: rgba(245, 54, 6, 0.3);
  --s-color-border-primary-active: #444441;
  --s-color-border-secondary-active: #605f5c;
  --s-color-border-brand-active: #ffa48d;
  --s-color-border-critical-active: #ffa1a0;
  --s-color-border-success-active: #8fd89e;
  --s-color-border-warning-active: #ffc16c;
  --s-color-border-info-active: #8ccaff;
  --s-color-border-focus: #ff7559;
  --s-color-border-focus-inverse: #0f0e0c;
  --s-color-content-primary: #f7f7f4;
  --s-color-content-secondary: #b8b7b4;
  --s-color-content-tertiary: rgba(247, 247, 244, 0.5);
  --s-color-content-primary-disabled: rgba(247, 247, 244, 0.3);
  --s-color-content-secondary-disabled: rgba(184, 183, 180, 0.3);
  --s-color-content-tertiary-disabled: rgba(247, 247, 244, 0.15);
  --s-color-content-primary-inverse: #0f0e0c;
  --s-color-content-primary-inverse-disabled: rgba(15, 14, 12, 0.5);
  --s-color-content-secondary-inverse: #605f5c;
  --s-color-content-secondary-inverse-disabled: rgba(96, 95, 92, 0.5);
  --s-color-content-fixed: #0f0e0c;
  --s-color-content-fixed-disabled: rgba(15, 14, 12, 0.5);
  --s-color-content-fixed-inverse: #ffffff;
  --s-color-content-fixed-inverse-disabled: rgba(255, 255, 255, 0.5);
  --s-color-content-on-brand: #ffffff;
  --s-color-content-on-brand-disabled: rgba(255, 255, 255, 0.5);
  --s-color-content-on-critical: #ffffff;
  --s-color-content-on-critical-disabled: rgba(255, 255, 255, 0.5);
  --s-color-content-on-success: #ffffff;
  --s-color-content-on-success-disabled: rgba(255, 255, 255, 0.5);
  --s-color-content-on-warning: #0f0e0c;
  --s-color-content-on-warning-disabled: rgba(15, 14, 12, 0.5);
  --s-color-content-on-info: #ffffff;
  --s-color-content-on-info-disabled: rgba(255, 255, 255, 0.5);
  --s-color-content-link: #ffa48d;
  --s-color-content-link-hover: #ffcdc0;
  --s-color-content-link-visited: #ff7559;
  --s-color-content-placeholder: rgba(247, 247, 244, 0.5);
  --s-color-content-selected: #ffa48d;
  --s-color-content-brand: #ffa48d;
  --s-color-content-brand-hover: #ffcdc0;
  --s-color-content-brand-active: #ffebe4;
  --s-color-content-brand-disabled: rgba(255, 164, 141, 0.5);
  --s-color-content-critical: #f75c64;
  --s-color-content-critical-hover: #ffa1a0;
  --s-color-content-critical-active: #ffccca;
  --s-color-content-critical-disabled: rgba(247, 92, 100, 0.5);
  --s-color-content-success: #4db869;
  --s-color-content-success-hover: #8fd89e;
  --s-color-content-success-active: #beecc6;
  --s-color-content-success-disabled: rgba(77, 184, 105, 0.5);
  --s-color-content-warning: #fcaa38;
  --s-color-content-warning-hover: #ffc16c;
  --s-color-content-warning-active: #ffdcab;
  --s-color-content-warning-disabled: rgba(252, 170, 56, 0.5);
  --s-color-content-info: #4ba3f7;
  --s-color-content-info-hover: #8ccaff;
  --s-color-content-info-active: #c1e2ff;
  --s-color-content-info-disabled: rgba(75, 163, 247, 0.5);
  --s-color-content-brand-inverse: #a70d00;
  --s-color-content-critical-inverse: #9c0325;
  --s-color-content-success-inverse: #006429;
  --s-color-content-warning-inverse: #8c5500;
  --s-color-content-info-inverse: #0051ad;
  --s-elevation-overlay-dimness: rgba(0, 0, 0, 0.6);
  --s-elevation-overlay-blur: 4px;
  --s-elevation-drop-shadow-x-small: rgba(0, 0, 0, 0.2);
  --s-elevation-drop-shadow-small: rgba(0, 0, 0, 0.28);
  --s-elevation-drop-shadow-medium: rgba(0, 0, 0, 0.38);
  --s-elevation-drop-shadow-large: rgba(0, 0, 0, 0.5);
  --s-elevation-sm: 0 1px 2px rgba(0, 0, 0, 0.28), 0 1px 3px rgba(0, 0, 0, 0.28);
  --s-elevation-md: 0 2px 6px rgba(0, 0, 0, 0.38), 0 4px 12px rgba(0, 0, 0, 0.38);
  --s-elevation-lg: 0 8px 24px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.5);
  --s-bg: var(--s-color-background);
  --s-canvas: var(--s-color-fill-primary-disabled);
  --s-surface: var(--s-color-surface-elevated);
  --s-surface-muted: var(--s-color-fill-secondary);
  --s-ink: var(--s-color-content-primary);
  --s-muted: var(--s-color-content-secondary);
  --s-faint: var(--s-color-content-tertiary);
  --s-line: var(--s-color-border-primary);
  --s-accent: var(--s-color-content-brand);
  --s-accent-fill: var(--s-color-fill-brand);
  --s-accent-tint: var(--s-color-fill-brand-secondary);
  --s-focus: var(--s-color-border-focus);
  --s-success: var(--s-color-content-success);
  --s-warning: var(--s-color-content-warning);
  --s-error: var(--s-color-content-critical);
  --s-color-scrim: color-mix(in srgb, var(--s-color-content-primary) 30%, transparent);
  --s-color-data-1: var(--s-color-content-primary);
  --s-color-data-6: var(--s-color-content-secondary);
  --s-color-data-muted: var(--s-color-content-tertiary);
  --s-color-data-highlight: var(--s-color-fill-brand);
  --s-color-data-baseline: var(--s-color-border-primary);
  --s-color-fill-raised-secondary: #444441;
  --s-color-fill-raised-secondary-hover: #4b4a48;
  --s-color-fill-raised-secondary-active: #605f5c;
  --s-color-fill-raised-secondary-disabled: rgba(68, 68, 65, 0.5);
  --s-color-fill-raised-tertiary: #4b4a48;
  --s-color-fill-raised-tertiary-hover: #605f5c;
  --s-color-fill-raised-tertiary-active: #6c6b68;
  --s-color-fill-raised-tertiary-disabled: rgba(75, 74, 72, 0.5);
  --s-color-fill-raised-ghost-hover: #444441;
  --s-color-fill-raised-ghost-active: #4b4a48;
  --s-type-label-xs: 400 var(--s-font-size-label-xs)/var(--s-line-height-label-xs) var(--s-font-family-body);
  --s-type-body-xs: 400 var(--s-font-size-body-xs)/var(--s-line-height-body-xs) var(--s-font-family-body);
  --s-type-body-sm: 400 var(--s-font-size-body-sm)/var(--s-line-height-body-sm) var(--s-font-family-body);
  --s-type-body-md: 400 var(--s-font-size-body-md)/var(--s-line-height-body-md) var(--s-font-family-body);
  --s-type-body-lg: 400 var(--s-font-size-body-lg)/var(--s-line-height-body-lg) var(--s-font-family-body);
  --s-type-body-xl: 400 var(--s-font-size-body-xl)/var(--s-line-height-body-xl) var(--s-font-family-body);
  --s-type-heading-lg: 500 var(--s-font-size-heading-lg)/var(--s-line-height-heading-lg) var(--s-font-family-body);
  --s-type-code-label-xs: 400 var(--s-font-size-label-xs)/var(--s-line-height-label-xs) var(--s-font-family-code);
  --s-type-code-body-sm: 400 var(--s-font-size-body-sm)/var(--s-line-height-body-sm) var(--s-font-family-code);
  --s-type-code-body-md: 400 var(--s-font-size-body-md)/var(--s-line-height-body-md) var(--s-font-family-code);
  --s-type-code-body-lg: 400 var(--s-font-size-body-lg)/var(--s-line-height-body-lg) var(--s-font-family-code);
  --s-type-code-heading-xl: 400 var(--s-font-size-heading-xl)/var(--s-line-height-heading-xl) var(--s-font-family-code);
  --s-type-code-amount: 400 var(--s-amount-size)/var(--s-amount-line) var(--s-font-family-code);
  --s-type-code-amount-md: 400 var(--s-amount-size-md)/var(--s-amount-line-md) var(--s-font-family-code);
  --s-type-code-key: 400 var(--s-font-size-body-xl)/var(--s-line-height-body-xl) var(--s-font-family-code);
  --s-type-hero-sm: 400 var(--site-hero-sm-size)/var(--site-hero-sm-line-height) var(--s-font-family-code);
  --s-color-data-2: #4ba3f7;
  --s-color-data-3: #4db869;
  --s-color-data-4: #fcaa38;
  --s-color-data-5: #f75c64;
  --s-color-category-1: #6d9ee8;
  --s-color-category-2: #6cc487;
  --s-color-category-3: #e6b84f;
  --s-color-category-4: #b08ae8;
  --s-color-category-5: #b3c25e;
  --s-color-category-6: #4cc4c4;
  --s-color-category-7: #e87bb8;
  --s-color-category-8: #c49467;
}

/* --- DARK (opt-in OS follow: data-mode="system" on <html>) --- */
@media (prefers-color-scheme: dark) {
  [data-mode="system"] {
    color-scheme: dark;
    --s-color-background: #0f0e0c;
    --s-color-surface-primary: #181715;
    --s-color-surface-primary-variant: #0f0e0c;
    --s-color-surface-secondary: #22221f;
    --s-color-surface-secondary-variant: #181715;
    --s-color-surface-tertiary: #32322f;
    --s-color-surface-tertiary-variant: #22221f;
    --s-color-surface-inverse: #f7f7f4;
    --s-color-surface-elevated: #3b3a38;
    --s-color-surface-overlay: #3b3a38;
    --s-color-surface-fixed: #ffffff;
    --s-color-surface-brand: rgba(245, 54, 6, 0.15);
    --s-color-surface-critical: rgba(228, 45, 69, 0.15);
    --s-color-surface-success: rgba(0, 154, 68, 0.15);
    --s-color-surface-warning: rgba(180, 110, 0, 0.15);
    --s-color-surface-info: rgba(0, 124, 223, 0.15);
    --s-color-surface-brand-flat: #380000;
    --s-color-surface-critical-flat: #280205;
    --s-color-surface-success-flat: #011706;
    --s-color-surface-warning-flat: #231200;
    --s-color-surface-info-flat: #00112d;
    --s-color-surface-skeleton: #22221f;
    --s-color-surface-skeleton-highlight: #32322f;
    --s-color-fill-primary: #181715;
    --s-color-fill-primary-hover: #22221f;
    --s-color-fill-primary-active: #32322f;
    --s-color-fill-primary-disabled: rgba(24, 23, 21, 0.5);
    --s-color-fill-primary-variant: #0f0e0c;
    --s-color-fill-primary-variant-hover: #181715;
    --s-color-fill-primary-variant-active: #22221f;
    --s-color-fill-primary-variant-disabled: rgba(15, 14, 12, 0.5);
    --s-color-fill-secondary: #22221f;
    --s-color-fill-secondary-hover: #32322f;
    --s-color-fill-secondary-active: #444441;
    --s-color-fill-secondary-disabled: rgba(34, 34, 31, 0.5);
    --s-color-fill-secondary-variant: #181715;
    --s-color-fill-secondary-variant-hover: #22221f;
    --s-color-fill-secondary-variant-active: #32322f;
    --s-color-fill-secondary-variant-disabled: rgba(24, 23, 21, 0.5);
    --s-color-fill-tertiary: #32322f;
    --s-color-fill-tertiary-hover: #444441;
    --s-color-fill-tertiary-active: #605f5c;
    --s-color-fill-tertiary-disabled: rgba(50, 50, 47, 0.5);
    --s-color-fill-tertiary-variant: #22221f;
    --s-color-fill-tertiary-variant-hover: #32322f;
    --s-color-fill-tertiary-variant-active: #444441;
    --s-color-fill-tertiary-variant-disabled: rgba(34, 34, 31, 0.5);
    --s-color-fill-inverse: #f7f7f4;
    --s-color-fill-inverse-hover: #ecebe8;
    --s-color-fill-inverse-active: #dddcd9;
    --s-color-fill-inverse-disabled: rgba(247, 247, 244, 0.5);
    --s-color-fill-elevated: #3b3a38;
    --s-color-fill-elevated-hover: #444441;
    --s-color-fill-elevated-active: #605f5c;
    --s-color-fill-elevated-disabled: rgba(59, 58, 56, 0.5);
    --s-color-fill-fixed: #ffffff;
    --s-color-fill-fixed-disabled: rgba(255, 255, 255, 0.5);
    --s-color-fill-brand: #c31800;
    --s-color-fill-brand-hover: #a70d00;
    --s-color-fill-brand-active: #810300;
    --s-color-fill-brand-disabled: rgba(195, 24, 0, 0.5);
    --s-color-fill-brand-secondary: rgba(245, 54, 6, 0.15);
    --s-color-fill-brand-secondary-hover: rgba(245, 54, 6, 0.3);
    --s-color-fill-brand-secondary-active: rgba(255, 117, 89, 0.3);
    --s-color-fill-brand-secondary-disabled: rgba(245, 54, 6, 0.08);
    --s-color-fill-success: #007f34;
    --s-color-fill-success-hover: #006429;
    --s-color-fill-success-active: #004b1d;
    --s-color-fill-success-disabled: rgba(0, 127, 52, 0.5);
    --s-color-fill-warning: #e19005;
    --s-color-fill-warning-hover: #fcaa38;
    --s-color-fill-warning-active: #ffc16c;
    --s-color-fill-warning-disabled: rgba(225, 144, 5, 0.5);
    --s-color-fill-critical: #ba0b2f;
    --s-color-fill-critical-hover: #9c0325;
    --s-color-fill-critical-active: #75061b;
    --s-color-fill-critical-disabled: rgba(186, 11, 47, 0.5);
    --s-color-fill-info: #0062c6;
    --s-color-fill-info-hover: #0051ad;
    --s-color-fill-info-active: #003c82;
    --s-color-fill-info-disabled: rgba(0, 98, 198, 0.5);
    --s-color-fill-success-secondary: rgba(0, 154, 68, 0.15);
    --s-color-fill-success-secondary-hover: rgba(0, 154, 68, 0.3);
    --s-color-fill-success-secondary-active: rgba(77, 184, 105, 0.3);
    --s-color-fill-success-secondary-disabled: rgba(0, 154, 68, 0.08);
    --s-color-fill-warning-secondary: rgba(225, 144, 5, 0.15);
    --s-color-fill-warning-secondary-hover: rgba(225, 144, 5, 0.3);
    --s-color-fill-warning-secondary-active: rgba(252, 170, 56, 0.3);
    --s-color-fill-warning-secondary-disabled: rgba(225, 144, 5, 0.08);
    --s-color-fill-critical-secondary: rgba(228, 45, 69, 0.15);
    --s-color-fill-critical-secondary-hover: rgba(228, 45, 69, 0.3);
    --s-color-fill-critical-secondary-active: rgba(247, 92, 100, 0.3);
    --s-color-fill-critical-secondary-disabled: rgba(228, 45, 69, 0.08);
    --s-color-fill-info-secondary: rgba(0, 124, 223, 0.15);
    --s-color-fill-info-secondary-hover: rgba(0, 124, 223, 0.3);
    --s-color-fill-info-secondary-active: rgba(75, 163, 247, 0.3);
    --s-color-fill-info-secondary-disabled: rgba(0, 124, 223, 0.08);
    --s-color-fill-selected: rgba(245, 54, 6, 0.15);
    --s-color-fill-selected-hover: rgba(245, 54, 6, 0.3);
    --s-color-fill-selected-active: rgba(255, 117, 89, 0.3);
    --s-color-fill-selected-disabled: rgba(245, 54, 6, 0.08);
    --s-color-fill-text-selection: rgba(245, 54, 6, 0.3);
    --s-color-fill-dropzone: rgba(245, 54, 6, 0.15);
    --s-color-fill-dropzone-active: rgba(245, 54, 6, 0.3);
    --s-color-border-primary: #272624;
    --s-color-border-primary-hover: #32322f;
    --s-color-border-primary-disabled: rgba(39, 38, 36, 0.5);
    --s-color-border-secondary: #32322f;
    --s-color-border-secondary-hover: #444441;
    --s-color-border-secondary-disabled: rgba(50, 50, 47, 0.5);
    --s-color-border-tertiary: #444441;
    --s-color-border-tertiary-hover: #605f5c;
    --s-color-border-tertiary-disabled: rgba(68, 68, 65, 0.5);
    --s-color-border-inverse: #f7f7f4;
    --s-color-border-inverse-hover: #ecebe8;
    --s-color-border-inverse-disabled: rgba(247, 247, 244, 0.5);
    --s-color-border-elevated: #4b4a48;
    --s-color-border-elevated-hover: #605f5c;
    --s-color-border-elevated-disabled: rgba(75, 74, 72, 0.5);
    --s-color-border-brand: #f53606;
    --s-color-border-brand-hover: #ff7559;
    --s-color-border-brand-disabled: rgba(245, 54, 6, 0.5);
    --s-color-border-brand-secondary: rgba(245, 54, 6, 0.15);
    --s-color-border-brand-secondary-hover: rgba(245, 54, 6, 0.3);
    --s-color-border-brand-secondary-active: rgba(255, 117, 89, 0.3);
    --s-color-border-brand-secondary-disabled: rgba(245, 54, 6, 0.08);
    --s-color-border-selected: #ff7559;
    --s-color-border-success: #009a44;
    --s-color-border-success-hover: #4db869;
    --s-color-border-success-disabled: rgba(0, 154, 68, 0.5);
    --s-color-border-warning: #e19005;
    --s-color-border-warning-hover: #fcaa38;
    --s-color-border-warning-disabled: rgba(225, 144, 5, 0.5);
    --s-color-border-critical: #e42d45;
    --s-color-border-critical-hover: #f75c64;
    --s-color-border-critical-disabled: rgba(228, 45, 69, 0.5);
    --s-color-border-info: #007cdf;
    --s-color-border-info-hover: #4ba3f7;
    --s-color-border-info-disabled: rgba(0, 124, 223, 0.5);
    --s-color-border-dropzone: rgba(245, 54, 6, 0.3);
    --s-color-border-primary-active: #444441;
    --s-color-border-secondary-active: #605f5c;
    --s-color-border-brand-active: #ffa48d;
    --s-color-border-critical-active: #ffa1a0;
    --s-color-border-success-active: #8fd89e;
    --s-color-border-warning-active: #ffc16c;
    --s-color-border-info-active: #8ccaff;
    --s-color-border-focus: #ff7559;
    --s-color-border-focus-inverse: #0f0e0c;
    --s-color-content-primary: #f7f7f4;
    --s-color-content-secondary: #b8b7b4;
    --s-color-content-tertiary: rgba(247, 247, 244, 0.5);
    --s-color-content-primary-disabled: rgba(247, 247, 244, 0.3);
    --s-color-content-secondary-disabled: rgba(184, 183, 180, 0.3);
    --s-color-content-tertiary-disabled: rgba(247, 247, 244, 0.15);
    --s-color-content-primary-inverse: #0f0e0c;
    --s-color-content-primary-inverse-disabled: rgba(15, 14, 12, 0.5);
    --s-color-content-secondary-inverse: #605f5c;
    --s-color-content-secondary-inverse-disabled: rgba(96, 95, 92, 0.5);
    --s-color-content-fixed: #0f0e0c;
    --s-color-content-fixed-disabled: rgba(15, 14, 12, 0.5);
    --s-color-content-fixed-inverse: #ffffff;
    --s-color-content-fixed-inverse-disabled: rgba(255, 255, 255, 0.5);
    --s-color-content-on-brand: #ffffff;
    --s-color-content-on-brand-disabled: rgba(255, 255, 255, 0.5);
    --s-color-content-on-critical: #ffffff;
    --s-color-content-on-critical-disabled: rgba(255, 255, 255, 0.5);
    --s-color-content-on-success: #ffffff;
    --s-color-content-on-success-disabled: rgba(255, 255, 255, 0.5);
    --s-color-content-on-warning: #0f0e0c;
    --s-color-content-on-warning-disabled: rgba(15, 14, 12, 0.5);
    --s-color-content-on-info: #ffffff;
    --s-color-content-on-info-disabled: rgba(255, 255, 255, 0.5);
    --s-color-content-link: #ffa48d;
    --s-color-content-link-hover: #ffcdc0;
    --s-color-content-link-visited: #ff7559;
    --s-color-content-placeholder: rgba(247, 247, 244, 0.5);
    --s-color-content-selected: #ffa48d;
    --s-color-content-brand: #ffa48d;
    --s-color-content-brand-hover: #ffcdc0;
    --s-color-content-brand-active: #ffebe4;
    --s-color-content-brand-disabled: rgba(255, 164, 141, 0.5);
    --s-color-content-critical: #f75c64;
    --s-color-content-critical-hover: #ffa1a0;
    --s-color-content-critical-active: #ffccca;
    --s-color-content-critical-disabled: rgba(247, 92, 100, 0.5);
    --s-color-content-success: #4db869;
    --s-color-content-success-hover: #8fd89e;
    --s-color-content-success-active: #beecc6;
    --s-color-content-success-disabled: rgba(77, 184, 105, 0.5);
    --s-color-content-warning: #fcaa38;
    --s-color-content-warning-hover: #ffc16c;
    --s-color-content-warning-active: #ffdcab;
    --s-color-content-warning-disabled: rgba(252, 170, 56, 0.5);
    --s-color-content-info: #4ba3f7;
    --s-color-content-info-hover: #8ccaff;
    --s-color-content-info-active: #c1e2ff;
    --s-color-content-info-disabled: rgba(75, 163, 247, 0.5);
    --s-color-content-brand-inverse: #a70d00;
    --s-color-content-critical-inverse: #9c0325;
    --s-color-content-success-inverse: #006429;
    --s-color-content-warning-inverse: #8c5500;
    --s-color-content-info-inverse: #0051ad;
    --s-elevation-overlay-dimness: rgba(0, 0, 0, 0.6);
    --s-elevation-overlay-blur: 4px;
    --s-elevation-drop-shadow-x-small: rgba(0, 0, 0, 0.2);
    --s-elevation-drop-shadow-small: rgba(0, 0, 0, 0.28);
    --s-elevation-drop-shadow-medium: rgba(0, 0, 0, 0.38);
    --s-elevation-drop-shadow-large: rgba(0, 0, 0, 0.5);
    --s-elevation-sm: 0 1px 2px rgba(0, 0, 0, 0.28), 0 1px 3px rgba(0, 0, 0, 0.28);
    --s-elevation-md: 0 2px 6px rgba(0, 0, 0, 0.38), 0 4px 12px rgba(0, 0, 0, 0.38);
    --s-elevation-lg: 0 8px 24px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.5);
    --s-bg: var(--s-color-background);
    --s-canvas: var(--s-color-fill-primary-disabled);
    --s-surface: var(--s-color-surface-elevated);
    --s-surface-muted: var(--s-color-fill-secondary);
    --s-ink: var(--s-color-content-primary);
    --s-muted: var(--s-color-content-secondary);
    --s-faint: var(--s-color-content-tertiary);
    --s-line: var(--s-color-border-primary);
    --s-accent: var(--s-color-content-brand);
    --s-accent-fill: var(--s-color-fill-brand);
    --s-accent-tint: var(--s-color-fill-brand-secondary);
    --s-focus: var(--s-color-border-focus);
    --s-success: var(--s-color-content-success);
    --s-warning: var(--s-color-content-warning);
    --s-error: var(--s-color-content-critical);
    --s-color-scrim: color-mix(in srgb, var(--s-color-content-primary) 30%, transparent);
    --s-color-data-1: var(--s-color-content-primary);
    --s-color-data-6: var(--s-color-content-secondary);
    --s-color-data-muted: var(--s-color-content-tertiary);
    --s-color-data-highlight: var(--s-color-fill-brand);
    --s-color-data-baseline: var(--s-color-border-primary);
    --s-color-fill-raised-secondary: #444441;
    --s-color-fill-raised-secondary-hover: #4b4a48;
    --s-color-fill-raised-secondary-active: #605f5c;
    --s-color-fill-raised-secondary-disabled: rgba(68, 68, 65, 0.5);
    --s-color-fill-raised-tertiary: #4b4a48;
    --s-color-fill-raised-tertiary-hover: #605f5c;
    --s-color-fill-raised-tertiary-active: #6c6b68;
    --s-color-fill-raised-tertiary-disabled: rgba(75, 74, 72, 0.5);
    --s-color-fill-raised-ghost-hover: #444441;
    --s-color-fill-raised-ghost-active: #4b4a48;
    --s-type-label-xs: 400 var(--s-font-size-label-xs)/var(--s-line-height-label-xs) var(--s-font-family-body);
    --s-type-body-xs: 400 var(--s-font-size-body-xs)/var(--s-line-height-body-xs) var(--s-font-family-body);
    --s-type-body-sm: 400 var(--s-font-size-body-sm)/var(--s-line-height-body-sm) var(--s-font-family-body);
    --s-type-body-md: 400 var(--s-font-size-body-md)/var(--s-line-height-body-md) var(--s-font-family-body);
    --s-type-body-lg: 400 var(--s-font-size-body-lg)/var(--s-line-height-body-lg) var(--s-font-family-body);
    --s-type-body-xl: 400 var(--s-font-size-body-xl)/var(--s-line-height-body-xl) var(--s-font-family-body);
    --s-type-heading-lg: 500 var(--s-font-size-heading-lg)/var(--s-line-height-heading-lg) var(--s-font-family-body);
    --s-type-code-label-xs: 400 var(--s-font-size-label-xs)/var(--s-line-height-label-xs) var(--s-font-family-code);
    --s-type-code-body-sm: 400 var(--s-font-size-body-sm)/var(--s-line-height-body-sm) var(--s-font-family-code);
    --s-type-code-body-md: 400 var(--s-font-size-body-md)/var(--s-line-height-body-md) var(--s-font-family-code);
    --s-type-code-body-lg: 400 var(--s-font-size-body-lg)/var(--s-line-height-body-lg) var(--s-font-family-code);
    --s-type-code-heading-xl: 400 var(--s-font-size-heading-xl)/var(--s-line-height-heading-xl) var(--s-font-family-code);
    --s-type-code-amount: 400 var(--s-amount-size)/var(--s-amount-line) var(--s-font-family-code);
    --s-type-code-amount-md: 400 var(--s-amount-size-md)/var(--s-amount-line-md) var(--s-font-family-code);
    --s-type-code-key: 400 var(--s-font-size-body-xl)/var(--s-line-height-body-xl) var(--s-font-family-code);
    --s-type-hero-sm: 400 var(--site-hero-sm-size)/var(--site-hero-sm-line-height) var(--s-font-family-code);
    --s-color-data-2: #4ba3f7;
    --s-color-data-3: #4db869;
    --s-color-data-4: #fcaa38;
    --s-color-data-5: #f75c64;
    --s-color-category-1: #6d9ee8;
    --s-color-category-2: #6cc487;
    --s-color-category-3: #e6b84f;
    --s-color-category-4: #b08ae8;
    --s-color-category-5: #b3c25e;
    --s-color-category-6: #4cc4c4;
    --s-color-category-7: #e87bb8;
    --s-color-category-8: #c49467;
  }
}

/* --- APP SCALE (v2.6): data-scale="app" on <html> or any element; data-scale="site" restores the
   website scale in a subtree. After the dark blocks so the two attributes combine on one element. --- */
[data-scale="app"] {
  --s-font-size-body-xl: 18px;
  --s-line-height-body-xl: 1.333;
  --s-font-size-body-lg: 16px;
  --s-line-height-body-lg: 1.5;
  --s-font-size-body-md: 14px;
  --s-line-height-body-md: 1.429;
  --s-font-size-body-sm: 13px;
  --s-line-height-body-sm: 1.385;
  --s-font-size-heading-xl: 24px;
  --s-line-height-heading-xl: 1.333;
  --s-font-size-heading-lg: 20px;
  --s-line-height-heading-lg: 1.4;
  --site-font-size-hero: clamp(24px, calc(24px + 8 * (100vw - 360px) / 1080), 32px);
  --site-hero-sm-size: 24px;
  --site-hero-sm-line-height: 32px;
  --site-hero-lg-size: 32px;
  --site-hero-lg-line-height: 40px;
  --s-control-h-sm: 28px;
  --s-control-h-md: 32px;
  --s-control-h-lg: 36px;
  --s-control-h-xl: 40px;
  --s-field-h-md: 36px;
  --s-field-h-sm: 32px;
  --s-chip-h: 28px;
  --s-seg-h-sm: 24px;
  --s-seg-h-md: 28px;
  --s-btn-pad-x: 8px;
  --s-btn-pad-y-sm: 5px;
  --s-btn-pad-y-md: 6px;
  --s-btn-pad-y-lg: 6px;
  --s-btn-pad-y-xl: 8px;
  --s-btn-radius-sm: 10px;
  --s-btn-radius-md: 12px;
  --s-btn-radius-lg: 14px;
  --s-btn-icon-sm: 14px;
  --s-btn-icon-md: 16px;
  --s-btn-icon-lg: 16px;
  --s-btn-icon-xl: 20px;
  --s-btn-glyph-sm: 18px;
  --s-btn-glyph-md: 20px;
  --s-btn-glyph-lg: 24px;
  --s-field-pad-x: 12px;
  --s-field-pad-x-sm: 12px;
  --s-field-icon: 16px;
  --s-row-h-sm: 28px;
  --s-row-h-md: 32px;
  --s-row-h-lg: 44px;
  --s-row-pad-y: 6px;
  --s-row-pad-x: 8px;
  --s-row-gap: 8px;
  --s-row-radius-sm: 8px;
  --s-row-radius-md: 10px;
  --s-row-radius-lg: 12px;
  --s-row-icon: 16px;
  --s-thumb-size: 32px;
  --s-label-pad-y: 6px;
  --s-label-pad-x: 8px;
  --s-sidebar-w: 256px;
  --s-sidebar-pad: 8px;
  --s-sidebar-gap: 16px;
  --s-appbar-h: 48px;
  --s-appbar-pad-x: 12px;
  --s-appbar-pad-x-wide: 16px;
  --s-logo-size: 24px;
  --s-menu-item-h: 32px;
  --s-menu-item-pad-y: 6px;
  --s-menu-item-radius: 8px;
  --s-surface-radius: 16px;
  --s-pop-radius: 12px;
  --s-card-pad: 16px;
  --s-card-pad-compact: 12px;
  --s-card-pad-tight: 8px;
  --s-dialog-pad: 20px;
  --s-dialog-w: 400px;
  --s-panel-pad: 12px;
  --s-panel-w: 360px;
  --s-tooltip-pad: 8px;
  --s-tip-pad-y: 4px;
  --s-tip-pad-x: 8px;
  --s-toast-pad-y: 8px;
  --s-toast-pad-x: 12px;
  --s-table-pad-y: 6px;
  --s-table-pad-x: 12px;
  --s-table-pad-y-dense: 4px;
  --s-type-body-sm: 400 var(--s-font-size-body-sm)/var(--s-line-height-body-sm) var(--s-font-family-body);
  --s-type-body-md: 400 var(--s-font-size-body-md)/var(--s-line-height-body-md) var(--s-font-family-body);
  --s-type-body-lg: 400 var(--s-font-size-body-lg)/var(--s-line-height-body-lg) var(--s-font-family-body);
  --s-type-body-xl: 400 var(--s-font-size-body-xl)/var(--s-line-height-body-xl) var(--s-font-family-body);
  --s-type-heading-lg: 500 var(--s-font-size-heading-lg)/var(--s-line-height-heading-lg) var(--s-font-family-body);
  --s-type-code-body-sm: 400 var(--s-font-size-body-sm)/var(--s-line-height-body-sm) var(--s-font-family-code);
  --s-type-code-body-md: 400 var(--s-font-size-body-md)/var(--s-line-height-body-md) var(--s-font-family-code);
  --s-type-code-body-lg: 400 var(--s-font-size-body-lg)/var(--s-line-height-body-lg) var(--s-font-family-code);
  --s-type-code-heading-xl: 400 var(--s-font-size-heading-xl)/var(--s-line-height-heading-xl) var(--s-font-family-code);
  --s-type-code-key: 400 var(--s-font-size-body-xl)/var(--s-line-height-body-xl) var(--s-font-family-code);
  --s-type-hero-sm: 400 var(--site-hero-sm-size)/var(--site-hero-sm-line-height) var(--s-font-family-code);
}

[data-scale="site"] {
  --s-font-size-body-xl: 20px;
  --s-line-height-body-xl: 1.4;
  --s-font-size-body-lg: 18px;
  --s-line-height-body-lg: 1.556;
  --s-font-size-body-md: 16px;
  --s-line-height-body-md: 1.5;
  --s-font-size-body-sm: 14px;
  --s-line-height-body-sm: 1.429;
  --s-font-size-heading-xl: clamp(26px, calc(26px + (36 - 26) * (100vw - 360px) / 880), 36px);
  --s-line-height-heading-xl: 1.222;
  --s-font-size-heading-lg: clamp(24px, calc(24px + (32 - 24) * (100vw - 360px) / 880), 32px);
  --s-line-height-heading-lg: 1.25;
  --site-font-size-hero: clamp(32px, calc(32px + 24 * (100vw - 360px) / 1080), 56px);
  --site-hero-sm-size: 32px;
  --site-hero-sm-line-height: 40px;
  --site-hero-lg-size: 48px;
  --site-hero-lg-line-height: 56px;
  --s-control-h-sm: 36px;
  --s-control-h-md: 40px;
  --s-control-h-lg: 44px;
  --s-control-h-xl: 44px;
  --s-field-h-md: 48px;
  --s-field-h-sm: 36px;
  --s-chip-h: 32px;
  --s-seg-h-sm: 28px;
  --s-seg-h-md: 36px;
  --s-btn-pad-x: var(--s-spacing-4);
  --s-btn-pad-y-sm: var(--s-spacing-3);
  --s-btn-pad-y-md: var(--s-spacing-3);
  --s-btn-pad-y-lg: var(--s-spacing-3);
  --s-btn-pad-y-xl: var(--s-spacing-3);
  --s-btn-radius-sm: var(--s-radius-7);
  --s-btn-radius-md: var(--s-radius-8);
  --s-btn-radius-lg: var(--s-radius-9);
  --s-btn-icon-sm: var(--s-glyph-14);
  --s-btn-icon-md: var(--s-glyph-16);
  --s-btn-icon-lg: var(--s-glyph-20);
  --s-btn-icon-xl: var(--s-glyph-24);
  --s-btn-glyph-sm: var(--s-glyph-24);
  --s-btn-glyph-md: var(--s-glyph-28);
  --s-btn-glyph-lg: var(--s-glyph-32);
  --s-field-pad-x: var(--s-spacing-6);
  --s-field-pad-x-sm: var(--s-spacing-5);
  --s-field-icon: var(--s-glyph-20);
  --s-row-h-sm: 36px;
  --s-row-h-md: 40px;
  --s-row-h-lg: 56px;
  --s-row-pad-y: var(--s-spacing-3);
  --s-row-pad-x: var(--s-spacing-4);
  --s-row-gap: var(--s-spacing-4);
  --s-row-radius-sm: var(--s-radius-6);
  --s-row-radius-md: var(--s-radius-7);
  --s-row-radius-lg: var(--s-radius-8);
  --s-row-icon: var(--s-glyph-20);
  --s-thumb-size: 40px;
  --s-label-pad-y: var(--s-spacing-3);
  --s-label-pad-x: var(--s-spacing-4);
  --s-sidebar-w: 280px;
  --s-sidebar-pad: var(--s-spacing-4);
  --s-sidebar-gap: var(--s-spacing-7);
  --s-appbar-h: 64px;
  --s-appbar-pad-x: var(--s-spacing-6);
  --s-appbar-pad-x-wide: var(--s-spacing-9);
  --s-logo-size: var(--s-avatar-md);
  --s-menu-item-h: var(--s-row-h-sm);
  --s-menu-item-pad-y: var(--s-spacing-3);
  --s-menu-item-radius: var(--s-radius-6);
  --s-surface-radius: var(--s-radius-10);
  --s-pop-radius: var(--s-radius-8);
  --s-card-pad: var(--s-spacing-7);
  --s-card-pad-compact: var(--s-spacing-6);
  --s-card-pad-tight: var(--s-spacing-4);
  --s-dialog-pad: var(--s-spacing-7);
  --s-dialog-w: 440px;
  --s-panel-pad: var(--s-spacing-5);
  --s-panel-w: 420px;
  --s-tooltip-pad: var(--s-spacing-4);
  --s-tip-pad-y: var(--s-spacing-3);
  --s-tip-pad-x: var(--s-spacing-4);
  --s-toast-pad-y: var(--s-spacing-4);
  --s-toast-pad-x: var(--s-spacing-5);
  --s-table-pad-y: 10px;
  --s-table-pad-x: var(--s-spacing-5);
  --s-table-pad-y-dense: var(--s-spacing-3);
  --s-type-body-sm: 400 var(--s-font-size-body-sm)/var(--s-line-height-body-sm) var(--s-font-family-body);
  --s-type-body-md: 400 var(--s-font-size-body-md)/var(--s-line-height-body-md) var(--s-font-family-body);
  --s-type-body-lg: 400 var(--s-font-size-body-lg)/var(--s-line-height-body-lg) var(--s-font-family-body);
  --s-type-body-xl: 400 var(--s-font-size-body-xl)/var(--s-line-height-body-xl) var(--s-font-family-body);
  --s-type-heading-lg: 500 var(--s-font-size-heading-lg)/var(--s-line-height-heading-lg) var(--s-font-family-body);
  --s-type-code-body-sm: 400 var(--s-font-size-body-sm)/var(--s-line-height-body-sm) var(--s-font-family-code);
  --s-type-code-body-md: 400 var(--s-font-size-body-md)/var(--s-line-height-body-md) var(--s-font-family-code);
  --s-type-code-body-lg: 400 var(--s-font-size-body-lg)/var(--s-line-height-body-lg) var(--s-font-family-code);
  --s-type-code-heading-xl: 400 var(--s-font-size-heading-xl)/var(--s-line-height-heading-xl) var(--s-font-family-code);
  --s-type-code-key: 400 var(--s-font-size-body-xl)/var(--s-line-height-body-xl) var(--s-font-family-code);
  --s-type-hero-sm: 400 var(--site-hero-sm-size)/var(--site-hero-sm-line-height) var(--s-font-family-code);
}

/* --- Reduced motion: every tokenized timing collapses to 0 (copied from the kit); the fade-only
   motion patterns keep --s-motion-duration-fade (src/tokens.extra.css, v2.8) --- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --s-motion-spring-effects-fast-ms: 0ms;
    --s-motion-spring-effects-default-ms: 0ms;
    --s-motion-spring-effects-slow-ms: 0ms;
    --s-motion-spring-spatial-fast-ms: 0ms;
    --s-motion-spring-spatial-default-ms: 0ms;
    --s-motion-spring-spatial-slow-ms: 0ms;
    --s-motion-spring-expressive-ms: 0ms;
    --s-motion-duration-instant: 0ms;
    --s-motion-duration-fast: 0ms;
    --s-motion-duration-base: 0ms;
    --s-motion-duration-slow: 0ms;
    --s-motion-duration-slower: 0ms;
    --s-motion-duration-ambient: 0ms;
    --s-motion-hover-duration: var(--s-motion-duration-fade);
    --s-motion-reveal-duration: var(--s-motion-duration-fade);
    --s-motion-tooltip-duration: var(--s-motion-duration-fade);
    --s-motion-backdrop-duration: var(--s-motion-duration-fade);
  }
}