/* =============================================================================
   Stellar Design System — Tokens
   Transcribed from @stellar/design-system/src/theme.scss
   ============================================================================= */

/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Inconsolata:wght@400;500;600;700&display=swap');

/* --------------------------------------------------------------------------
   Theme: LIGHT
   -------------------------------------------------------------------------- */
:root,
.sds-theme-light {
  color-scheme: light;

  /* Gray */
  --sds-clr-gray-01: #fcfcfc;
  --sds-clr-gray-02: #f8f8f8;
  --sds-clr-gray-03: #f3f3f3;
  --sds-clr-gray-04: #ededed;
  --sds-clr-gray-05: #e8e8e8;
  --sds-clr-gray-06: #e2e2e2;
  --sds-clr-gray-07: #dbdbdb;
  --sds-clr-gray-08: #c7c7c7;
  --sds-clr-gray-09: #8f8f8f;
  --sds-clr-gray-10: #858585;
  --sds-clr-gray-11: #6f6f6f;
  --sds-clr-gray-12: #171717;

  /* Lilac (primary brand accent) */
  --sds-clr-lilac-01: #fdfcfe;
  --sds-clr-lilac-02: #fbfaff;
  --sds-clr-lilac-03: #f5f2ff;
  --sds-clr-lilac-04: #ede9fe;
  --sds-clr-lilac-05: #e4defc;
  --sds-clr-lilac-06: #d7cff9;
  --sds-clr-lilac-07: #c4b8f3;
  --sds-clr-lilac-08: #aa99ec;
  --sds-clr-lilac-09: #6e56cf;
  --sds-clr-lilac-10: #644fc1;
  --sds-clr-lilac-11: #5746af;
  --sds-clr-lilac-12: #20134b;

  /* Base */
  --sds-clr-base-00: #ffffff;
  --sds-clr-base-01: #000000;
  --sds-clr-white:   #ffffff;

  /* Overlay */
  --sds-overlay-01: rgba(0, 0, 0, 0.1);
  --sds-overlay-02: rgba(0, 0, 0, 0.2);
  --sds-overlay-03: rgba(0, 0, 0, 0.3);
  --sds-overlay-04: rgba(0, 0, 0, 0.4);
  --sds-overlay-05: rgba(0, 0, 0, 0.5);
  --sds-overlay-06: rgba(0, 0, 0, 0.6);
  --sds-overlay-07: rgba(0, 0, 0, 0.7);
  --sds-overlay-08: rgba(0, 0, 0, 0.8);
  --sds-overlay-09: rgba(0, 0, 0, 0.9);
  --sds-overlay-10: rgba(0, 0, 0, 1);

  /* Green */
  --sds-clr-green-01:#fbfefc; --sds-clr-green-02:#f2fcf5; --sds-clr-green-03:#e9f9ee;
  --sds-clr-green-04:#ddf3e4; --sds-clr-green-05:#ccebd7; --sds-clr-green-06:#b4dfc4;
  --sds-clr-green-07:#92ceac; --sds-clr-green-08:#5bb98c; --sds-clr-green-09:#30a46c;
  --sds-clr-green-10:#299764; --sds-clr-green-11:#18794e; --sds-clr-green-12:#153226;

  /* Amber */
  --sds-clr-amber-01:#fefdfb; --sds-clr-amber-02:#fff9ed; --sds-clr-amber-03:#fff4d5;
  --sds-clr-amber-04:#ffecbc; --sds-clr-amber-05:#ffe3a2; --sds-clr-amber-06:#ffd386;
  --sds-clr-amber-07:#f3ba63; --sds-clr-amber-08:#ee9d2b; --sds-clr-amber-09:#ffb224;
  --sds-clr-amber-10:#ffa01c; --sds-clr-amber-11:#ad5700; --sds-clr-amber-12:#4e2009;

  /* Red */
  --sds-clr-red-01:#fffcfc; --sds-clr-red-02:#fff8f8; --sds-clr-red-03:#ffefef;
  --sds-clr-red-04:#ffe5e5; --sds-clr-red-05:#fdd8d8; --sds-clr-red-06:#f9c6c6;
  --sds-clr-red-07:#f3aeaf; --sds-clr-red-08:#eb9091; --sds-clr-red-09:#e5484d;
  --sds-clr-red-10:#dc3d43; --sds-clr-red-11:#cd2b31; --sds-clr-red-12:#381316;

  /* Gold */
  --sds-clr-gold-01:#fdfdf9; --sds-clr-gold-02:#fffce8; --sds-clr-gold-03:#fffbd1;
  --sds-clr-gold-04:#fff8bb; --sds-clr-gold-05:#fef2a4; --sds-clr-gold-06:#f9e68c;
  --sds-clr-gold-07:#efd36c; --sds-clr-gold-08:#ebbc00; --sds-clr-gold-09:#fdda24;
  --sds-clr-gold-10:#f7ce00; --sds-clr-gold-11:#946800; --sds-clr-gold-12:#35290f;

  /* Navy */
  --sds-clr-navy-01:#fdfdfe; --sds-clr-navy-02:#f8faff; --sds-clr-navy-03:#f0f4ff;
  --sds-clr-navy-04:#e6edfe; --sds-clr-navy-05:#d9e2fc; --sds-clr-navy-06:#c6d4f9;
  --sds-clr-navy-07:#aec0f5; --sds-clr-navy-08:#8da4ef; --sds-clr-navy-09:#3e63dd;
  --sds-clr-navy-10:#3a5ccc; --sds-clr-navy-11:#3451b2; --sds-clr-navy-12:#101d46;

  /* Teal */
  --sds-clr-teal-01:#fafdfe; --sds-clr-teal-02:#f2fcfd; --sds-clr-teal-03:#e7f9fb;
  --sds-clr-teal-04:#d8f3f6; --sds-clr-teal-05:#c4eaef; --sds-clr-teal-06:#aadee6;
  --sds-clr-teal-07:#84cdda; --sds-clr-teal-08:#3db9cf; --sds-clr-teal-09:#05a2c2;
  --sds-clr-teal-10:#0894b3; --sds-clr-teal-11:#0c7792; --sds-clr-teal-12:#04313c;

  /* Mint */
  --sds-clr-mint-01:#f9fefd; --sds-clr-mint-02:#effefa; --sds-clr-mint-03:#e1fbf4;
  --sds-clr-mint-04:#d2f7ed; --sds-clr-mint-05:#c0efe3; --sds-clr-mint-06:#a5e4d4;
  --sds-clr-mint-07:#7dd4c0; --sds-clr-mint-08:#40c4aa; --sds-clr-mint-09:#70e1c8;
  --sds-clr-mint-10:#69d9c1; --sds-clr-mint-11:#147d6f; --sds-clr-mint-12:#09342e;

  /* Lime */
  --sds-clr-lime-01:#fcfdfa; --sds-clr-lime-02:#f7fcf0; --sds-clr-lime-03:#eefadc;
  --sds-clr-lime-04:#e4f7c7; --sds-clr-lime-05:#d7f2b0; --sds-clr-lime-06:#c9e894;
  --sds-clr-lime-07:#b1d16a; --sds-clr-lime-08:#94ba2c; --sds-clr-lime-09:#99d52a;
  --sds-clr-lime-10:#93c926; --sds-clr-lime-11:#5d770d; --sds-clr-lime-12:#263209;

  /* Pink */
  --sds-clr-pink-01:#fffcfe; --sds-clr-pink-02:#fff7fc; --sds-clr-pink-03:#feeef8;
  --sds-clr-pink-04:#fce5f3; --sds-clr-pink-05:#f9d8ec; --sds-clr-pink-06:#f3c6e2;
  --sds-clr-pink-07:#ecadd4; --sds-clr-pink-08:#e38ec3; --sds-clr-pink-09:#d6409f;
  --sds-clr-pink-10:#d23197; --sds-clr-pink-11:#cd1d8d; --sds-clr-pink-12:#3b0a2a;

  /* Tooltip */
  --sds-clr-tooltip-background: #ededed;
  --sds-clr-tooltip-title: #161616;
  --sds-clr-tooltip-text: #505050;
  --sds-clr-tooltip-contrast-background: #171717;
  --sds-clr-tooltip-contrast-title: #fcfcfc;
  --sds-clr-tooltip-contrast-text: #c7c7c7;
}

