:root {
    /* FONT FAMILY */
    --font-family-body:     var(--font-primary);
    --font-family-heading:  var(--font-secondary);
    --font-family-label:    var(--font-tertiary);
    --font-family-code:     var(--font-code);

    --font-size-heading-multiplier:   1;
    --font-size-body-multiplier:      1;
    --font-size-label-multiplier:     1;

    --line-height-heading-multiplier: 1;
    --line-height-body-multiplier:    1;
    --line-height-label-multiplier:   1;

    /* FONT SCALING */
    --font-scaling-desktop: 16px;
    --font-scaling-tablet:  15px;
    --font-scaling-mobile:  14px;

    --cursor-interactive:    pointer;

    --solid-inset-distance:  0;
    --solid-inset-size:      0;
    --solid-border-width:    0;
    --backdrop-filter:       none;
    --surface-border:        var(--static-transparent);
    --surface-background:    var(--neutral-background-medium);
}

[data-theme="dark"] {
    .dark-flex {
        display: flex;
    }

    .dark-grid {
        display: grid;
    }

    .light-flex {
        display: none;
    }

    .light-grid {
        display: none;
    }

    --icon: url('/trademark/icon-dark.svg');
    --type: url('/trademark/type-dark.svg');
    
    --page-background:              var(--neutral-background-weak);
    --backdrop:                     var(--static-black-medium);

    --solid-border-color-brand:     var(--brand-alpha-strong);
    --solid-border-color-neutral:   var(--neutral-alpha-strong);
    --solid-border-color-danger:    var(--danger-alpha-strong);

    /* code */
    --code-moss:                    var(--scheme-moss-800);
    --code-gray:                    var(--scheme-gray-800);
    --code-aqua:                    var(--scheme-aqua-800);
    --code-green:                   var(--scheme-green-800);
    --code-blue:                    var(--scheme-blue-800);
    --code-violet:                  var(--scheme-violet-800);
    --code-orange:                  var(--scheme-orange-800);

    /* brand */
    --brand-background-strong:      var(--function-brand-300);
    --brand-background-medium:      var(--function-brand-200);
    --brand-background-weak:        var(--function-brand-100);

    --brand-on-background-strong:   var(--static-white);
    --brand-on-background-medium:   var(--function-brand-900);
    --brand-on-background-weak:     var(--function-brand-700);

    --brand-border-strong:          var(--function-brand-400);
    --brand-border-medium:          var(--function-brand-300);
    --brand-border-weak:            var(--function-brand-200);
  
    --brand-alpha-strong:           var(--function-brand-600-50);
    --brand-alpha-medium:           var(--function-brand-600-30);
    --brand-alpha-weak:             var(--function-brand-600-10);

    /* accent */
    --accent-background-strong:     var(--function-accent-300);
    --accent-background-medium:     var(--function-accent-200);
    --accent-background-weak:       var(--function-accent-100);

    --accent-on-background-strong:  var(--static-white);
    --accent-on-background-medium:  var(--function-accent-900);
    --accent-on-background-weak:    var(--function-accent-700);
  
    --accent-solid-strong:          var(--function-accent-500);
    --accent-solid-medium:          var(--function-accent-400);
    --accent-solid-weak:            var(--function-accent-300);
  
    --accent-on-solid-strong:       var(--static-white);      
    --accent-on-solid-weak:         var(--function-accent-900);

    --accent-border-strong:         var(--function-accent-400);
    --accent-border-medium:         var(--function-accent-300);
    --accent-border-weak:           var(--function-accent-200);
  
    --accent-alpha-strong:          var(--function-accent-600-50);
    --accent-alpha-medium:          var(--function-accent-600-30);
    --accent-alpha-weak:            var(--function-accent-600-10);

    /* neutral */
    --neutral-background-strong:    var(--function-neutral-300);
    --neutral-background-medium:    var(--function-neutral-200);
    --neutral-background-weak:      var(--function-neutral-100);

    --neutral-on-background-strong: var(--static-white);
    --neutral-on-background-medium: var(--function-neutral-900);
    --neutral-on-background-weak:   var(--function-neutral-700);
  
    --neutral-solid-strong:         var(--function-neutral-500);
    --neutral-solid-medium:         var(--function-neutral-400);
    --neutral-solid-weak:           var(--function-neutral-300);
  
    --neutral-on-solid-strong:      var(--static-white);      
    --neutral-on-solid-weak:        var(--function-neutral-900);

    --neutral-border-strong:        var(--function-neutral-400);
    --neutral-border-medium:        var(--function-neutral-300);
    --neutral-border-weak:          var(--function-neutral-200);
  
    --neutral-alpha-strong:         var(--function-neutral-600-50);
    --neutral-alpha-medium:         var(--function-neutral-600-30);
    --neutral-alpha-weak:           var(--function-neutral-600-10);

    /* info */
    --info-background-strong:       var(--function-info-300);
    --info-background-medium:       var(--function-info-200);
    --info-background-weak:         var(--function-info-100);

    --info-on-background-strong:    var(--static-white);
    --info-on-background-medium:    var(--function-info-900);
    --info-on-background-weak:      var(--function-info-700);
  
    --info-solid-strong:            var(--function-info-500);
    --info-solid-medium:            var(--function-info-400);
    --info-solid-weak:              var(--function-info-300);
  
    --info-on-solid-strong:         var(--static-white);      
    --info-on-solid-weak:           var(--function-info-900);

    --info-border-strong:           var(--function-info-400);
    --info-border-medium:           var(--function-info-300);
    --info-border-weak:             var(--function-info-200);
  
    --info-alpha-strong:            var(--function-info-600-50);
    --info-alpha-medium:            var(--function-info-600-30);
    --info-alpha-weak:              var(--function-info-600-10);

    /* warning */
    --warning-background-strong:    var(--function-warning-300);
    --warning-background-medium:    var(--function-warning-200);
    --warning-background-weak:      var(--function-warning-100);

    --warning-on-background-strong: var(--static-white);
    --warning-on-background-medium: var(--function-warning-900);
    --warning-on-background-weak:   var(--function-warning-700);
  
    --warning-solid-strong:         var(--function-warning-500);
    --warning-solid-medium:         var(--function-warning-400);
    --warning-solid-weak:           var(--function-warning-300);
  
    --warning-on-solid-strong:      var(--static-white);      
    --warning-on-solid-weak:        var(--function-warning-900);

    --warning-border-strong:        var(--function-warning-400);
    --warning-border-medium:        var(--function-warning-300);
    --warning-border-weak:          var(--function-warning-200);
  
    --warning-alpha-strong:         var(--function-warning-600-50);
    --warning-alpha-medium:         var(--function-warning-600-30);
    --warning-alpha-weak:           var(--function-warning-600-10);

    /* danger */
    --danger-background-strong:     var(--function-danger-300);
    --danger-background-medium:     var(--function-danger-200);
    --danger-background-weak:       var(--function-danger-100);

    --danger-on-background-strong:  var(--static-white);
    --danger-on-background-medium:  var(--function-danger-900);
    --danger-on-background-weak:    var(--function-danger-700);
  
    --danger-solid-strong:          var(--function-danger-500);
    --danger-solid-medium:          var(--function-danger-400);
    --danger-solid-weak:            var(--function-danger-300);
  
    --danger-on-solid-strong:       var(--static-white);      
    --danger-on-solid-weak:         var(--function-danger-900);

    --danger-border-strong:         var(--function-danger-400);
    --danger-border-medium:         var(--function-danger-300);
    --danger-border-weak:           var(--function-danger-200);
  
    --danger-alpha-strong:          var(--function-danger-600-50);
    --danger-alpha-medium:          var(--function-danger-600-30);
    --danger-alpha-weak:            var(--function-danger-600-10);

    /* success */ 
    --success-background-strong:    var(--function-success-300);
    --success-background-medium:    var(--function-success-200);
    --success-background-weak:      var(--function-success-100);

    --success-on-background-strong: var(--static-white);
    --success-on-background-medium: var(--function-success-900);
    --success-on-background-weak:   var(--function-success-700);
  
    --success-solid-strong:         var(--function-success-500);
    --success-solid-medium:         var(--function-success-400);
    --success-solid-weak:           var(--function-success-300);
  
    --success-on-solid-strong:      var(--static-white);      
    --success-on-solid-weak:        var(--function-success-900);

    --success-border-strong:        var(--function-success-400);
    --success-border-medium:        var(--function-success-300);
    --success-border-weak:          var(--function-success-200);
  
    --success-alpha-strong:         var(--function-success-600-50);
    --success-alpha-medium:         var(--function-success-600-30);
    --success-alpha-weak:           var(--function-success-600-10);
}

