:root {
  // Colors
  --gin-color-title: #222330;
  --gin-color-text: #222330;
  --gin-color-text-light: #545560;

  --gin-color-focus: rgba(0, 125, 250, .6); // #059fad; //#00a590; //#0ba77d; //#2297c7;
  --gin-color-focus-border: rgba(0, 0, 0, .2); //rgb(0, 125, 250);
  --gin-color-focus-neutral-rgb: rgba(0, 0, 0, .4);

  --gin-color-disabled: #8d8d8d;
  --gin-color-disabled-bg: #eaeaea;
  --gin-color-disabled-border: #c2c2c2;

  --gin-color-warning: #d8b234;
  --gin-color-warning-light: #efcf64;
  --gin-bg-warning: #{mix(black, #efcf64, 60%)};
  --gin-bg-warning-light: rgba(226, 151, 0, .08);
  --gin-color-danger: #cc3d3d;
  --gin-color-danger-lightest: #fdd9d9;
  --gin-color-danger-light: #f39b9d;
  --gin-bg-danger: #{mix(black, #dc7f7f, 60%)};
  --gin-bg-danger-light: rgba(222, 117, 96, .1);
  --gin-color-green: #058260;
  --gin-color-green-light: #32cea4;
  --gin-color-green-lightest:  #{mix(white, #32cea4, 60%)};
  --gin-bg-green: #{mix(black, #32cea4, 60%)};
  --gin-bg-green-light: rgba(72, 171, 123, .1);
  --gin-color-info: #082538;
  --gin-color-info-light: #589ac5;
  --gin-bg-info: #{mix(black, #2d6c96, 60%)};

  --gin-color-contextual: var(--gin-color-text);
  --gin-color-contextual-text: #eee;

  // Background
  --gin-bg-input: #fff;
  --gin-bg-layer: #fff;
  --gin-bg-layer2: #edeff5;
  --gin-bg-layer3: #fff;
  --gin-bg-layer4: #e2e5ec;
  --gin-bg-secondary: var(--gin-bg-layer);
  --gin-bg-header: #eeeff3; //#e6e8ef;

  // Color pattern
  --gin-pattern: var(--gin-border-color);
  --gin-pattern-fallback: var(--gin-bg-layer2);
  --gin-pattern-square: .5rem;

  // Font
  --gin-font: Ginter, Inter, 'Helvetica Neue', BlinkMacSystemFont, -apple-system, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, sans-serif;

  // Font sizes
  --gin-font-size-xxs: .75rem;
  --gin-font-size-xs: small;
  --gin-font-size-s: .875rem;
  --gin-font-size: 1rem;
  --gin-font-size-m: var(--gin-font-size);
  --gin-font-size-l: 1.125rem;
  --gin-font-size-xl: 1.25rem;
  --gin-font-size-h3: 1.5rem;
  --gin-font-size-h2: 1.75rem;
  --gin-font-size-h1: 1.6rem;
  --gin-font-size-quote: 1.1em;

  // Font weights
  --gin-font-weight-normal: 400;
  --gin-font-weight-semibold: 525;
  --gin-font-weight-bold: 575;
  --gin-font-weight-heavy: 625;

  @include mq(medium) {
    --gin-font-size-h1: 1.8125rem;
    --gin-font-size-quote: 1.2em;
  }

  @include mq(ultra) {
    --gin-font-size-h1: 2.125rem;
  }

  // Spacings
  @each $name, $size in $ginSpacings {
    --gin-spacing-#{$name}: #{rem($size)};
  }

  // Icons
  --gin-icon-color: #414247;
  --gin-icon-size-close: 20px;
  --gin-icon-size-toolbar-secondary: 17px;
  --gin-icon-size-toolbar: 17px;
  --gin-icon-size-sidebar-toggle: 21px;

  @include mq(medium) {
    --gin-icon-size-toolbar: 20px;
  }

  // Border
  --gin-border-xxs: #{rem(2px)};
  --gin-border-xs: #{rem(4px)};
  --gin-border-s: #{rem(6px)};
  --gin-border-m: #{rem(8px)};
  --gin-border-l: #{rem(12px)};
  --gin-border-xl: #{rem(16px)};

  --gin-border-color: #d4d4d8;
  --gin-border-color-secondary: rgba(0, 0, 0, .08);
  --gin-border-color-layer: rgba(0, 0, 0, .08);
  --gin-border-color-layer2: #d4d4d8;
  --gin-border-color-table: rgba(0, 0, 0, .1);
  --gin-border-color-table-header: rgba(0, 0, 0, .2);
  --gin-border-color-form-element: #8E929C;

  // Transitions / Animations
  --gin-easing: cubic-bezier(.19, 1, .22, 1);
  --gin-transition: .15s var(--gin-easing);
  --gin-transition-fast: .3s var(--gin-easing);

  // Shadows
  --gin-shadow-l1: 0 1px 2px rgb(20 45 82 / 2%),
               0 3px 4px rgb(20 45 82 / 3%),
               0 5px 8px rgb(20 45 82 / 4%);
  --gin-shadow-l2: 0 1px 2px rgb(20 45 82 / 2%),
                0 3px 4px rgb(20 45 82 / 3%),
                0 5px 8px rgb(20 45 82 / 4%),
                0 20px 24px rgb(20 45 82 / 12%);

  // Sticky bar
  --gin-height-sticky: 72px;

  // Toolbar
  --gin-toolbar-width-collapsed: 66px;
  --gin-toolbar-width: 256px;
  --gin-toolbar-bg-level2: #edeff5;
  --gin-toolbar-bg-level3: #{rgba(#2c2d2f, .05)};

  // Sidebar
  --gin-sidebar-width: 320px;
  --gin-sidebar-offset: var(--gin-sidebar-width);
  @include mq(wide) {
    --gin-sidebar-width: 360px;
  }

  // Switch
  --gin-switch: #26a769; //#0e9888;

  // Buttons
  --gin-shadow-button: #00000033;
  --gin-color-button-text: #fff;
}

