:root {
  /**
  * ## Default theme
  */

  /*### Default font settings */

  /*#### Font families */
  --font-family-sans: 'Nunito', sans-serif;

  /*#### Font sizes */
  /*scaling from rem is "more accessible" than setting px sizes directly */
  --font-size-xx-small: 0.6875rem; /* 11px */
  --font-size-x-small: 0.75rem; /* 12px */
  --font-size-small: 0.875rem; /* 14px */
  --font-size-regular: 1rem; /* 16px */
  --font-size-large: 1.125rem; /* 18px */
  --font-size-x-large: 1.3125rem; /* 21px */
  --font-size-xx-large: 1.5rem; /* 24px */
  --font-size-xxx-large: 1.875rem; /* 30px */

  /*### Default dimensions */

  /*#### radii */
  --dim-radius-x-small: 2px;
  --dim-radius-small: 5px;
  --dim-radius-medium: 16px;
  --dim-radius-large: 22px;
  --dim-radius-dynamic: min(20%, var(--dim-radius-medium));
  --dim-radius-full: 100vmax;

  /*#### padding */
  --dim-padding-xx-small: 2px;
  --dim-padding-x-small: 4px;
  --dim-padding-small: 8px;
  --dim-padding-medium: 12px;
  --dim-padding-large: 16px;
  --dim-padding-x-large: 20px;
  --dim-padding-xx-large: 24px;

  /*#### gaps */
  --dim-gap-x-small: 4px;
  --dim-gap-small: 8px;
  --dim-gap-medium: 16px;
  --dim-gap-large: 24px;
  --dim-gap-x-large: 32px;
  --dim-gap-xx-large: 64px;

  /*### Default colors */

  /*#### utility colors */
  --color-shadow: #00000040;
  --color-contrast: #ffffff;
  --color-flag: #49454f;
  --color-backdrop: #00000080;

  /*#### bkgnd colors */
  --color-bkgnd-body: #f5f5f5;
  --color-bkgnd-content: #ffffff;

  /*#### primary colors */
  --color-primary-bkgnd: #c5f2ff;
  --color-primary-fill: #0098c5;
  --color-primary-label: #17587a;
  --color-primary-contrast: var(--color-contrast);
  --color-primary-border: var(--color-primary-fill);
  --color-primary-gradient: linear-gradient(
    to right top,
    var(--color-primary-fill) 0%,
    var(--color-primary-label) 100%
  );

  /*#### secondary colors */
  --color-secondary-bkgnd: #c3d9e1;
  --color-secondary-fill: #4b8195;
  --color-secondary-label: #006f9a;
  --color-secondary-contrast: var(--color-contrast);
  --color-secondary-border: var(--color-secondary-fill);
  --color-secondary-gradient: linear-gradient(
    to right top,
    var(--color-secondary-fill) 0%,
    var(--color-secondary-label) 100%
  );

  /*#### emphasize colors */
  --color-em-bkgnd: #fbcd84;
  --color-em-fill: #f7a724;
  --color-em-label: #f69d0b;
  --color-em-contrast: var(--color-contrast);
  --color-em-border: var(--color-em-fill);
  --color-em-gradient: linear-gradient(to right top, var(--color-em-fill) 0%, var(--color-em-label) 100%);

  /*#### neutral colors */
  --color-neutral-bkgnd: #f2f2f2;
  --color-neutral-fill: #e6e6e6;
  --color-neutral-label: #999999;
  --color-neutral-contrast: #202020;
  --color-neutral-border: var(--color-neutral-fill);
  --color-neutral-gradient: linear-gradient(
    to right top,
    var(--color-neutral-fill) 0%,
    var(--color-neutral-label) 100%
  );

  /*#### disabled colors */
  --color-disabled-bkgnd: #f2f2f280;
  --color-disabled-fill: #e6e6e680;
  --color-disabled-label: #99999980;
  --color-disabled-contrast: #20202080;
  --color-disabled-border: var(--color-disabled-fill);

  /*#### text colors */
  --color-text-regular: #202020;
  --color-text-comment: #b3b3b3;
  --color-text-placeholder: #d9d9d9;

  /*#### reference colors */
  --color-reference-fill: #5b90a4;
  --color-reference-label: #2f4b56;
  --color-reference-contrast: var(--color-contrast);

  /*#### status colors */
  --color-status-pending: #9d2a5e;
  --color-status-in-progress: #00665f;
  --color-status-overdue: #c70000;
  --color-status-complete: #82bf40;
  --color-status-paused: #808080;
  --color-status-archived: #404040;

  /*#### alert colors */
  --color-alert-warning-fill: #f7a724;
  --color-alert-warning-label: #f69d0b;
  --color-alert-danger-fill: #c70000;
  --color-alert-danger-label: #940000;
  --color-alert-success-fill: #82bf40;
  --color-alert-success-label: #4e7a1f;
  --color-alert-contrast: var(--color-contrast);
}

