/* สร้างอัตโนมัติด้วย tokens/build.mjs — แก้ที่ DTCG ต้นทางเท่านั้น */
:root {
  --gallery-color-accent: #ec2c23;
  --gallery-color-accent-ink: #b00000;
  --gallery-color-accent-soft: #fdeae9;
  --gallery-color-border: #bec2cf;
  --gallery-color-border-strong: #b0b5c4;
  --gallery-color-canvas: #e6e8ef;
  --gallery-color-chart-mint: #4cc0ae;
  --gallery-color-chart-orange: #ffa200;
  --gallery-color-chart-purple: #7047eb;
  --gallery-color-code-bg: #0f1117;
  --gallery-color-code-dim: #9ba3b5;
  --gallery-color-code-ink: #f1f5f9;
  --gallery-color-danger: #942127;
  --gallery-color-danger-bg: #fceeee;
  --gallery-color-danger-strong: #dc2626;
  --gallery-color-info: #1d48a7;
  --gallery-color-info-bg: #eef3fd;
  --gallery-color-info-strong: #2563eb;
  --gallery-color-inverse: #ffffff;
  --gallery-color-muted: #535a6e;
  --gallery-color-nav: #f0f1f4;
  --gallery-color-nav-active: rgba(236,44,35,0.1);
  --gallery-color-nav-active-ink: #b00000;
  --gallery-color-nav-dim: #475569;
  --gallery-color-nav-hover: rgba(0,0,0,0.04);
  --gallery-color-nav-ink: #0f172a;
  --gallery-color-nav-line: #e4e5ea;
  --gallery-color-nav-marker: #ec2c23;
  --gallery-color-nav-strong: #0f172a;
  --gallery-color-ok: #14723f;
  --gallery-color-ok-bg: #ecf8f1;
  --gallery-color-ok-strong: #16a34a;
  --gallery-color-on-accent: #ffffff;
  --gallery-color-overlay: rgba(15,23,42,0.42);
  --gallery-color-overlay-strong: rgba(15,23,42,0.65);
  --gallery-color-panel: #eef0f4;
  --gallery-color-shadow: rgba(15,23,42,0.2);
  --gallery-color-surface: #ffffff;
  --gallery-color-text: #0f172a;
  --gallery-color-warn: #925513;
  --gallery-color-warn-bg: #fcf4eb;
  --gallery-color-warn-strong: #d97706;
  --gallery-component-button-background: #b00000;
  --gallery-component-button-text: #ffffff;
  --gallery-density-compact-control: 32px;
  --gallery-density-compact-gap: 12px;
  --gallery-density-compact-panel-padding: 16px;
  --gallery-density-compact-row: 36px;
  --gallery-density-normal-control: 40px;
  --gallery-density-normal-gap: 12px;
  --gallery-density-normal-panel-padding: 16px;
  --gallery-density-normal-row: 48px;
  --gallery-density-spacious-control: 48px;
  --gallery-density-spacious-gap: 16px;
  --gallery-density-spacious-panel-padding: 24px;
  --gallery-density-spacious-row: 48px;
  --gallery-effect-grain: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  --gallery-effect-grain-opacity: 0.035;
  --gallery-elevation-card: 0px 1px 2px 0px rgba(15,23,42,0.04);
  --gallery-elevation-hero: 0px 4px 12px 0px rgba(15,23,42,0.06), 0px 1px 3px 0px rgba(15,23,42,0.04);
  --gallery-font-body: Poppins, "Noto Sans Thai", sans-serif;
  --gallery-font-mono: "JetBrains Mono", monospace;
  --gallery-line-height: 1.65;
  --gallery-motion-fast: 150ms;
  --gallery-motion-normal: 250ms;
  --gallery-motion-smooth: cubic-bezier(0.16, 1, 0.3, 1);
  --gallery-radius-control: 6px;
  --gallery-radius-hero: 12px;
  --gallery-radius-panel: 8px;
  --gallery-radius-tag: 4px;
  --gallery-size-body: 14px;
  --gallery-size-control: 32px;
  --gallery-size-gap: 12px;
  --gallery-size-panel-padding: 16px;
  --gallery-size-row: 36px;
  --gallery-size-small: 12px;
  --gallery-size-title: 20px;
  --gallery-size-touch: 44px;
  --gallery-space-minus20: -20px;
  --gallery-space-minus80: -80px;
  --gallery-space-minus9: -9px;
  --gallery-space-n1: 1px;
  --gallery-space-n10: 10px;
  --gallery-space-n12: 12px;
  --gallery-space-n14: 14px;
  --gallery-space-n16: 16px;
  --gallery-space-n18: 18px;
  --gallery-space-n2: 2px;
  --gallery-space-n20: 20px;
  --gallery-space-n22: 22px;
  --gallery-space-n24: 24px;
  --gallery-space-n26: 26px;
  --gallery-space-n32: 32px;
  --gallery-space-n34: 34px;
  --gallery-space-n38: 38px;
  --gallery-space-n4: 4px;
  --gallery-space-n5: 5px;
  --gallery-space-n50: 50px;
  --gallery-space-n6: 6px;
  --gallery-space-n7: 7px;
  --gallery-space-n8: 8px;
  --gallery-state-active: #b00000;
  --gallery-state-disabled: #eef0f4;
  --gallery-state-disabled-ink: #535a6e;
  --gallery-state-empty: #eef0f4;
  --gallery-state-empty-ink: #535a6e;
  --gallery-state-error: #fceeee;
  --gallery-state-error-ink: #942127;
  --gallery-state-focus: #0f172a;
  --gallery-state-hover: #fdeae9;
  --gallery-state-loading: #eef3fd;
  --gallery-state-loading-ink: #1d48a7;
  --gallery-state-success: #ecf8f1;
  --gallery-state-success-ink: #14723f;
  --gallery-weight-bold: 700;
  --gallery-weight-medium: 500;
  --gallery-weight-regular: 400;
  --gallery-weight-semibold: 600;
  --c-accent: var(--gallery-color-accent);
  --c-accent-ink: var(--gallery-color-accent-ink);
  --c-accent-soft: var(--gallery-color-accent-soft);
  --c-border: var(--gallery-color-border);
  --c-border-strong: var(--gallery-color-border-strong);
  --c-button: var(--gallery-component-button-background);
  --c-button-text: var(--gallery-component-button-text);
  --c-canvas: var(--gallery-color-canvas);
  --c-chart-mint: var(--gallery-color-chart-mint);
  --c-chart-orange: var(--gallery-color-chart-orange);
  --c-chart-purple: var(--gallery-color-chart-purple);
  --c-code-bg: var(--gallery-color-code-bg);
  --c-code-dim: var(--gallery-color-code-dim);
  --c-code-ink: var(--gallery-color-code-ink);
  --c-danger: var(--gallery-color-danger);
  --c-danger-bg: var(--gallery-color-danger-bg);
  --c-danger-strong: var(--gallery-color-danger-strong);
  --c-info: var(--gallery-color-info);
  --c-info-bg: var(--gallery-color-info-bg);
  --c-info-strong: var(--gallery-color-info-strong);
  --c-inverse: var(--gallery-color-inverse);
  --c-muted: var(--gallery-color-muted);
  --c-nav: var(--gallery-color-nav);
  --c-nav-active: var(--gallery-color-nav-active);
  --c-nav-active-ink: var(--gallery-color-nav-active-ink);
  --c-nav-dim: var(--gallery-color-nav-dim);
  --c-nav-hover: var(--gallery-color-nav-hover);
  --c-nav-ink: var(--gallery-color-nav-ink);
  --c-nav-line: var(--gallery-color-nav-line);
  --c-nav-marker: var(--gallery-color-nav-marker);
  --c-nav-strong: var(--gallery-color-nav-strong);
  --c-ok: var(--gallery-color-ok);
  --c-ok-bg: var(--gallery-color-ok-bg);
  --c-ok-strong: var(--gallery-color-ok-strong);
  --c-on-accent: var(--gallery-color-on-accent);
  --c-overlay: var(--gallery-color-overlay);
  --c-overlay-strong: var(--gallery-color-overlay-strong);
  --c-panel: var(--gallery-color-panel);
  --c-shadow: var(--gallery-color-shadow);
  --c-surface: var(--gallery-color-surface);
  --c-text: var(--gallery-color-text);
  --c-warn: var(--gallery-color-warn);
  --c-warn-bg: var(--gallery-color-warn-bg);
  --c-warn-strong: var(--gallery-color-warn-strong);
  --control: var(--gallery-size-control);
  --ds-grain: var(--gallery-effect-grain);
  --font: var(--gallery-font-body);
  --gap: var(--gallery-size-gap);
  --line-body: var(--gallery-line-height);
  --mono: var(--gallery-font-mono);
  --motion-fast: var(--gallery-motion-fast);
  --motion-normal: var(--gallery-motion-normal);
  --motion-smooth: var(--gallery-motion-smooth);
  --panel-padding: var(--gallery-size-panel-padding);
  --r-control: var(--gallery-radius-control);
  --r-panel: var(--gallery-radius-panel);
  --r-tag: var(--gallery-radius-tag);
  --row: var(--gallery-size-row);
  --text-body: var(--gallery-size-body);
  --text-small: var(--gallery-size-small);
  --text-title: var(--gallery-size-title);
  --weight-bold: var(--gallery-weight-bold);
  --weight-medium: var(--gallery-weight-medium);
  --weight-regular: var(--gallery-weight-regular);
  --weight-semibold: var(--gallery-weight-semibold);
}

