@import url("https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=JetBrains+Mono:wght@400;500&display=swap");

:root {

  --id-primary-50:  #EBF6FB;
  --id-primary-100: #D1EAF7;
  --id-primary-200: #A3D5EE;
  --id-primary-300: #6BBCE4;
  --id-primary-400: #33A2D9;
  --id-primary-500: #008BD0;
  --id-primary-600: #0178B5;
  --id-primary-700: #036699;
  --id-primary-800: #04527C;
  --id-primary-900: #053F60;
  --id-primary: var(--id-primary-500);
  --id-on-primary: #FFFFFF;

  --id-secondary-50:  #F0F1F2;
  --id-secondary-100: #DCDFE1;
  --id-secondary-200: #BABEC4;
  --id-secondary-300: #8F97A0;
  --id-secondary-400: #656F7C;
  --id-secondary-500: #3E4B5B;
  --id-secondary-600: #35414F;
  --id-secondary-700: #2D3744;
  --id-secondary-800: #242D38;
  --id-secondary-900: #1A222C;
  --id-secondary: var(--id-secondary-500);
  --id-on-secondary: #FFFFFF;

  --id-neutral-50:  #F3F4F6;
  --id-neutral-100: #E3E6EA;
  --id-neutral-200: #C7CDD5;
  --id-neutral-300: #A5AEBC;
  --id-neutral-400: #8390A2;
  --id-neutral-500: #64748B;
  --id-neutral-600: #546276;
  --id-neutral-700: #445060;
  --id-neutral-800: #333C4A;
  --id-neutral-900: #222933;

  --id-success-50:  #EEF7F2;
  --id-success-100: #D9EDE1;
  --id-success-500: #2E9B5B;
  --id-success-600: #288A51;
  --id-success-700: #227846;
  --id-success: var(--id-success-500);

  --id-warning-50:  #FDF7EB;
  --id-warning-100: #F9EED2;
  --id-warning-500: #E0A106;
  --id-warning-600: #C88F05;
  --id-warning-700: #B07E05;
  --id-warning: var(--id-warning-500);

  --id-error-50:  #FCF0F0;
  --id-error-100: #F8DEDE;
  --id-error-500: #D64545;
  --id-error-600: #BD3C3C;
  --id-error-700: #A43333;
  --id-error: var(--id-error-500);

  --id-info-50:  #ECF8FB;
  --id-info-100: #D4EFF5;
  --id-info-500: #0EA5C9;
  --id-info-600: #0C91B1;
  --id-info-700: #0B7D99;
  --id-info: var(--id-info-500);

  --id-cat-1: #008BD0;
  --id-cat-2: #15B5A6;
  --id-cat-3: #7C6BE6;
  --id-cat-4: #E8A33D;
  --id-cat-5: #E26D9B;
  --id-cat-6: #2FB57C;
  --id-cat-7: #5B74E0;
  --id-cat-8: #E76A5B;

  --id-background:        #F5F7FA;
  --id-surface:           #FFFFFF;
  --id-surface-2:         #F8FAFC;
  --id-surface-inverse:   #1A222C;
  --id-border:            #E2E7EC;
  --id-border-strong:     #CBD3DC;
  --id-divider:           #EDF0F3;

  --id-text-primary:      #1A222C;
  --id-text-secondary:    #51606F;
  --id-text-disabled:     #9AA6B2;
  --id-text-on-color:     #FFFFFF;

  --id-action-hover:      rgba(0,139,208,0.08);
  --id-action-selected:   rgba(0,139,208,0.12);
  --id-action-disabled-bg:#EEF1F4;
  --id-overlay:           rgba(16,26,38,0.48);

  --id-muted:             #F4F6F9;
  --id-muted-foreground:  #6B7886;
  --id-ring:              rgba(0,139,208,0.40);
  --id-card:              #FFFFFF;

  --id-space-0: 0px;
  --id-space-1: 4px;
  --id-space-2: 8px;
  --id-space-3: 12px;
  --id-space-4: 16px;
  --id-space-5: 20px;
  --id-space-6: 24px;
  --id-space-8: 32px;
  --id-space-10: 40px;
  --id-space-12: 48px;
  --id-space-16: 64px;
  --id-space-20: 80px;

  --id-radius-xs: 2px;
  --id-radius-sm: 4px;
  --id-radius-md: 6px;
  --id-radius-lg: 10px;
  --id-radius-xl: 16px;
  --id-radius-pill: 999px;
  --id-radius-card: 12px;
  --id-radius-default: var(--id-radius-md);

  --id-elevation-none: none;
  --id-elevation-low:  0 1px 2px rgba(16,24,40,0.05);
  --id-elevation-med:  0 1px 3px rgba(16,24,40,0.10), 0 1px 2px -1px rgba(16,24,40,0.08);
  --id-elevation-high: 0 12px 28px rgba(16,24,40,0.14), 0 8px 10px -6px rgba(16,24,40,0.10);

  --id-font-sans: "Jost", "Segoe UI", system-ui, -apple-system, sans-serif;
  --id-font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  --id-weight-light: 300;
  --id-weight-regular: 400;
  --id-weight-medium: 500;
  --id-weight-semibold: 600;
  --id-weight-bold: 700;

  --id-appbar-height: 64px;
  --id-drawer-width: 264px;
  --id-drawer-mini: 72px;
  --id-content-max: 1440px;
}