[data-theme="light"] {
    .dark-flex {
        display: none;
    }

    .dark-grid {
        display: none;
    }

    .light-flex {
        display: flex;
    }

    .light-grid {
        display: grid;
    }

    --icon: url('/trademark/icon-light.svg');
    --type: url('/trademark/type-light.svg');

    --page-background:              var(--neutral-background-weak);
    --backdrop:                     var(--static-white-medium);

    --solid-border-color-brand:     var(--brand-alpha-strong);
    --solid-border-color-neutral:   var(--neutral-alpha-strong);
    --solid-border-color-danger:    var(--danger-alpha-strong);

    /* code */
    --code-moss:                    var(--scheme-moss-600);
    --code-gray:                    var(--scheme-gray-600);
    --code-aqua:                    var(--scheme-aqua-600);
    --code-green:                   var(--scheme-green-600);
    --code-blue:                    var(--scheme-blue-600);
    --code-violet:                  var(--scheme-violet-600);
    --code-orange:                  var(--scheme-orange-600);
    
    /* brand */  
    --brand-background-strong:      var(--function-brand-800);
    --brand-background-medium:      var(--function-brand-1000);
    --brand-background-weak:        var(--static-white);

    --brand-on-background-strong:   var(--function-brand-100);
    --brand-on-background-medium:   var(--function-brand-400);
    --brand-on-background-weak:     var(--function-brand-500);

    --brand-border-strong:          var(--function-brand-800);
    --brand-border-medium:          var(--function-brand-900);
    --brand-border-weak:            var(--function-brand-1000);
  
    --brand-alpha-strong:           var(--function-brand-600-50);
    --brand-alpha-medium:           var(--function-brand-600-30);
    --brand-alpha-weak:             var(--function-brand-600-10);
    
    /* accent */
    --accent-background-strong:     var(--function-accent-800);
    --accent-background-medium:     var(--function-accent-1000);
    --accent-background-weak:       var(--static-white);

    --accent-on-background-strong:  var(--function-accent-100);
    --accent-on-background-medium:  var(--function-accent-400);
    --accent-on-background-weak:    var(--function-accent-500);
  
    --accent-solid-strong:          var(--function-accent-600);
    --accent-solid-medium:          var(--function-accent-500);
    --accent-solid-weak:            var(--function-accent-400);
  
    --accent-on-solid-strong:       var(--static-white);      
    --accent-on-solid-weak:         var(--function-accent-1000);

    --accent-border-strong:         var(--function-accent-800);
    --accent-border-medium:         var(--function-accent-900);
    --accent-border-weak:           var(--function-accent-1000);
  
    --accent-alpha-strong:          var(--function-accent-600-50);
    --accent-alpha-medium:          var(--function-accent-600-30);
    --accent-alpha-weak:            var(--function-accent-600-10);

    /* neutral */
    --neutral-background-strong:    var(--function-neutral-800);
    --neutral-background-medium:    var(--function-neutral-1000);
    --neutral-background-weak:      var(--static-white);

    --neutral-on-background-strong: var(--function-neutral-100);
    --neutral-on-background-medium: var(--function-neutral-400);
    --neutral-on-background-weak:   var(--function-neutral-500);
  
    --neutral-solid-strong:         var(--function-neutral-600);
    --neutral-solid-medium:         var(--function-neutral-500);
    --neutral-solid-weak:           var(--function-neutral-400);
  
    --neutral-on-solid-strong:      var(--static-white);      
    --neutral-on-solid-weak:        var(--function-neutral-1000);

    --neutral-border-strong:        var(--function-neutral-800);
    --neutral-border-medium:        var(--function-neutral-900);
    --neutral-border-weak:          var(--function-neutral-1000);
  
    --neutral-alpha-strong:         var(--function-neutral-600-50);
    --neutral-alpha-medium:         var(--function-neutral-600-30);
    --neutral-alpha-weak:           var(--function-neutral-600-10);

    /* info */
    --info-background-strong:       var(--function-info-800);
    --info-background-medium:       var(--function-info-1000);
    --info-background-weak:         var(--static-white);

    --info-on-background-strong:    var(--function-info-100);
    --info-on-background-medium:    var(--function-info-400);
    --info-on-background-weak:      var(--function-info-500);
  
    --info-solid-strong:            var(--function-info-600);
    --info-solid-medium:            var(--function-info-500);
    --info-solid-weak:              var(--function-info-400);
  
    --info-on-solid-strong:         var(--static-white);      
    --info-on-solid-weak:           var(--function-info-1000);

    --info-border-strong:           var(--function-info-800);
    --info-border-medium:           var(--function-info-900);
    --info-border-weak:             var(--function-info-1000);
  
    --info-alpha-strong:            var(--function-info-600-50);
    --info-alpha-medium:            var(--function-info-600-30);
    --info-alpha-weak:              var(--function-info-600-10);

    /* warning */
    --warning-background-strong:    var(--function-warning-800);
    --warning-background-medium:    var(--function-warning-1000);
    --warning-background-weak:      var(--static-white);

    --warning-on-background-strong: var(--function-warning-100);
    --warning-on-background-medium: var(--function-warning-400);
    --warning-on-background-weak:   var(--function-warning-500);
  
    --warning-solid-strong:         var(--function-warning-600);
    --warning-solid-medium:         var(--function-warning-500);
    --warning-solid-weak:           var(--function-warning-400);
  
    --warning-on-solid-strong:      var(--static-white);      
    --warning-on-solid-weak:        var(--function-warning-1000);

    --warning-border-strong:        var(--function-warning-800);
    --warning-border-medium:        var(--function-warning-900);
    --warning-border-weak:          var(--function-warning-1000);
  
    --warning-alpha-strong:         var(--function-warning-600-50);
    --warning-alpha-medium:         var(--function-warning-600-30);
    --warning-alpha-weak:           var(--function-warning-600-10);
   
    /* danger */   
    --danger-background-strong:     var(--function-danger-800);
    --danger-background-medium:     var(--function-danger-1000);
    --danger-background-weak:       var(--static-white);

    --danger-on-background-strong:  var(--function-danger-100);
    --danger-on-background-medium:  var(--function-danger-400);
    --danger-on-background-weak:    var(--function-danger-500);
  
    --danger-solid-strong:          var(--function-danger-600);
    --danger-solid-medium:          var(--function-danger-500);
    --danger-solid-weak:            var(--function-danger-400);
  
    --danger-on-solid-strong:       var(--static-white);      
    --danger-on-solid-weak:         var(--function-danger-1000);

    --danger-border-strong:         var(--function-danger-800);
    --danger-border-medium:         var(--function-danger-900);
    --danger-border-weak:           var(--function-danger-1000);
  
    --danger-alpha-strong:          var(--function-danger-600-50);
    --danger-alpha-medium:          var(--function-danger-600-30);
    --danger-alpha-weak:            var(--function-danger-600-10);
   
    /* success */   
    --success-background-strong:    var(--function-success-800);
    --success-background-medium:    var(--function-success-1000);
    --success-background-weak:      var(--static-white);

    --success-on-background-strong: var(--function-success-100);
    --success-on-background-medium: var(--function-success-400);
    --success-on-background-weak:   var(--function-success-500);
  
    --success-solid-strong:         var(--function-success-600);
    --success-solid-medium:         var(--function-success-500);
    --success-solid-weak:           var(--function-success-400);
  
    --success-on-solid-strong:      var(--static-white);      
    --success-on-solid-weak:        var(--function-success-1000);

    --success-border-strong:        var(--function-success-800);
    --success-border-medium:        var(--function-success-900);
    --success-border-weak:          var(--function-success-1000);
  
    --success-alpha-strong:         var(--function-success-600-50);
    --success-alpha-medium:         var(--function-success-600-30);
    --success-alpha-weak:           var(--function-success-600-10);
}