// Density spacings
@each $name, $density in $ginLayoutDensity {
  @if $name == 'default' {
    :root {
      @each $name, $size in $ginSpacings {
        --gin-spacing-density-#{$name}: #{rem($size * $density)};
      }
    }
  } @else {
    [data-gin-layout-density=#{$name}] {
      @each $name, $size in $ginSpacings {
        --gin-spacing-density-#{$name}: #{rem($size * $density)};
      }
    }
  }
}

.gin--dark-mode {
   // Text
   --gin-color-title: #fff;
   --gin-color-text: #d2d3d3;
   --gin-color-text-light: #9e9fa0;

  // Buttons
  --gin-shadow-button: rgba(#111, .9);
  --gin-color-button-text: #111;

  // Focus
  --gin-color-focus: rgb(81, 168, 255);
  --gin-color-focus-border: rgba(0, 0, 0, .8);
  --gin-color-focus-neutral-rgb: rgba(255, 255, 255, .8);

  // Disabled
  --gin-color-disabled: #646464;
  --gin-color-disabled-border: #646464;
  --gin-color-disabled-bg: #47474c;

  // Messages
  --gin-color-warning: #dec15f;
  --gin-bg-warning-light: rgba(222, 193, 95, .1);
  --gin-color-danger: #ce6060;
  --gin-color-danger-lightest: #483439;
  --gin-color-green: #32cea4;
  --gin-color-info: #559bca;

  // Input
  --gin-bg-input: var(--gin-bg-layer2);

  // Layers
  --gin-bg-app: #{$colorDarkAppBackground};
  --gin-bg-layer: #2A2A2D;
  --gin-bg-layer2: #3B3B3F;
  --gin-bg-layer3: #47474c;
  --gin-bg-layer4: #19191b;
  --gin-bg-secondary: var(--gin-bg-app);

  // Context
  --gin-color-contextual: var(--gin-bg-layer3);

  // Borders
  --gin-border-color: #43454a;
  --gin-border-color-secondary: rgba(255, 255, 255, .075);
  --gin-border-color-layer: rgba(0, 0, 0, .05);
  --gin-border-color-layer2: #76777B;
  --gin-border-color-table: #43454a;

  // Tabs
  --gin-border-color-table-header: rgba(255, 255, 255, .12);

  // Form element
  --gin-border-color-form-element: var(--gin-border-color-layer2);

  // Table
  --gin-bg-header: #{$colorDarkAppBackground};

  // Toggle
  --gin-switch: var(--gin-color-primary);

  // Shadows
  --gin-shadow-l1: 0 1px 2px rgb(0 0 0 / 2%),
               0 3px 4px rgb(0 0 0 / 3%),
               0 5px 8px rgb(0 0 0 / 4%);
  --gin-shadow-l2: 0 1px 2px rgb(0 0 0 / 2%),
                0 3px 4px rgb(0 0 0 / 3%),
                0 5px 8px rgb(0 0 0 / 4%),
                0 20px 24px rgb(0 0 0 / 12%);

  // Icons
  --gin-icon-color: #888;

  // Color pattern
  --gin-pattern-fallback: var(--gin-bg-layer2);
  --gin-pattern: var(--gin-border-color);
}