@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:300; font-display:swap; src:url('fonts/ibm-plex-sans-300.woff2') format('woff2'); }
@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/ibm-plex-sans-400.woff2') format('woff2'); }
@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:600; font-display:swap; src:url('fonts/ibm-plex-sans-600.woff2') format('woff2'); }
@font-face { font-family:'IBM Plex Sans'; font-style:italic; font-weight:400; font-display:swap; src:url('fonts/ibm-plex-sans-italic-400.woff2') format('woff2'); }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/ibm-plex-mono-400.woff2') format('woff2'); }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:500; font-display:swap; src:url('fonts/ibm-plex-mono-500.woff2') format('woff2'); }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:600; font-display:swap; src:url('fonts/ibm-plex-mono-600.woff2') format('woff2'); }

:root {

  --bg:               #161616;
  --layer-01:         #262626;
  --layer-02:         #393939;
  --layer-03:         #525252;
  --layer-hover-01:   #333333;
  --layer-hover-02:   #474747;
  --layer-active-01:  #525252;

  --field-01:         #262626;
  --field-02:         #393939;

  --border-subtle:    #393939;
  --border-subtle-02: #525252;
  --border-strong:    #6f6f6f;
  --border-inverse:   #f4f4f4;
  --border-interactive: #42be65;

  --text-primary:     #f4f4f4;
  --text-secondary:   #c6c6c6;
  --text-helper:      #a8a8a8;
  --text-placeholder: rgba(244,244,244,0.4);
  --text-on-color:    #ffffff;
  --text-inverse:     #161616;
  --text-disabled:    rgba(244,244,244,0.25);

  --icon-primary:     #f4f4f4;
  --icon-secondary:   #c6c6c6;

  --focus:            #ffffff;
  --focus-inset:      #161616;

  --overlay:          rgba(0,0,0,0.6);

  --interactive:        #42be65;
  --link-primary:       #6fdc8c;
  --link-primary-hover: #a7f0ba;
  --link-visited:       #be95ff;

  --accent-on-light:       #006B32;

  --button-primary:        #00853E;
  --button-primary-hover:  #006b32;
  --button-primary-active: #005226;
  --button-secondary:       #6f6f6f;
  --button-secondary-hover: #5e5e5e;
  --button-tertiary:        #ffffff;
  --button-danger:          #da1e28;
  --button-danger-hover:    #b81921;

  --support-error:    #fa4d56;
  --support-success:  #42be65;
  --support-warning:  #f1c21b;
  --support-info:     #42be65;
  --support-caution-major: #ff832b;
  --support-caution-minor: #f1c21b;
  --text-error:       #ff8389;

  --bucket-core:      #7FA0BE;
  --bucket-occ:       #7FA678;
  --bucket-c1:        #BC6B52;
  --bucket-c2:        #A38AA0;
  --bucket-c3:        #B98A82;
  --bucket-unify:     #6FA39A;
  --ring-track:       rgba(244,244,244,0.14);

  --sig-fall:         #78a9ff;
  --sig-spring:       #08bdba;
  --sig-deprecated:   #ff8389;
  --sig-none:         #a8a8a8;
  --sig-risk:         #f1c21b;

  --sig-top:          #be95ff;
  --sig-tint:         rgba(244,244,244,0.05);

  --font:      'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', 'SF Mono', Menlo, 'Cascadia Code', monospace;

  --weight-display: 300;
  --weight-body:    400;
  --weight-label:   600;

  --track-display: -0.01em;
  --track-label:   0.32px;

  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;
  --radius-xl: 0;
  --radius-full: 9999px;

  --ease-productive: cubic-bezier(0.2, 0, 0.38, 0.9);
  --ease-expressive: cubic-bezier(0.4, 0.14, 0.3, 1);
  --ease-entrance:   cubic-bezier(0, 0, 0.3, 1);
  --ease-exit:       cubic-bezier(0.4, 0.14, 1, 1);
  --dur-fast-01:  70ms;
  --dur-fast-02:  110ms;
  --dur-moderate: 240ms;
  --dur-slow-01:  400ms;
  --dur-slow-02:  700ms;

  --s-01: 0.125rem; --s-02: 0.25rem; --s-03: 0.5rem;  --s-04: 0.75rem;
  --s-05: 1rem;     --s-06: 1.5rem;  --s-07: 2rem;    --s-08: 2.5rem;
  --s-09: 3rem;     --s-10: 4rem;    --s-11: 5rem;    --s-12: 6rem;
  --s-13: 10rem;

  --shadow-md: 0 1px 3px rgba(0,0,0,0.4);
  --shadow-lg: 0 4px 16px rgba(0,0,0,0.5);

  --bg-0:          var(--bg);
  --bg-1:          var(--layer-01);
  --bg-2:          var(--layer-02);

  --bg-3:          var(--layer-03);
  --bg-card:       var(--layer-01);
  --bg-card-hover: var(--layer-hover-01);

  --border:        var(--border-subtle);
  --border-hover:  var(--border-strong);

  --amber:         #42be65;
  --amber-bright:  #ffffff;
  --amber-dim:     rgba(66,190,101,0.16);
  --amber-glow:    rgba(66,190,101,0.20);

  --blue:      var(--bucket-core);
  --blue-dim:  rgba(127,160,190,0.14);

  --green:     var(--support-success);
  --green-dim: rgba(66,190,101,0.14);
  --red:       var(--bucket-c1);
  --red-dim:   rgba(188,107,82,0.14);
  --purple:    var(--bucket-c2);
  --purple-dim:rgba(163,138,160,0.14);
  --pink:      var(--bucket-c3);
  --pink-dim:  rgba(185,138,130,0.14);
  --teal:      var(--bucket-unify);
  --teal-dim:  rgba(111,163,154,0.14);

  --text-muted: var(--text-helper);

  --mono: var(--font-mono);

  --shadow-amber:    var(--shadow-md);
  --shadow-amber-lg: var(--shadow-lg);

  --transition:      var(--dur-fast-02) var(--ease-productive);
  --transition-slow: var(--dur-moderate) var(--ease-productive);

  --ease: var(--ease-expressive);
  --dur:  var(--dur-fast-02);
  --surface: var(--layer-01);
}

:root[data-accent="blue"],
:root:has(#accent-blue:checked) {
  --interactive:        #4589ff;
  --link-primary:       #78a9ff;
  --link-primary-hover: #a6c8ff;
  --link-visited:       #be95ff;
  --border-interactive: #4589ff;

  --button-primary:        #0f62fe;
  --button-primary-hover:  #0050e6;
  --button-primary-active: #002d9c;

  --support-info:       #4589ff;

  --accent-on-light:    #0f62fe;

  --sig-top:            #42be65;

  --amber:      #4589ff;
  --amber-dim:  rgba(69,137,255,0.16);
  --amber-glow: rgba(69,137,255,0.20);
}