[data-solid-style="plastic"] {
    --solid-inset-distance: -1rem;
    --solid-inset-size:      1rem;
    --solid-border-width:    1px;
}

[data-transition="all"],[data-transition="micro"] {
    --transition-eased:                  ease-in-out;
    --transition-property-all:           all;
    --transition-duration-micro-short:   0.1s;
    --transition-duration-micro-medium:  0.2s;
    --transition-duration-micro-long:    0.4s;
    --transition-micro-short:            var(--transition-property-all) var(--transition-duration-micro-short) var(--transition-eased);
    --transition-micro-medium:           var(--transition-property-all) var(--transition-duration-micro-medium) var(--transition-eased);
    --transition-micro-long:             var(--transition-property-all) var(--transition-duration-micro-long) var(--transition-eased);
}

[data-transition="all"],[data-transition="macro"] {
    --transition-eased:                  ease-in-out;
    --transition-property-all:           all;
    --transition-duration-macro-short:   0.15s;
    --transition-duration-macro-medium:  0.3s;
    --transition-duration-macro-long:    0.6s;
    --transition-macro-short:            var(--transition-property-all) var(--transition-duration-macro-short) var(--transition-eased);
    --transition-macro-medium:           var(--transition-property-all) var(--transition-duration-macro-medium) var(--transition-eased);
    --transition-macro-long:             var(--transition-property-all) var(--transition-duration-macro-long) var(--transition-eased);
}

