:root,
[t="light"],
.theme-light {
  color-scheme: light;

  /**************************************************************
  * Color Primitives
  *************************************************************/

  /* Gray */
  --zn-color-gray-100: hsl(240, 13%, 95%); // used: src/components/alert/alert.scss:148
  --zn-color-gray-300: hsl(260, 21%, 89%); // used: src/components/editor/modules/toolbar/toolbar.scss:27 (+1 more)
  --zn-color-gray-400: hsl(251, 17%, 76%); // used: src/components/checkbox/checkbox.scss:262 (+1 more)
  --zn-color-gray-500: hsl(254, 17%, 66%); // used: src/components/alert/alert.scss:147 (+3 more)
  --zn-color-gray-800: hsl(259, 13%, 42%); // used: src/components/alert/alert.scss:144 (+1 more)
  --zn-color-gray-900: hsl(262, 12%, 35%); // used: src/components/checkbox/checkbox.scss:280 (+1 more)

  /* Red */
  --zn-color-red-500: hsl(0 84.2% 60.2%); // used: src/components/data-select/data-select.scss:5 (+1 more)
  --zn-color-red-600: hsl(0 72.2% 50.6%); // used: src/components/note/note.scss:4

  /* Orange */
  --zn-color-orange-500: hsl(24.6 95% 53.1%); // used: src/components/data-select/data-select.scss:7 (+2 more)

  /* Amber */
  --zn-color-amber-400: hsl(43.3 96.4% 56.3%); // used: src/components/rating/rating.scss:5

  /* Yellow */
  --zn-color-yellow-400: hsl(51, 100%, 53%); // used: src/components/data-select/data-select.scss:8 (+2 more)

  /* Green */
  --zn-color-green-500: hsl(142.1 70.6% 45.3%); // used: src/components/data-select/data-select.scss:11 (+2 more)

  /* Blue */
  --zn-color-blue-500: hsl(217.2 91.2% 59.8%); // used: src/components/data-select/data-select.scss:6 (+2 more)

  /* Indigo */
  --zn-color-indigo-400: hsl(234.5 89.5% 73.9%); // used: src/components/note/note.scss:8
  --zn-color-indigo-500: hsl(238.7 83.5% 66.7%); // used: src/components/data-select/data-select.scss:9 (+1 more)

  /* Violet */
  --zn-color-violet-500: hsl(258.3 89.5% 66.3%); // used: src/components/data-select/data-select.scss:10 (+1 more)
  --zn-color-violet-600: hsl(262.1 83.3% 57.8%); // used: src/components/note/note.scss:9

  /* Purple */
  --zn-color-purple-50: hsl(249, 100%, 97%); // used: src/components/checkbox/checkbox.scss:270 (+2 more)
  --zn-color-purple-100: hsl(245, 100%, 95%); // used: src/components/checkbox/checkbox.scss:285 (+2 more)
  --zn-color-purple-200: hsl(244, 100%, 92%); // used: src/components/data-table/data-table.scss:385 (+1 more)
  --zn-color-purple-600: hsl(256, 91%, 59%); // used: src/components/checkbox/checkbox.scss:275 (+10 more)

  /* Pink */
  --zn-color-pink-400: hsl(328.6 85.5% 70.2%); // used: src/components/note/note.scss:11
  --zn-color-pink-500: hsl(330.4 81.2% 60.4%); // used: src/components/data-select/data-select.scss:12 (+1 more)

  /**************************************************************
   * Theme Tokens
   *************************************************************/

  /* Primary */
  --zn-color-primary-50: var(--zn-color-purple-50); // used: src/components/file/file.scss:238 (+14 more)
  --zn-color-primary-100: var(--zn-color-purple-100); // used: src/components/option/option.scss:42 (+5 more)
  --zn-color-primary-200: var(--zn-color-purple-200); // used: src/components/dialog/dialog.scss:8 (+7 more)
  --zn-color-primary-300: hsl(246, 100%, 85%); // used: scss/boot.scss:28 (+1 more)
  --zn-color-primary-400: hsl(249, 100%, 76%); // used: src/components/priority-list/priority-list.scss:80 (+1 more)
  --zn-color-primary-500: hsl(252, 98%, 66%); // used: src/components/checkbox/checkbox.scss:30 (+8 more)
  --zn-color-primary-600: var(--zn-color-purple-600); // used: src/components/checkbox/checkbox.scss:29 (+51 more)
  --zn-color-primary-700: hsl(257, 76%, 50%); // used: src/components/file/file.scss:246 (+15 more)
  --zn-color-primary-800: hsl(257, 76%, 42%); // used: src/components/file/file.scss:244 (+3 more)
  --zn-color-primary-900: hsl(257, 73%, 35%); // used: src/components/file/file.scss:94 (+1 more)

  /* Success */
  --zn-color-success-50: hsl(138.5 76.5% 96.7%); // used: docs/pages/components/data-table-search.md:287 (+2 more)
  --zn-color-success-200: rgb(var(--zn-green)); // used: docs/pages/components/reveal.md:488 (+1 more)
  --zn-color-success-300: hsl(141.7 76.6% 73.1%); // used: docs/pages/getting-started/form-controls.md:569 (+1 more)
  --zn-color-success-400: hsl(141.9 69.2% 58%); // used: docs/pages/components/scroll-container.md:293 (+3 more)
  --zn-color-success-500: var(--zn-color-green-500); // used: src/components/checkbox/checkbox.scss:62
  --zn-color-success-600: hsl(142.1 76.2% 36.3%); // used: src/components/checkbox/checkbox.scss:61 (+14 more)
  --zn-color-success-700: hsl(142.4 71.8% 29.2%); // used: docs/pages/components/reveal.md:488 (+3 more)

  /* Warning */
  --zn-color-warning-50: hsl(48 100% 96.1%); // used: docs/pages/components/data-table-search.md:282 (+1 more)
  --zn-color-warning-400: var(--zn-color-amber-400); // used: docs/pages/components/scroll-container.md:291
  --zn-color-warning-500: hsl(37.7 92.1% 50.2%); // used: src/components/checkbox/checkbox.scss:68
  --zn-color-warning-600: hsl(32.1 94.6% 43.7%); // used: src/components/checkbox/checkbox.scss:67 (+4 more)

  /* Danger */
  --zn-color-danger-50: hsl(0 85.7% 97.3%); // used: docs/pages/components/reveal.md:530
  --zn-color-danger-100: rgb(var(--zn-red)); // used: docs/assets/styles/docs.css:579
  --zn-color-danger-200: rgb(var(--zn-red)); // used: docs/pages/components/reveal.md:530
  --zn-color-danger-300: hsl(0 93.5% 81.8%); // used: docs/pages/getting-started/form-controls.md:544 (+1 more)
  --zn-color-danger-500: var(--zn-color-red-500); // used: src/components/checkbox/checkbox.scss:74
  --zn-color-danger-600: var(--zn-color-red-600); // used: src/components/checkbox/checkbox.scss:73 (+15 more)
  --zn-color-danger-700: rgb(var(--zn-red)); // used: docs/pages/components/reveal.md:531 (+3 more)
  --zn-color-danger-800: hsl(0 70% 35.3%); // used: docs/assets/styles/docs.css:581

  /* Neutral */
  --zn-color-neutral-50: hsl(255, 33%, 98%); // used: src/components/button/button.scss:113 (+27 more)
  --zn-color-neutral-100: var(--zn-color-gray-100); // used: src/components/button/button.scss:118 (+58 more)
  --zn-color-neutral-200: hsl(255, 12%, 94%); // used: src/components/checkbox/checkbox.scss:325 (+59 more)
  --zn-color-neutral-300: var(--zn-color-gray-300); // used: src/components/checkbox/checkbox.scss:50 (+22 more)
  --zn-color-neutral-400: var(--zn-color-gray-400); // used: src/components/priority-list/priority-list.scss:10 (+11 more)
  --zn-color-neutral-500: var(--zn-color-gray-500); // used: src/components/button/button.component.ts:263 (+22 more)
  --zn-color-neutral-600: hsl(258, 15%, 58%); // used: src/components/checkbox/checkbox.scss:48 (+52 more)
  --zn-color-neutral-700: hsl(259, 13%, 54%); // used: src/components/checkbox/checkbox.scss:326 (+14 more)
  --zn-color-neutral-800: var(--zn-color-gray-800); // used: src/components/checkbox/checkbox.scss:332 (+7 more)
  --zn-color-neutral-900: var(--zn-color-gray-900); // used: docs/assets/scripts/code-previews.js:215 (+33 more)

  /* Neutral one-offs */
  --zn-color-neutral-0: hsl(0, 0%, 100%); // used: src/components/checkbox/checkbox.scss:31 (+15 more)
  --zn-color-neutral-1000: hsl(0, 0%, 0%); // used: docs/assets/styles/docs.css:502 (+2 more)

  /* Border radii */
  --zn-border-radius: 6px;
  --zn-border-radius-small: 2px;
  --zn-border-radius-circle: 50%;
  --zn-border-radius-pill: 9999px;

  --zn-shadow-x-small: 0 1px 4px rgba(0, 0, 0, 0.10);
  --zn-shadow-small: 0 3px 9px rgba(0, 0, 0, 0.15);
  --zn-shadow-medium: 0 6px 18px rgba(0, 0, 0, 0.15);
  --zn-shadow-large: 0 6px 20px rgba(0, 0, 0, 0.15);
  --zn-shadow-x-large: 0 6px 20px rgba(0, 0, 0, 0.25);

  /** Container Sizes */
  --zn-container: var(--zn-container-hd);
  --zn-container-default: 100%;
  --zn-container-sm: 360px;
  --zn-container-smp: 480px;
  --zn-container-ph: 600px;
  --zn-container-md: 768px;
  --zn-container-lg: 1100px;
  --zn-container-hd: 1400px;
  --zn-container-3k: 1960px;
  --zn-container-4k: 2560px;


  --zn-transition-x-slow: 1000ms;
  --zn-transition-slow: 500ms;
  --zn-transition-medium: 250ms;
  --zn-transition-fast: 150ms;
  --zn-transition-x-fast: 50ms;

  /** Gap */
  --zn-gap: var(--zn-base-gap, var(--zn-spacing-medium, 4px));

  /**************************************************************
   * Typography
   *************************************************************/

  --zn-font-mono: 'Roboto Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
  --zn-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif,
  'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  --zn-font-serif: 'Roboto Slab', Georgia, 'Times New Roman', serif;

  /* Font sizes */
  ///////////////////////////////////// 1rem = 16px // 1rem = 14px
  --zn-font-size-2x-small: 0.625rem; // 10px // 8.75px
  --zn-font-size-x-small: 0.75rem; // 12px // 10.5px
  --zn-font-size-small: 0.929rem; // 14px // 13px
  --zn-font-size-medium: 1rem; // 16px // 14px
  --zn-font-size-large: 1.15rem; // 20px // 16px
  --zn-font-size-x-large: 1.25rem; // 24px // 21px
  --zn-font-size-2x-large: 2.25rem; // 36px // 31.5px
  --zn-font-size-3x-large: 3rem; // 48px // 42px
  --zn-font-size-4x-large: 4.5rem; // 72px // 63px

  /* Font weights */
  --zn-font-weight-light: 300;
  --zn-font-weight-normal: 400;
  --zn-font-weight-medium: 500;
  --zn-font-weight-semibold: 600;
  --zn-font-weight-bold: 700;

  /* Letter spacings */
  --zn-letter-spacing-normal: normal;
  --zn-letter-spacing-loose: 0.5px;

  /* Line heights */
  --zn-line-height-denser: 1; // 16px
  --zn-line-height-dense: 1.5; // 24px
  --zn-line-height-normal: 2; // 32px
  --zn-line-height-loose: 2.5; // 40px
  --zn-line-height-looser: 3; // 48px

  /* Focus rings */
  --zn-focus-ring-color: var(--zn-color-primary-600);
  --zn-focus-ring-style: solid;
  --zn-focus-ring-width-x-small: 1px;
  --zn-focus-ring-width: 3px;
  --zn-focus-ring: var(--zn-focus-ring-style) var(--zn-focus-ring-width) var(--zn-focus-ring-color);
  --zn-focus-ring-offset: 1px;

  /**************************************************************
   * Forms
   *************************************************************/

  /* Inputs */
  ///////////////////////////////////// 1rem = 16px // 1rem = 14px
  --zn-input-height-x-small: 24px; // 27.6px // 24.15px
  --zn-input-height-small: 30px; // 35.424px // 31px
  --zn-input-height-medium: 36px; // 40px // 35px
  --zn-input-height-large: 40px; // 50px // 43.75px

  /* Input background colors */
  --zn-input-background-color: var(--zn-color-neutral-50);
  --zn-input-background-color-hover: var(--zn-color-neutral-100);
  --zn-input-background-color-focus: var(--zn-color-neutral-100);
  --zn-input-background-color-disabled: var(--zn-color-neutral-400);

  /* Input borders */
  --zn-input-border-color: var(--zn-color-neutral-300);
  --zn-input-border-color-hover: var(--zn-color-neutral-400);
  --zn-input-border-color-focus: var(--zn-color-primary-500);
  --zn-input-border-color-disabled: var(--zn-color-neutral-300);
  --zn-input-border-width: 1px;

  /* Input Required Content */
  --zn-input-required-content: '*';
  --zn-input-required-content-offset: -2px;
  --zn-input-required-content-color: var(--zn-input-label-color);

  /* Input border radii */
  --zn-input-border-radius-x-small: var(--zn-border-radius);
  --zn-input-border-radius-small: var(--zn-border-radius);
  --zn-input-border-radius-medium: var(--zn-border-radius);
  --zn-input-border-radius-large: var(--zn-border-radius);

  /* Input fonts */
  --zn-input-font-family: var(--zn-font-sans);
  --zn-input-font-weight: var(--zn-text-input-content-font-weight);
  --zn-input-font-size-x-small: var(--zn-font-size-x-small);
  --zn-input-font-size-small: var(--zn-font-size-small);
  --zn-input-font-size-medium: var(--zn-text-input-content-font-size);
  --zn-input-font-size-large: var(--zn-font-size-large);
  --zn-input-line-height: var(--zn-text-input-content-line-height);
  --zn-input-letter-spacing: var(--zn-letter-spacing-normal);

  /* Input colors */
  --zn-input-color: var(--zn-text-input-content-color);
  --zn-input-color-hover: var(--zn-color-neutral-800);
  --zn-input-color-focus: var(--zn-color-neutral-700);
  --zn-input-color-disabled: var(--zn-color-neutral-800);
  --zn-input-icon-color: var(--zn-color-neutral-500);
  --zn-input-icon-color-hover: var(--zn-color-neutral-600);
  --zn-input-icon-color-focus: var(--zn-color-neutral-600);
  --zn-input-placeholder-color: var(--zn-text-input-placeholder-color);
  --zn-input-placeholder-color-disabled: var(--zn-color-neutral-600);

  /* Input spacing */
  --zn-input-spacing-small: var(--zn-spacing-small);
  --zn-input-spacing-medium: var(--zn-spacing-medium);
  --zn-input-spacing-large: var(--zn-spacing-large);

  /* Focus rings */
  --zn-input-focus-ring-color: hsl(256 91% 59%/ 40%);
  --zn-input-focus-ring-offset: 0;

  --zn-input-label-font-size-small: var(--zn-font-size-small);
  --zn-input-label-font-size-medium: var(--zn-text-input-label-font-size);
  --zn-input-label-font-size-large: var(--zn-font-size-large);
  --zn-input-label-font-weight: var(--zn-text-input-label-font-weight);
  --zn-input-label-line-height: var(--zn-text-input-label-line-height);
  --zn-input-label-color: var(--zn-text-input-label-color);

  /* Help text */
  --zn-input-help-text-font-size-small: var(--zn-font-size-x-small);
  --zn-input-help-text-font-size-medium: var(--zn-font-size-small);
  --zn-input-help-text-font-size-large: var(--zn-font-size-medium);
  --zn-input-help-text-color: var(--zn-color-neutral-500);

  /* Toggles (checkboxes, radios, switches) */
  --zn-toggle-size-small: 0.875rem; // 14px
  --zn-toggle-size-medium: 1.125rem; // 18px
  --zn-toggle-size-large: 1.375rem; // 22px

  --zn-overlay-background-color: hsl(none 0% 0% / 0.7);

  /* Panels */
  --zn-panel-background-color: var(--zn-color-neutral-0);
  --zn-panel-border-color: var(--zn-color-neutral-200);
  --zn-panel-border-width: 1px;

  --zn-tooltip-border-radius: var(--zn-border-radius);
  --zn-tooltip-background-color: var(--zn-color-neutral-900);
  --zn-tooltip-color: var(--zn-color-neutral-0);
  --zn-tooltip-font-family: var(--zn-font-sans);
  --zn-tooltip-font-weight: var(--zn-font-weight-normal);
  --zn-tooltip-font-size: var(--zn-font-size-small);
  --zn-tooltip-line-height: var(--zn-line-height-dense);
  --zn-tooltip-padding: var(--zn-spacing-x-small) var(--zn-spacing-small);
  --zn-tooltip-arrow-size: 6px;

  /* Z-indexes */
  --zn-z-index-page-nav: 500;
  --zn-z-index-drawer: 700;
  --zn-z-index-dialog: 800;
  --zn-z-index-dropdown: 900;
  --zn-z-index-toast: 950;
  --zn-z-index-tooltip: 1000;
  --zn-z-index-editor-action: 1000000;


  /* tables */
  --zn-table-header-background-color: 252, 251, 254;
}