[data-theme="dark"] {

  --id-background:        #051522;
  --id-surface:           #0A2030;
  --id-surface-2:         #0F2A3D;
  --id-surface-inverse:   #EAF4FA;
  --id-border:            #163348;
  --id-border-strong:     #21455F;
  --id-divider:           #0E2536;

  --id-text-primary:      #EAF4FA;
  --id-text-secondary:    #93AFC2;
  --id-text-disabled:     #56707F;
  --id-text-on-color:     #FFFFFF;

  --id-primary:           #33A2D9;
  --id-on-primary:        #04253A;

  --id-action-hover:      rgba(51,162,217,0.12);
  --id-action-selected:   rgba(51,162,217,0.18);
  --id-action-disabled-bg:#1C2630;
  --id-overlay:           rgba(6,11,16,0.64);

  --id-muted:             #0E2536;
  --id-muted-foreground:  #8AA6BA;
  --id-ring:              rgba(51,162,217,0.45);
  --id-card:              #0A2030;

  --id-cat-1: #33A2D9;
  --id-cat-2: #2BC6B5;
  --id-cat-3: #9384EE;
  --id-cat-4: #EEB454;
  --id-cat-5: #ED85AC;
  --id-cat-6: #45C58C;
  --id-cat-7: #7B8FEA;
  --id-cat-8: #ED8273;

  --id-elevation-low:  0 1px 2px rgba(0,0,0,0.40);
  --id-elevation-med:  0 1px 3px rgba(0,0,0,0.50), 0 1px 2px -1px rgba(0,0,0,0.40);
  --id-elevation-high: 0 12px 28px rgba(0,0,0,0.55), 0 8px 10px -6px rgba(0,0,0,0.5);
}

.id-display-lg { font: var(--id-weight-semibold) 57px/1.05 var(--id-font-sans); letter-spacing: -1px; }
.id-display-md { font: var(--id-weight-semibold) 45px/1.10 var(--id-font-sans); letter-spacing: -0.5px; }
.id-display-sm { font: var(--id-weight-semibold) 36px/1.15 var(--id-font-sans); letter-spacing: -0.25px; }
.id-h1 { font: var(--id-weight-semibold) 32px/1.20 var(--id-font-sans); letter-spacing: -0.25px; }
.id-h2 { font: var(--id-weight-semibold) 28px/1.25 var(--id-font-sans); letter-spacing: 0; }
.id-h3 { font: var(--id-weight-medium) 24px/1.30 var(--id-font-sans); letter-spacing: 0; }
.id-h4 { font: var(--id-weight-medium) 20px/1.35 var(--id-font-sans); letter-spacing: 0; }
.id-h5 { font: var(--id-weight-medium) 18px/1.40 var(--id-font-sans); letter-spacing: 0; }
.id-h6 { font: var(--id-weight-semibold) 16px/1.45 var(--id-font-sans); letter-spacing: 0.1px; }
.id-body-lg { font: var(--id-weight-regular) 16px/1.55 var(--id-font-sans); letter-spacing: 0.1px; }
.id-body-md { font: var(--id-weight-regular) 14px/1.55 var(--id-font-sans); letter-spacing: 0.15px; }
.id-body-sm { font: var(--id-weight-regular) 13px/1.50 var(--id-font-sans); letter-spacing: 0.15px; }
.id-caption { font: var(--id-weight-regular) 12px/1.40 var(--id-font-sans); letter-spacing: 0.3px; }
.id-overline { font: var(--id-weight-semibold) 11px/1.30 var(--id-font-sans); letter-spacing: 1px; text-transform: uppercase; }
.id-button-text { font: var(--id-weight-medium) 14px/1 var(--id-font-sans); letter-spacing: 0.4px; }

.id-root {
  font-family: var(--id-font-sans);
  color: var(--id-text-primary);
  background: var(--id-background);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}