[data-surface="translucent"] {
    --backdrop-filter: blur(1rem);
}

[data-surface="translucent"][data-theme="light"],
[data-surface="translucent"] [data-theme="light"] {
    --surface-background:    var(--static-white-medium);
    --surface-border:        var(--neutral-alpha-medium);
}

[data-surface="translucent"][data-theme="dark"],
[data-surface="translucent"] [data-theme="dark"] {
    --surface-background:    var(--static-black-medium);
    --surface-border:        var(--neutral-alpha-medium);
}

[data-surface="filled"][data-theme="light"],
[data-surface="filled"] [data-theme="light"] {
    --surface-background:    var(--neutral-background-weak);
    --surface-border:        var(--neutral-border-medium);
}

[data-surface="filled"][data-theme="dark"],
[data-surface="filled"] [data-theme="dark"] {
    --surface-background:    var(--neutral-background-medium);
    --surface-border:        var(--static-transparent);
}

[data-theme="dark"][data-solid="color"],
[data-theme="dark"] [data-solid="color"] {
    --brand-solid-strong:         var(--function-brand-500);
    --brand-solid-medium:         var(--function-brand-400);
    --brand-solid-weak:           var(--function-brand-300);

    --brand-on-solid-strong:      var(--static-white);      
    --brand-on-solid-weak:        var(--function-brand-900);
}

