/* Generated from 101 Design System */

:root {
  --border-radius-button: 8px;
  --border-radius-card: 16px;
  --border-radius-input: 8px;
  --border-radius-layout: 12px;
  --border-radius-pill: 999px;
  --border-width-default: 1px;
  --border-width-hairline: 0.5px;
  --border-width-strong: 2px;
  --motion-duration-default: 240ms;
  --motion-duration-fast: 160ms;
  --motion-duration-slow: 320ms;
  --motion-easing-default: cubic-bezier(0.2, 0, 0, 1);
  --motion-easing-enter: cubic-bezier(0, 0, 0.2, 1);
  --motion-easing-exit: cubic-bezier(0.4, 0, 1, 1);
  --opacity-low: 0.38;
  --opacity-medium: 0.62;
  --size-button-default: 32px;
  --size-button-large: 40px;
  --size-button-small: 24px;
  --size-card-height: 106px;
  --size-card-width: 640px;
  --size-field-large: 40px;
  --size-icon-default: 20px;
  --size-icon-large: 24px;
  --size-icon-small: 16px;
  --spacing-0: 0px;
  --spacing-2: 2px;
  --spacing-4: 4px;
  --spacing-6: 6px;
  --spacing-8: 8px;
  --spacing-10: 10px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-list-gap: 12px;
}

:root,
:root[data-theme="light"] {
  --color-accent-blue: #0088FF;
  --color-accent-default: #0E0E0F;
  --color-amount-negative: #E5352B;
  --color-amount-positive: #2FB350;
  --color-border-primary: #E8E8E8;
  --color-border-secondary: #C6C6C8;
  --color-event-agent-fee: #2B91A0;
  --color-event-dividends: #2D9CCF;
  --color-event-estimate: #6D43F6;
  --color-event-expense: #C4317A;
  --color-event-income: #6E8D44;
  --color-event-markup: #E58F09;
  --color-event-payment-own: #A65959;
  --color-event-payment-working: #C19810;
  --color-focus-ring: #0088FF;
  --color-highlighter: #3CD3FE61;
  --color-on-accent-primary: #ECECF1;
  --color-on-accent-secondary: #9F9FA5;
  --color-on-accent-tertiary: #5A5A5F;
  --color-overlay: #0000009E;
  --color-shadow-base: #00000029;
  --color-shadow-stroke: #00000029;
  --color-shadow-stroke-light: #00000008;
  --color-state-disabled: #7878809E;
  --color-state-hover: #0000000A;
  --color-state-on-accent-hover: #FFFFFF3D;
  --color-state-on-accent-pressed: #FFFFFF61;
  --color-state-pressed: #00000014;
  --color-state-selected: #0000000F;
  --color-static-black: #0E0E0F;
  --color-static-white: #FFFFFF;
  --color-status-error: #E5352B;
  --color-status-success: #2FB350;
  --color-status-warning: #E58F09;
  --color-surface-0: #EFEFEF;
  --color-surface-1: #F9F9F9;
  --color-surface-2: #FFFFFF;
  --color-surface-3: #FFFFFF;
  --color-text-primary: #2A2A2C;
  --color-text-quaternary: #DEDEE5;
  --color-text-secondary: #8A8A8E;
  --color-text-tertiary: #BBBBC1;
  --color-toast: #000000CC;
}

:root[data-theme="dark"] {
  --color-accent-blue: #0091FF;
  --color-accent-default: #FFFFFF;
  --color-amount-negative: #FF3B30;
  --color-amount-positive: #34C759;
  --color-border-primary: #222326;
  --color-border-secondary: #202022;
  --color-event-agent-fee: #2B91A0;
  --color-event-dividends: #32ADE6;
  --color-event-estimate: #6D43F6;
  --color-event-expense: #C4317A;
  --color-event-income: #6E8D44;
  --color-event-markup: #FF9F0A;
  --color-event-payment-own: #A65959;
  --color-event-payment-working: #C19810;
  --color-focus-ring: #0091FF;
  --color-highlighter: #3CD3FE78;
  --color-on-accent-primary: #1C1C1D;
  --color-on-accent-secondary: #8A8A8E;
  --color-on-accent-tertiary: #BBBBC1;
  --color-overlay: #00000061;
  --color-shadow-base: #00000029;
  --color-shadow-stroke: #FFFFFF21;
  --color-shadow-stroke-light: #FFFFFF05;
  --color-state-disabled: #78788080;
  --color-state-hover: #FFFFFF14;
  --color-state-on-accent-hover: #00000029;
  --color-state-on-accent-pressed: #0000003D;
  --color-state-pressed: #FFFFFF1F;
  --color-state-selected: #FFFFFF1A;
  --color-static-black: #0E0E0F;
  --color-static-white: #FFFFFF;
  --color-status-error: #FF3B30;
  --color-status-success: #34C759;
  --color-status-warning: #FF9F0A;
  --color-surface-0: #101010;
  --color-surface-1: #191919;
  --color-surface-2: #222222;
  --color-surface-3: #323232;
  --color-text-primary: #ECECF1;
  --color-text-quaternary: #303034;
  --color-text-secondary: #9F9FA5;
  --color-text-tertiary: #5A5A5F;
  --color-toast: #000000CC;
}

.text-body-medium {
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: normal;
  letter-spacing: calc(1em * 0 / 100);
  text-decoration-line: none;
  font-feature-settings: "lnum" 1, "tnum" 1;
}

.text-body-regular {
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: calc(1em * 0 / 100);
  text-decoration-line: none;
  font-feature-settings: "lnum" 1, "tnum" 1;
}

.text-footnote-medium {
  font-family: "Roboto", sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: normal;
  letter-spacing: calc(1em * 0 / 100);
  text-decoration-line: none;
  font-feature-settings: "lnum" 1, "tnum" 1;
}

.text-footnote-regular {
  font-family: "Roboto", sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: calc(1em * 0 / 100);
  text-decoration-line: none;
  font-feature-settings: "lnum" 1, "tnum" 1;
}

.text-subhead-medium {
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: normal;
  letter-spacing: calc(1em * 0 / 100);
  text-decoration-line: none;
  font-feature-settings: "lnum" 1, "tnum" 1;
}

.text-subhead-regular {
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: calc(1em * 0 / 100);
  text-decoration-line: none;
  font-feature-settings: "lnum" 1, "tnum" 1;
}

.text-title-medium {
  font-family: "Roboto", sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: normal;
  letter-spacing: calc(1em * 0 / 100);
  text-decoration-line: none;
}

.text-title-regular {
  font-family: "Roboto", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: calc(1em * 0 / 100);
  text-decoration-line: none;
}

.shadow {
  box-shadow:
    0px 0px 0px 0.5px var(--color-shadow-stroke),
    0px 2px 8px 2px var(--color-shadow-base);
}

.shadow-light {
  box-shadow: 0px 0px 0px 0.5px var(--color-shadow-stroke-light);
}