[data-theme="dark"] {
  --gallery-color-accent: #ec2c23;
  --gallery-color-accent-ink: #ff4d44;
  --gallery-color-accent-soft: #2f1e2d;
  --gallery-color-border: #3a3f54;
  --gallery-color-border-strong: #454b62;
  --gallery-color-canvas: #0f1117;
  --gallery-color-chart-mint: #4cc0ae;
  --gallery-color-chart-orange: #ffa200;
  --gallery-color-chart-purple: #7047eb;
  --gallery-color-code-bg: #0f1117;
  --gallery-color-code-dim: #9ba3b5;
  --gallery-color-code-ink: #f1f5f9;
  --gallery-color-danger: #eaadaf;
  --gallery-color-danger-bg: #2d1e2d;
  --gallery-color-danger-strong: #dc2626;
  --gallery-color-info: #aac2f4;
  --gallery-color-info-bg: #1b2441;
  --gallery-color-info-strong: #2563eb;
  --gallery-color-inverse: #1a1d2e;
  --gallery-color-muted: #9ba3b5;
  --gallery-color-nav: #0c0e16;
  --gallery-color-nav-active: rgba(236,44,35,0.18);
  --gallery-color-nav-active-ink: #ff4d44;
  --gallery-color-nav-dim: #9ba3b5;
  --gallery-color-nav-hover: rgba(255,255,255,0.07);
  --gallery-color-nav-ink: #ffffff;
  --gallery-color-nav-line: rgba(255,255,255,0.12);
  --gallery-color-nav-marker: #ec2c23;
  --gallery-color-nav-strong: #ffffff;
  --gallery-color-ok: #a4d8bc;
  --gallery-color-ok-bg: #1a2a31;
  --gallery-color-ok-strong: #16a34a;
  --gallery-color-on-accent: #ffffff;
  --gallery-color-overlay: rgba(241,245,249,0.42);
  --gallery-color-overlay-strong: rgba(241,245,249,0.65);
  --gallery-color-panel: #141724;
  --gallery-color-shadow: rgba(241,245,249,0.2);
  --gallery-color-surface: #1a1d2e;
  --gallery-color-text: #f1f5f9;
  --gallery-color-warn: #e9c9a4;
  --gallery-color-warn-bg: #2d262a;
  --gallery-color-warn-strong: #d97706;
  --gallery-component-button-background: #b00000;
  --gallery-component-button-text: #ffffff;
  --gallery-density-compact-control: 32px;
  --gallery-density-compact-gap: 12px;
  --gallery-density-compact-panel-padding: 16px;
  --gallery-density-compact-row: 36px;
  --gallery-density-normal-control: 40px;
  --gallery-density-normal-gap: 12px;
  --gallery-density-normal-panel-padding: 16px;
  --gallery-density-normal-row: 48px;
  --gallery-density-spacious-control: 48px;
  --gallery-density-spacious-gap: 16px;
  --gallery-density-spacious-panel-padding: 24px;
  --gallery-density-spacious-row: 48px;
  --gallery-effect-grain: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  --gallery-effect-grain-opacity: 0.035;
  --gallery-elevation-card: 0px 1px 2px 0px rgba(15,23,42,0.04);
  --gallery-elevation-hero: 0px 4px 12px 0px rgba(15,23,42,0.06), 0px 1px 3px 0px rgba(15,23,42,0.04);
  --gallery-font-body: Poppins, "Noto Sans Thai", sans-serif;
  --gallery-font-mono: "JetBrains Mono", monospace;
  --gallery-line-height: 1.65;
  --gallery-motion-fast: 150ms;
  --gallery-motion-normal: 250ms;
  --gallery-motion-smooth: cubic-bezier(0.16, 1, 0.3, 1);
  --gallery-radius-control: 6px;
  --gallery-radius-hero: 12px;
  --gallery-radius-panel: 8px;
  --gallery-radius-tag: 4px;
  --gallery-size-body: 14px;
  --gallery-size-control: 32px;
  --gallery-size-gap: 12px;
  --gallery-size-panel-padding: 16px;
  --gallery-size-row: 36px;
  --gallery-size-small: 12px;
  --gallery-size-title: 20px;
  --gallery-size-touch: 44px;
  --gallery-space-minus20: -20px;
  --gallery-space-minus80: -80px;
  --gallery-space-minus9: -9px;
  --gallery-space-n1: 1px;
  --gallery-space-n10: 10px;
  --gallery-space-n12: 12px;
  --gallery-space-n14: 14px;
  --gallery-space-n16: 16px;
  --gallery-space-n18: 18px;
  --gallery-space-n2: 2px;
  --gallery-space-n20: 20px;
  --gallery-space-n22: 22px;
  --gallery-space-n24: 24px;
  --gallery-space-n26: 26px;
  --gallery-space-n32: 32px;
  --gallery-space-n34: 34px;
  --gallery-space-n38: 38px;
  --gallery-space-n4: 4px;
  --gallery-space-n5: 5px;
  --gallery-space-n50: 50px;
  --gallery-space-n6: 6px;
  --gallery-space-n7: 7px;
  --gallery-space-n8: 8px;
  --gallery-state-active: #ff4d44;
  --gallery-state-disabled: #141724;
  --gallery-state-disabled-ink: #9ba3b5;
  --gallery-state-empty: #141724;
  --gallery-state-empty-ink: #9ba3b5;
  --gallery-state-error: #2d1e2d;
  --gallery-state-error-ink: #eaadaf;
  --gallery-state-focus: #f1f5f9;
  --gallery-state-hover: #2f1e2d;
  --gallery-state-loading: #1b2441;
  --gallery-state-loading-ink: #aac2f4;
  --gallery-state-success: #1a2a31;
  --gallery-state-success-ink: #a4d8bc;
  --gallery-weight-bold: 700;
  --gallery-weight-medium: 500;
  --gallery-weight-regular: 400;
  --gallery-weight-semibold: 600;
  --c-accent: var(--gallery-color-accent);
  --c-accent-ink: var(--gallery-color-accent-ink);
  --c-accent-soft: var(--gallery-color-accent-soft);
  --c-border: var(--gallery-color-border);
  --c-border-strong: var(--gallery-color-border-strong);
  --c-button: var(--gallery-component-button-background);
  --c-button-text: var(--gallery-component-button-text);
  --c-canvas: var(--gallery-color-canvas);
  --c-chart-mint: var(--gallery-color-chart-mint);
  --c-chart-orange: var(--gallery-color-chart-orange);
  --c-chart-purple: var(--gallery-color-chart-purple);
  --c-code-bg: var(--gallery-color-code-bg);
  --c-code-dim: var(--gallery-color-code-dim);
  --c-code-ink: var(--gallery-color-code-ink);
  --c-danger: var(--gallery-color-danger);
  --c-danger-bg: var(--gallery-color-danger-bg);
  --c-danger-strong: var(--gallery-color-danger-strong);
  --c-info: var(--gallery-color-info);
  --c-info-bg: var(--gallery-color-info-bg);
  --c-info-strong: var(--gallery-color-info-strong);
  --c-inverse: var(--gallery-color-inverse);
  --c-muted: var(--gallery-color-muted);
  --c-nav: var(--gallery-color-nav);
  --c-nav-active: var(--gallery-color-nav-active);
  --c-nav-active-ink: var(--gallery-color-nav-active-ink);
  --c-nav-dim: var(--gallery-color-nav-dim);
  --c-nav-hover: var(--gallery-color-nav-hover);
  --c-nav-ink: var(--gallery-color-nav-ink);
  --c-nav-line: var(--gallery-color-nav-line);
  --c-nav-marker: var(--gallery-color-nav-marker);
  --c-nav-strong: var(--gallery-color-nav-strong);
  --c-ok: var(--gallery-color-ok);
  --c-ok-bg: var(--gallery-color-ok-bg);
  --c-ok-strong: var(--gallery-color-ok-strong);
  --c-on-accent: var(--gallery-color-on-accent);
  --c-overlay: var(--gallery-color-overlay);
  --c-overlay-strong: var(--gallery-color-overlay-strong);
  --c-panel: var(--gallery-color-panel);
  --c-shadow: var(--gallery-color-shadow);
  --c-surface: var(--gallery-color-surface);
  --c-text: var(--gallery-color-text);
  --c-warn: var(--gallery-color-warn);
  --c-warn-bg: var(--gallery-color-warn-bg);
  --c-warn-strong: var(--gallery-color-warn-strong);
  --control: var(--gallery-size-control);
  --ds-grain: var(--gallery-effect-grain);
  --font: var(--gallery-font-body);
  --gap: var(--gallery-size-gap);
  --line-body: var(--gallery-line-height);
  --mono: var(--gallery-font-mono);
  --motion-fast: var(--gallery-motion-fast);
  --motion-normal: var(--gallery-motion-normal);
  --motion-smooth: var(--gallery-motion-smooth);
  --panel-padding: var(--gallery-size-panel-padding);
  --r-control: var(--gallery-radius-control);
  --r-panel: var(--gallery-radius-panel);
  --r-tag: var(--gallery-radius-tag);
  --row: var(--gallery-size-row);
  --text-body: var(--gallery-size-body);
  --text-small: var(--gallery-size-small);
  --text-title: var(--gallery-size-title);
  --weight-bold: var(--gallery-weight-bold);
  --weight-medium: var(--gallery-weight-medium);
  --weight-regular: var(--gallery-weight-regular);
  --weight-semibold: var(--gallery-weight-semibold);
}

