:root {
    --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-solid-style="plastic"] {
    --solid-inset-distance: -1rem;
    --solid-inset-size:      1rem;
    --solid-border-width:    1px;
}

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

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

[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="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);

    --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="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);

    --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="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);

    --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-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);

    --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-theme="dark"] {
    --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-1000);
    --brand-on-background-weak:   var(--function-brand-800);

    --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-1000);
    --accent-on-background-weak:   var(--function-accent-800);
  
    --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-1000);
    --neutral-on-background-weak:   var(--function-neutral-800);
  
    --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-1000);
    --info-on-background-weak:   var(--function-info-800);
  
    --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-1000);
    --warning-on-background-weak:   var(--function-warning-800);
  
    --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-1000);
    --danger-on-background-weak:   var(--function-danger-800);
  
    --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-1000);
    --success-on-background-weak:   var(--function-success-800);
  
    --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"] {
    --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-300);
    --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-300);
    --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-300);
    --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-300);
    --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-300);
    --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-300);
    --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-300);
    --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);
}