[data-theme="dark"][data-solid="contrast"],
[data-theme="dark"] [data-solid="contrast"] {
    --brand-solid-strong:         var(--function-neutral-1000);
    --brand-solid-medium:         var(--static-white);
    --brand-solid-weak:           var(--function-neutral-900);

    --brand-on-solid-strong:      var(--static-black);
    --brand-on-solid-weak:        var(--function-neutral-200);
}

[data-theme="dark"][data-solid="inverse"],
[data-theme="dark"] [data-solid="inverse"] {
    --brand-solid-strong:         var(--function-brand-800);
    --brand-solid-medium:         var(--function-brand-700);
    --brand-solid-weak:           var(--function-brand-600);

    --brand-on-solid-strong:      var(--static-black);      
    --brand-on-solid-weak:        var(--function-brand-200);
}

[data-theme="light"][data-solid="color"],
[data-theme="light"] [data-solid="color"] {
    --brand-solid-strong:         var(--function-brand-600);
    --brand-solid-medium:         var(--function-brand-500);
    --brand-solid-weak:           var(--function-brand-400);
  
    --brand-on-solid-strong:      var(--static-white);      
    --brand-on-solid-weak:        var(--function-brand-1000);
}

[data-theme="light"][data-solid="contrast"],
[data-theme="light"] [data-solid="contrast"] {
    --brand-solid-strong:         var(--function-neutral-300);
    --brand-solid-medium:         var(--static-black);
    --brand-solid-weak:           var(--function-neutral-400);
  
    --brand-on-solid-strong:      var(--static-white);      
    --brand-on-solid-weak:        var(--function-neutral-1000);
}


[data-solid="color"] {
    --solid-inset-color-brand:    var(--brand-alpha-strong);
    --solid-inset-color-neutral:  var(--static-transparent);
    --solid-inset-color-danger:   var(--danger-alpha-strong);
}

[data-solid="contrast"] {
    --solid-border-color-brand:   var(--neutral-alpha-strong);

    --solid-inset-color-brand:    var(--static-transparent);
    --solid-inset-color-neutral:  var(--static-transparent);
    --solid-inset-color-danger:   var(--danger-alpha-strong);
}

[data-solid="inverse"] {
    --solid-border-color-brand:   var(--brand-alpha-strong);

    --solid-inset-color-brand:    var(--brand-alpha-strong);
    --solid-inset-color-neutral:  var(--static-transparent);
    --solid-inset-color-danger:   var(--danger-alpha-strong);
}

[data-theme="light"][data-solid="inverse"],
[data-theme="light"] [data-solid="inverse"] {
    --brand-solid-strong:         var(--function-brand-900);
    --brand-solid-medium:         var(--function-brand-800);
    --brand-solid-weak:           var(--function-brand-700);
  
    --brand-on-solid-strong:      var(--static-black);      
    --brand-on-solid-weak:        var(--function-brand-200);
}