/* --------------------------------------------------------------------------
   Theme: DARK
   -------------------------------------------------------------------------- */
.sds-theme-dark {
  color-scheme: dark;

  --sds-clr-gray-01:#161616; --sds-clr-gray-02:#1c1c1c; --sds-clr-gray-03:#232323;
  --sds-clr-gray-04:#282828; --sds-clr-gray-05:#2e2e2e; --sds-clr-gray-06:#343434;
  --sds-clr-gray-07:#3e3e3e; --sds-clr-gray-08:#505050; --sds-clr-gray-09:#707070;
  --sds-clr-gray-10:#7e7e7e; --sds-clr-gray-11:#a0a0a0; --sds-clr-gray-12:#ededed;

  --sds-clr-lilac-01:#17151f; --sds-clr-lilac-02:#1c172b; --sds-clr-lilac-03:#251e40;
  --sds-clr-lilac-04:#2c2250; --sds-clr-lilac-05:#32275f; --sds-clr-lilac-06:#392c72;
  --sds-clr-lilac-07:#443592; --sds-clr-lilac-08:#5842c3; --sds-clr-lilac-09:#6e56cf;
  --sds-clr-lilac-10:#7c66dc; --sds-clr-lilac-11:#9e8cfc; --sds-clr-lilac-12:#f1eefe;

  --sds-clr-base-00:#000000; --sds-clr-base-01:#ffffff;

  --sds-overlay-01: rgba(255,255,255,0.1);
  --sds-overlay-02: rgba(255,255,255,0.2);
  --sds-overlay-03: rgba(255,255,255,0.3);
  --sds-overlay-04: rgba(255,255,255,0.4);
  --sds-overlay-05: rgba(255,255,255,0.5);
  --sds-overlay-06: rgba(255,255,255,0.6);
  --sds-overlay-07: rgba(255,255,255,0.7);
  --sds-overlay-08: rgba(255,255,255,0.8);
  --sds-overlay-09: rgba(255,255,255,0.9);
  --sds-overlay-10: rgba(255,255,255,1);

  --sds-clr-green-01:#0d1912; --sds-clr-green-02:#0c1f17; --sds-clr-green-03:#0f291e;
  --sds-clr-green-04:#113123; --sds-clr-green-05:#133929; --sds-clr-green-06:#164430;
  --sds-clr-green-07:#1b543a; --sds-clr-green-08:#236e4a; --sds-clr-green-09:#30a46c;
  --sds-clr-green-10:#3cb179; --sds-clr-green-11:#4cc38a; --sds-clr-green-12:#e5fbeb;

  --sds-clr-amber-01:#1f1300; --sds-clr-amber-02:#271700; --sds-clr-amber-03:#341c00;
  --sds-clr-amber-04:#3f2200; --sds-clr-amber-05:#4a2900; --sds-clr-amber-06:#573300;
  --sds-clr-amber-07:#693f05; --sds-clr-amber-08:#824e00; --sds-clr-amber-09:#ffb224;
  --sds-clr-amber-10:#ffcb47; --sds-clr-amber-11:#f1a10d; --sds-clr-amber-12:#fef3dd;

  --sds-clr-red-01:#1f1315; --sds-clr-red-02:#291415; --sds-clr-red-03:#3c181a;
  --sds-clr-red-04:#481a1d; --sds-clr-red-05:#541b1f; --sds-clr-red-06:#671e22;
  --sds-clr-red-07:#822025; --sds-clr-red-08:#aa2429; --sds-clr-red-09:#e5484d;
  --sds-clr-red-10:#f2555a; --sds-clr-red-11:#ff6369; --sds-clr-red-12:#feecee;

  --sds-clr-gold-01:#1c1500; --sds-clr-gold-02:#221a00; --sds-clr-gold-03:#2c2100;
  --sds-clr-gold-04:#352800; --sds-clr-gold-05:#3e3000; --sds-clr-gold-06:#493c00;
  --sds-clr-gold-07:#594a05; --sds-clr-gold-08:#705e00; --sds-clr-gold-09:#fdda24;
  --sds-clr-gold-10:#ffef5c; --sds-clr-gold-11:#f0c000; --sds-clr-gold-12:#fffad1;

  --sds-clr-navy-01:#131620; --sds-clr-navy-02:#15192d; --sds-clr-navy-03:#192140;
  --sds-clr-navy-04:#1c274f; --sds-clr-navy-05:#1f2c5c; --sds-clr-navy-06:#22346e;
  --sds-clr-navy-07:#273e89; --sds-clr-navy-08:#2f4eb2; --sds-clr-navy-09:#3e63dd;
  --sds-clr-navy-10:#5373e7; --sds-clr-navy-11:#849dff; --sds-clr-navy-12:#eef1fd;

  --sds-clr-teal-01:#07191d; --sds-clr-teal-02:#061e24; --sds-clr-teal-03:#072830;
  --sds-clr-teal-04:#07303b; --sds-clr-teal-05:#073844; --sds-clr-teal-06:#064150;
  --sds-clr-teal-07:#045063; --sds-clr-teal-08:#00647d; --sds-clr-teal-09:#05a2c2;
  --sds-clr-teal-10:#00b1cc; --sds-clr-teal-11:#00c2d7; --sds-clr-teal-12:#e1f8fa;

  --sds-clr-mint-01:#081917; --sds-clr-mint-02:#05201e; --sds-clr-mint-03:#052926;
  --sds-clr-mint-04:#04312c; --sds-clr-mint-05:#033a34; --sds-clr-mint-06:#01453d;
  --sds-clr-mint-07:#00564a; --sds-clr-mint-08:#006d5b; --sds-clr-mint-09:#70e1c8;
  --sds-clr-mint-10:#95f3d9; --sds-clr-mint-11:#25d0ab; --sds-clr-mint-12:#e7fcf7;

  --sds-clr-lime-01:#141807; --sds-clr-lime-02:#181d08; --sds-clr-lime-03:#1e260d;
  --sds-clr-lime-04:#252e0f; --sds-clr-lime-05:#2b3711; --sds-clr-lime-06:#344213;
  --sds-clr-lime-07:#415215; --sds-clr-lime-08:#536716; --sds-clr-lime-09:#99d52a;
  --sds-clr-lime-10:#c4f042; --sds-clr-lime-11:#87be22; --sds-clr-lime-12:#effbdd;

  --sds-clr-pink-01:#1f121b; --sds-clr-pink-02:#271421; --sds-clr-pink-03:#3a182f;
  --sds-clr-pink-04:#451a37; --sds-clr-pink-05:#501b3f; --sds-clr-pink-06:#601d48;
  --sds-clr-pink-07:#7a1d5a; --sds-clr-pink-08:#a71873; --sds-clr-pink-09:#d6409f;
  --sds-clr-pink-10:#e34ba9; --sds-clr-pink-11:#f65cb6; --sds-clr-pink-12:#feebf7;

  --sds-clr-tooltip-background:#171717;
  --sds-clr-tooltip-title:#fcfcfc;
  --sds-clr-tooltip-text:#c7c7c7;
  --sds-clr-tooltip-contrast-background:#ededed;
  --sds-clr-tooltip-contrast-title:#161616;
  --sds-clr-tooltip-contrast-text:#505050;
}