/**
 * Dark mode overrides
 */
@media (prefers-color-scheme: dark) {
  :root {
    /* Invert background colors */
    --color-bkgnd-body: #1a1a1a;
    --color-bkgnd-content: #2d2d2d;

    /* Text colors */
    --color-text-regular: #e6e6e6;
    --color-text-comment: #808080;
    --color-text-placeholder: #404040;

    /* emphasize colors */
    --color-em-bkgnd: #d58607;
    --color-em-fill: #f7a724;
    --color-em-label: #fbcd84;
    --color-em-border: var(--color-em-fill);
    --color-em-gradient: linear-gradient(to right top, var(--color-em-fill) 0%, var(--color-em-label) 100%);

    /* Neutral colors with reduced brightness */
    --color-neutral-bkgnd: #333333;
    --color-neutral-fill: #404040;
    --color-neutral-label: #666666;
    --color-neutral-contrast: #e6e6e6;
    --color-neutral-border: #404040;

    /* Utility colors */
    --color-shadow: #ffffff40;
    --color-contrast: #1a1a1a;
    --color-flag: #e6e1e5;
    --color-backdrop: #66666680;

    /* Adjust disabled colors for dark mode */
    --color-disabled-bkgnd: #33333380;
    --color-disabled-fill: #40404080;
    --color-disabled-label: #66666680;
    --color-disabled-contrast: #ffffff80;

    /* Status colors with increased saturation */
    --color-status-pending: #ff4d9e;
    --color-status-in-progress: #00ffef;
    --color-status-overdue: #ff4d4d;
    --color-status-complete: #9eff40;
    --color-status-paused: #bfbfbf;
    --color-status-archived: #808080;

    /* Alert colors with increased visibility */
    --color-alert-warning-bkgnd: #664d00;
    --color-alert-warning-fill: #ffbf00;
    --color-alert-warning-label: #ffd966;
    --color-alert-danger-bkgnd: #660000;
    --color-alert-danger-fill: #ff0000;
    --color-alert-danger-label: #ff6666;
    --color-alert-success-bkgnd: #215a08;
    --color-alert-success-fill: #82bf40;
    --color-alert-success-label: #b2d889;

    /* Primary/Secondary with adjusted contrast */
    --color-primary-bkgnd: #17587a;
    --color-primary-fill: #0098c5;
    --color-primary-label: #9ee9ff;
    --color-primary-gradient: linear-gradient(
      to right top,
      var(--color-primary-bkgnd) 0%,
      var(--color-primary-bkgnd) 100%
    );

    --color-secondary-bkgnd: #1f353d;
    --color-secondary-fill: #66b3cc;
    --color-secondary-label: #a6d5e6;
    --color-secondary-gradient: linear-gradient(
      to right top,
      var(--color-secondary-bkgnd) 0%,
      var(--color-secondary-bkgnd) 100%
    );
  }
}