/* Design System: Safe Trade System (Stitch) */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Open+Sans:ital,wght@0,400;0,600;0,700;0,800;1,400&family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap');

:root {
  /* Colors */
  --color-primary: #00236f;
  --color-primary-container: #1e3a8a;
  --color-on-primary: #ffffff;
  --color-on-primary-container: #90a8ff;
  --color-primary-fixed: #dce1ff;
  --color-primary-fixed-dim: #b6c4ff;
  --color-on-primary-fixed: #00164e;
  --color-on-primary-fixed-variant: #264191;

  --color-secondary: #006e2d;
  --color-secondary-container: #7cf994;
  --color-on-secondary: #ffffff;
  --color-on-secondary-container: #007230;
  --color-secondary-fixed: #7ffc97;
  --color-secondary-fixed-dim: #62df7d;
  --color-on-secondary-fixed: #002109;

  --color-tertiary: #5d0004;
  --color-tertiary-container: #87000a;
  --color-on-tertiary: #ffffff;
  --color-on-tertiary-container: #ff8b80;
  --color-tertiary-fixed: #ffdad6;
  --color-tertiary-fixed-dim: #ffb4ab;
  --color-on-tertiary-fixed: #410002;

  --color-error: #ba1a1a;
  --color-error-container: #ffdad6;
  --color-on-error: #ffffff;
  --color-on-error-container: #93000a;

  --color-background: #f7f9fb;
  --color-on-background: #191c1e;
  --color-surface: #f7f9fb;
  --color-surface-dim: #d8dadc;
  --color-surface-bright: #f7f9fb;
  --color-surface-variant: #e0e3e5;
  --color-on-surface: #191c1e;
  --color-on-surface-variant: #444651;

  --color-surface-container-lowest: #ffffff;
  --color-surface-container-low: #f2f4f6;
  --color-surface-container: #eceef0;
  --color-surface-container-high: #e6e8ea;
  --color-surface-container-highest: #e0e3e5;

  --color-outline: #757682;
  --color-outline-variant: #c5c5d3;
  --color-inverse-surface: #2d3133;
  --color-inverse-on-surface: #eff1f3;
  --color-inverse-primary: #b6c4ff;
  --color-surface-tint: #4059aa;

  /* Custom overrides from design theme */
  --income-green: #16a34a;
  --expense-red: #dc2626;

  /* Spacing */
  --space-stack-xs: 0.5rem;    /* 8px */
  --space-stack-sm: 1rem;      /* 16px */
  --space-stack-md: 1.5rem;    /* 24px */
  --space-stack-lg: 2rem;      /* 32px */
  --space-inline-gutter: 1rem; /* 16px */
  --space-container-margin: 1.25rem; /* 20px */
  --touch-target-min: 4rem;    /* 64px */

  /* Border radius */
  --radius-xs: 0.25rem;
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;

  /* Typography */
  --font-headline: 'Open Sans', system-ui, -apple-system, sans-serif;
  --font-body: 'Noto Sans', system-ui, -apple-system, sans-serif;
  --font-display-price: 'Open Sans', system-ui, -apple-system, sans-serif;

  /* Elevation */
  --shadow-sm: 0 1px 3px rgba(0, 35, 111, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 35, 111, 0.08);
  --shadow-lg: 0 8px 24px rgba(0, 35, 111, 0.12);
  --shadow-xl: 0 16px 36px rgba(0, 35, 111, 0.16);
}

/* Material Symbols configuration */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}

.material-symbols-outlined.fill-1,
[data-weight="fill"] {
  font-variation-settings: 'FILL' 1, 'wght' 600, 'GRAD' 0, 'opsz' 24;
}