/* --------------------------------------------------------------------------
   Shared: font, weight, sizing, animation, form-input tokens
   -------------------------------------------------------------------------- */
:root,
.sds-theme-light,
.sds-theme-dark {
  /* Font family */
  --sds-ff-heading:   "Inter", sans-serif;
  --sds-ff-base:      "Inter", sans-serif;
  --sds-ff-monospace: "Inconsolata", monospace;

  /* Font size */
  --sds-fs-primary:   16px;
  --sds-fs-secondary: 14px;

  /* Font weight */
  --sds-fw-light:     300;
  --sds-fw-regular:   400;
  --sds-fw-medium:    500;
  --sds-fw-semi-bold: 600;
  --sds-fw-bold:      700;

  /* Z-index */
  --sds-z-index-tooltip: 20;
  --sds-z-index-modal:   30;

  /* Opacity */
  --sds-opacity-disabled-button: 0.6;

  /* Layout */
  --sds-window-width-min:  360px;
  --sds-window-width-max:  1296px;
  --sds-window-height-min: 100vh;

  /* Animation */
  --sds-anim-transition-default: cubic-bezier(0.65, 0.05, 0.36, 1) 100ms;

  /* Form / input colors */
  --sds-input-color-border-default:       var(--sds-clr-gray-06);
  --sds-input-color-border-default-hover: var(--sds-clr-gray-06);
  --sds-input-color-border-default-focus: var(--sds-clr-gray-06);
  --sds-input-color-border-error:         var(--sds-clr-red-06);
  --sds-input-color-border-error-hover:   var(--sds-clr-red-06);
  --sds-input-color-border-error-focus:   var(--sds-clr-red-06);
  --sds-input-color-border-disabled:      var(--sds-clr-gray-07);
  --sds-input-color-background-default:   var(--sds-clr-gray-01);
  --sds-input-color-background-error:     var(--sds-clr-gray-01);
  --sds-input-color-background-disabled:  var(--sds-clr-gray-03);
  --sds-input-color-text-default:         var(--sds-clr-gray-12);
  --sds-input-color-text-placeholder:     var(--sds-clr-gray-11);
  --sds-input-color-text-disabled:        var(--sds-clr-gray-11);
  --sds-input-color-icon:                 var(--sds-clr-gray-11);
  --sds-input-box-shadow-color-default:   var(--sds-clr-gray-04);
  --sds-input-box-shadow-color-error:     var(--sds-clr-red-04);
}

/* --------------------------------------------------------------------------
   Base normalize
   -------------------------------------------------------------------------- */
* { box-sizing: border-box; }

.sds-theme-light,
.sds-theme-dark {
  font-family: var(--sds-ff-base);
  font-size: var(--sds-fs-primary);
  color: var(--sds-clr-gray-12);
  background-color: var(--sds-clr-gray-01);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  padding: 0;
}