[data-theme="contrast"] {
  --gallery-color-accent: #0f172a;
  --gallery-color-accent-ink: #0f172a;
  --gallery-color-accent-soft: #ffffff;
  --gallery-color-border: #0f172a;
  --gallery-color-border-strong: #0f172a;
  --gallery-color-canvas: #ffffff;
  --gallery-color-chart-mint: #4cc0ae;
  --gallery-color-chart-orange: #ffa200;
  --gallery-color-chart-purple: #7047eb;
  --gallery-color-code-bg: #ffffff;
  --gallery-color-code-dim: #0f172a;
  --gallery-color-code-ink: #0f172a;
  --gallery-color-danger: #0f172a;
  --gallery-color-danger-bg: #ffffff;
  --gallery-color-danger-strong: #0f172a;
  --gallery-color-info: #0f172a;
  --gallery-color-info-bg: #ffffff;
  --gallery-color-info-strong: #0f172a;
  --gallery-color-inverse: #ffffff;
  --gallery-color-muted: #0f172a;
  --gallery-color-nav: #ffffff;
  --gallery-color-nav-active: #ffffff;
  --gallery-color-nav-active-ink: #0f172a;
  --gallery-color-nav-dim: #0f172a;
  --gallery-color-nav-hover: #ffffff;
  --gallery-color-nav-ink: #0f172a;
  --gallery-color-nav-line: #0f172a;
  --gallery-color-nav-marker: #0f172a;
  --gallery-color-nav-strong: #0f172a;
  --gallery-color-ok: #0f172a;
  --gallery-color-ok-bg: #ffffff;
  --gallery-color-ok-strong: #0f172a;
  --gallery-color-on-accent: #ffffff;
  --gallery-color-overlay: rgba(15,23,42,0.42);
  --gallery-color-overlay-strong: rgba(15,23,42,0.65);
  --gallery-color-panel: #ffffff;
  --gallery-color-shadow: rgba(15,23,42,0.2);
  --gallery-color-surface: #ffffff;
  --gallery-color-text: #0f172a;
  --gallery-color-warn: #0f172a;
  --gallery-color-warn-bg: #ffffff;
  --gallery-color-warn-strong: #0f172a;
  --gallery-component-button-background: #0f172a;
  --gallery-component-button-text: #ffffff;
  --gallery-density-compact-control: 32px;
  --gallery-density-compact-gap: 12px;
  --gallery-density-compact-panel-padding: 16px;
  --gallery-density-compact-row: 36px;
  --gallery-density-normal-control: 40px;
  --gallery-density-normal-gap: 12px;
  --gallery-density-normal-panel-padding: 16px;
  --gallery-density-normal-row: 48px;
  --gallery-density-spacious-control: 48px;
  --gallery-density-spacious-gap: 16px;
  --gallery-density-spacious-panel-padding: 24px;
  --gallery-density-spacious-row: 48px;
  --gallery-effect-grain: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  --gallery-effect-grain-opacity: 0.035;
  --gallery-elevation-card: 0px 1px 2px 0px rgba(15,23,42,0.04);
  --gallery-elevation-hero: 0px 4px 12px 0px rgba(15,23,42,0.06), 0px 1px 3px 0px rgba(15,23,42,0.04);
  --gallery-font-body: Poppins, "Noto Sans Thai", sans-serif;
  --gallery-font-mono: "JetBrains Mono", monospace;
  --gallery-line-height: 1.65;
  --gallery-motion-fast: 150ms;
  --gallery-motion-normal: 250ms;
  --gallery-motion-smooth: cubic-bezier(0.16, 1, 0.3, 1);
  --gallery-radius-control: 6px;
  --gallery-radius-hero: 12px;
  --gallery-radius-panel: 8px;
  --gallery-radius-tag: 4px;
  --gallery-size-body: 14px;
  --gallery-size-control: 32px;
  --gallery-size-gap: 12px;
  --gallery-size-panel-padding: 16px;
  --gallery-size-row: 36px;
  --gallery-size-small: 12px;
  --gallery-size-title: 20px;
  --gallery-size-touch: 44px;
  --gallery-space-minus20: -20px;
  --gallery-space-minus80: -80px;
  --gallery-space-minus9: -9px;
  --gallery-space-n1: 1px;
  --gallery-space-n10: 10px;
  --gallery-space-n12: 12px;
  --gallery-space-n14: 14px;
  --gallery-space-n16: 16px;
  --gallery-space-n18: 18px;
  --gallery-space-n2: 2px;
  --gallery-space-n20: 20px;
  --gallery-space-n22: 22px;
  --gallery-space-n24: 24px;
  --gallery-space-n26: 26px;
  --gallery-space-n32: 32px;
  --gallery-space-n34: 34px;
  --gallery-space-n38: 38px;
  --gallery-space-n4: 4px;
  --gallery-space-n5: 5px;
  --gallery-space-n50: 50px;
  --gallery-space-n6: 6px;
  --gallery-space-n7: 7px;
  --gallery-space-n8: 8px;
  --gallery-state-active: #0f172a;
  --gallery-state-disabled: #ffffff;
  --gallery-state-disabled-ink: #0f172a;
  --gallery-state-empty: #ffffff;
  --gallery-state-empty-ink: #0f172a;
  --gallery-state-error: #ffffff;
  --gallery-state-error-ink: #0f172a;
  --gallery-state-focus: #0f172a;
  --gallery-state-hover: #ffffff;
  --gallery-state-loading: #ffffff;
  --gallery-state-loading-ink: #0f172a;
  --gallery-state-success: #ffffff;
  --gallery-state-success-ink: #0f172a;
  --gallery-weight-bold: 700;
  --gallery-weight-medium: 500;
  --gallery-weight-regular: 400;
  --gallery-weight-semibold: 600;
  --c-accent: var(--gallery-color-accent);
  --c-accent-ink: var(--gallery-color-accent-ink);
  --c-accent-soft: var(--gallery-color-accent-soft);
  --c-border: var(--gallery-color-border);
  --c-border-strong: var(--gallery-color-border-strong);
  --c-button: var(--gallery-component-button-background);
  --c-button-text: var(--gallery-component-button-text);
  --c-canvas: var(--gallery-color-canvas);
  --c-chart-mint: var(--gallery-color-chart-mint);
  --c-chart-orange: var(--gallery-color-chart-orange);
  --c-chart-purple: var(--gallery-color-chart-purple);
  --c-code-bg: var(--gallery-color-code-bg);
  --c-code-dim: var(--gallery-color-code-dim);
  --c-code-ink: var(--gallery-color-code-ink);
  --c-danger: var(--gallery-color-danger);
  --c-danger-bg: var(--gallery-color-danger-bg);
  --c-danger-strong: var(--gallery-color-danger-strong);
  --c-info: var(--gallery-color-info);
  --c-info-bg: var(--gallery-color-info-bg);
  --c-info-strong: var(--gallery-color-info-strong);
  --c-inverse: var(--gallery-color-inverse);
  --c-muted: var(--gallery-color-muted);
  --c-nav: var(--gallery-color-nav);
  --c-nav-active: var(--gallery-color-nav-active);
  --c-nav-active-ink: var(--gallery-color-nav-active-ink);
  --c-nav-dim: var(--gallery-color-nav-dim);
  --c-nav-hover: var(--gallery-color-nav-hover);
  --c-nav-ink: var(--gallery-color-nav-ink);
  --c-nav-line: var(--gallery-color-nav-line);
  --c-nav-marker: var(--gallery-color-nav-marker);
  --c-nav-strong: var(--gallery-color-nav-strong);
  --c-ok: var(--gallery-color-ok);
  --c-ok-bg: var(--gallery-color-ok-bg);
  --c-ok-strong: var(--gallery-color-ok-strong);
  --c-on-accent: var(--gallery-color-on-accent);
  --c-overlay: var(--gallery-color-overlay);
  --c-overlay-strong: var(--gallery-color-overlay-strong);
  --c-panel: var(--gallery-color-panel);
  --c-shadow: var(--gallery-color-shadow);
  --c-surface: var(--gallery-color-surface);
  --c-text: var(--gallery-color-text);
  --c-warn: var(--gallery-color-warn);
  --c-warn-bg: var(--gallery-color-warn-bg);
  --c-warn-strong: var(--gallery-color-warn-strong);
  --control: var(--gallery-size-control);
  --ds-grain: var(--gallery-effect-grain);
  --font: var(--gallery-font-body);
  --gap: var(--gallery-size-gap);
  --line-body: var(--gallery-line-height);
  --mono: var(--gallery-font-mono);
  --motion-fast: var(--gallery-motion-fast);
  --motion-normal: var(--gallery-motion-normal);
  --motion-smooth: var(--gallery-motion-smooth);
  --panel-padding: var(--gallery-size-panel-padding);
  --r-control: var(--gallery-radius-control);
  --r-panel: var(--gallery-radius-panel);
  --r-tag: var(--gallery-radius-tag);
  --row: var(--gallery-size-row);
  --text-body: var(--gallery-size-body);
  --text-small: var(--gallery-size-small);
  --text-title: var(--gallery-size-title);
  --weight-bold: var(--gallery-weight-bold);
  --weight-medium: var(--gallery-weight-medium);
  --weight-regular: var(--gallery-weight-regular);
  --weight-semibold: var(--gallery-weight-semibold);
}

[data-density="compact"] {
  --gallery-size-control: var(--gallery-density-compact-control);
  --gallery-size-row: var(--gallery-density-compact-row);
  --gallery-size-gap: var(--gallery-density-compact-gap);
  --gallery-size-panel-padding: var(--gallery-density-compact-panel-padding);
}

[data-density="normal"] {
  --gallery-size-control: var(--gallery-density-normal-control);
  --gallery-size-row: var(--gallery-density-normal-row);
  --gallery-size-gap: var(--gallery-density-normal-gap);
  --gallery-size-panel-padding: var(--gallery-density-normal-panel-padding);
}

[data-density="spacious"] {
  --gallery-size-control: var(--gallery-density-spacious-control);
  --gallery-size-row: var(--gallery-density-spacious-row);
  --gallery-size-gap: var(--gallery-density-spacious-gap);
  --gallery-size-panel-padding: var(--gallery-density-spacious-panel-padding);
}