/* Inter, self-hosted (OFL). Four upright latin weights cover the system:
   400 body, 500/550 labels, 600 emphasis, 700 display numerals. */
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin-500-normal.woff2") format("woff2");
  font-weight: 500 550;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin-600-normal.woff2") format("woff2");
  font-weight: 600 650;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Color primitives (locked warm light master — friendly fintech) */
  --foinse-color-ink-900: #1C1917;
  --foinse-color-ink-700: #44403C;
  --foinse-color-ink-500: #78716C;
  --foinse-color-ink-300: #A8A29E;
  --foinse-color-rule-200: #E4DFD5;
  --foinse-color-rule-100: #F3F0EA;
  --foinse-color-paper: #FBFAF7;
  --foinse-color-surface-1: #FFFFFF;
  --foinse-color-accent: #1652F0;
  --foinse-color-accent-tint: #E8EFFC;
  --foinse-color-accent-hover: #3D6FF5;
  --foinse-color-accent-active: #0F41C9;
  --foinse-color-reserve: #0F9D58;
  --foinse-color-reserve-alpha-10: #E6F6EE;
  --foinse-color-reserve-hover: #2CB572;
  --foinse-color-reserve-active: #0B7A44;
  --foinse-color-reserve-tint: #E6F6EE;
  --foinse-color-caution: #D97706;
  --foinse-color-caution-tint: #FBF3E0;
  --foinse-color-error: #DC2626;
  --foinse-color-error-hover: #E5484D;
  --foinse-color-error-active: #B91C1C;
  --foinse-color-error-tint: #FDECEC;

  /* Surface and text roles */
  --foinse-surface-page: var(--foinse-color-paper);
  --foinse-surface-card: var(--foinse-color-surface-1);
  --foinse-surface-recessed: var(--foinse-color-rule-100);
  --foinse-surface-rule: var(--foinse-color-rule-200);
  --foinse-surface-rule-strong: var(--foinse-color-ink-300);
  --foinse-text-primary: var(--foinse-color-ink-900);
  --foinse-text-secondary: var(--foinse-color-ink-700);
  --foinse-text-muted: var(--foinse-color-ink-500);
  --foinse-text-disabled: var(--foinse-color-ink-300);
  --foinse-text-inverse: var(--foinse-color-surface-1);
  --foinse-text-link: var(--foinse-color-accent);
  --foinse-text-error: var(--foinse-color-error);
  --foinse-text-caution: var(--foinse-color-caution);
  --foinse-text-reserve: var(--foinse-color-reserve);

  /* Status roles */
  --foinse-status-reserve-fg: var(--foinse-color-reserve);
  --foinse-status-reserve-bg: var(--foinse-color-reserve-tint);
  --foinse-status-caution-fg: var(--foinse-color-caution);
  --foinse-status-caution-bg: var(--foinse-color-caution-tint);
  --foinse-status-error-fg: var(--foinse-color-error);
  --foinse-status-error-bg: var(--foinse-color-error-tint);
  --foinse-status-neutral-fg: var(--foinse-color-ink-700);
  --foinse-status-neutral-bg: var(--foinse-color-rule-100);

  /* Action roles */
  --foinse-action-primary-bg-default: var(--foinse-color-accent);
  --foinse-action-primary-bg-hover: var(--foinse-color-accent-hover);
  --foinse-action-primary-bg-active: var(--foinse-color-accent-active);
  --foinse-action-primary-fg: var(--foinse-color-surface-1);
  --foinse-action-secondary-bg-default: var(--foinse-color-ink-900);
  --foinse-action-secondary-bg-hover: var(--foinse-color-ink-700);
  --foinse-action-secondary-bg-active: var(--foinse-color-ink-900);
  --foinse-action-secondary-fg: var(--foinse-color-surface-1);
  --foinse-action-tertiary-bg-default: transparent;
  --foinse-action-tertiary-bg-hover: var(--foinse-color-rule-100);
  --foinse-action-tertiary-bg-active: var(--foinse-color-rule-200);
  --foinse-action-tertiary-fg: var(--foinse-color-ink-900);
  --foinse-action-reserve-bg-default: var(--foinse-color-reserve);
  --foinse-action-reserve-bg-hover: var(--foinse-color-reserve-hover);
  --foinse-action-reserve-bg-active: var(--foinse-color-reserve-active);
  --foinse-action-reserve-fg: var(--foinse-color-surface-1);
  --foinse-action-destructive-bg-default: var(--foinse-color-error);
  --foinse-action-destructive-bg-hover: var(--foinse-color-error-hover);
  --foinse-action-destructive-bg-active: var(--foinse-color-error-active);
  --foinse-action-destructive-fg: var(--foinse-color-surface-1);
  --foinse-action-disabled-bg: var(--foinse-color-ink-300);
  --foinse-action-disabled-fg: var(--foinse-color-surface-1);

  /* Font families and numeric behavior */
  --foinse-font-family-ui: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --foinse-font-family-mono: "Cascadia Mono", "SFMono-Regular", ui-monospace, Consolas, monospace;
  --foinse-font-weight-regular: 400;
  --foinse-font-weight-medium: 500;
  --foinse-font-weight-semibold: 600;
  --foinse-font-feature-numeric: tabular-nums lining-nums;

  /* Locked type roles */
  --foinse-font-size-display: 64px;
  --foinse-font-line-display: 68px;
  --foinse-font-size-heading-1: 44px;
  --foinse-font-line-heading-1: 50px;
  --foinse-font-size-heading-2: 28px;
  --foinse-font-line-heading-2: 36px;
  --foinse-font-size-heading-3: 18px;
  --foinse-font-line-heading-3: 24px;
  --foinse-font-size-body: 16px;
  --foinse-font-line-body: 24px;
  --foinse-font-size-label: 14px;
  --foinse-font-line-label: 20px;
  --foinse-font-size-mono: 16px;
  --foinse-font-line-mono: 24px;
  --foinse-font-size-market-price: 20px;
  --foinse-font-size-mobile-tab: 14px;
  --foinse-font-size-floor: 14px;

  /* Spacing */
  --foinse-space-0: 0;
  --foinse-space-1: 4px;
  --foinse-space-2: 8px;
  --foinse-space-3: 12px;
  --foinse-space-4: 16px;
  --foinse-space-5: 20px;
  --foinse-space-6: 24px;
  --foinse-space-8: 32px;
  --foinse-space-12: 48px;
  --foinse-space-16: 64px;
  --foinse-space-20: 80px;
  --foinse-space-24: 96px;
  --foinse-rhythm-section: var(--foinse-space-24);
  --foinse-rhythm-subsection: var(--foinse-space-16);
  --foinse-rhythm-heading-body: var(--foinse-space-6);

  /* Borders and radius */
  --foinse-border-width: 1px;
  --foinse-border-width-emphasis: 2px;
  --foinse-border-style: solid;
  --foinse-border-color: var(--foinse-color-rule-200);
  --foinse-border: var(--foinse-border-width) var(--foinse-border-style) var(--foinse-border-color);
  --foinse-radius-none: 0;
  --foinse-radius-badge: 4px;
  --foinse-radius-control: 8px;
  --foinse-radius-card: 16px;
  --foinse-elevation: none;

  /* Focus */
  --foinse-focus-color: var(--foinse-color-accent);
  --foinse-focus-width: 2px;
  --foinse-focus-offset: 2px;
  --foinse-focus-style: solid;
  --foinse-focus-ring: var(--foinse-focus-width) var(--foinse-focus-style) var(--foinse-focus-color);

  /* Motion */
  --foinse-motion-duration-ui: 120ms;
  --foinse-motion-duration-overlay: 200ms;
  --foinse-duration-ui: 120ms;
  --foinse-duration-overlay: 200ms;
  --foinse-motion-duration-balance: 200ms;
  --foinse-motion-duration-skeleton: 1.5s;
  --foinse-motion-duration-spinner: 700ms;
  --foinse-motion-duration-slow: 320ms;
  --foinse-motion-duration-skeleton-timeout: 5s;
  --foinse-motion-easing: cubic-bezier(0.2, 0, 0, 1);
  --foinse-motion-easing-exit: cubic-bezier(0.4, 0, 1, 1);
  --foinse-motion-easing-linear: linear;
  --foinse-opacity-skeleton: 0.8;

  /* Layout and view widths */
  --foinse-breakpoint-min: 320px;
  --foinse-breakpoint-xs: 390px;
  --foinse-breakpoint-foundation-sm: 480px;
  --foinse-breakpoint-sm: 640px;
  --foinse-breakpoint-md: 768px;
  --foinse-breakpoint-lg: 1024px;
  --foinse-breakpoint-wide: 1200px;
  --foinse-breakpoint-xl: 1280px;
  --foinse-breakpoint-2xl: 1440px;
  --foinse-breakpoint-max: 1920px;
  --foinse-container-max: 1200px;
  --foinse-container-content-at-390: 358px;
  --foinse-container-gutter-at-390: 16px;
  --foinse-container-gutter-at-640: 24px;
  --foinse-container-gutter-at-768: 48px;
  --foinse-container-gutter-at-1200: 80px;
  --foinse-content-max-prose: 720px;
  --foinse-content-max-docs: 1100px;
  --foinse-content-max-shell: 1120px;
  --foinse-content-nav-width: 260px;
  --foinse-content-measure: 80ch;

  /* Grid */
  --foinse-grid-columns-mobile: 4;
  --foinse-grid-columns-tablet: 8;
  --foinse-grid-columns-desktop: 12;
  --foinse-grid-gap-mobile: var(--foinse-space-4);
  --foinse-grid-gap-desktop: var(--foinse-space-6);

  /* Layer order */
  --foinse-z-base: 0;
  --foinse-z-dropdown: 10;
  --foinse-z-sticky: 20;
  --foinse-z-overlay: 30;
  --foinse-z-modal: 40;
  --foinse-z-toast: 50;

  /* Icon geometry */
  --foinse-icon-size-xs: 12px;
  --foinse-icon-size-copy: 14px;
  --foinse-icon-size-inline: 16px;
  --foinse-icon-size-compact: 20px;
  --foinse-icon-size-default: 24px;
  --foinse-icon-size-large: 32px;
  --foinse-icon-size-display: 48px;
  --foinse-icon-stroke-compact: 1.5px;
  --foinse-icon-stroke-large: 2px;
  --foinse-logo-min-width: 96px;
  --foinse-hit-area-touch: 44px;
  --foinse-hit-area-pointer: 40px;

  /* Component geometry */
  --foinse-button-height: 48px;
  --foinse-button-min-height: 48px;
  --foinse-button-padding-x: 16px;
  --foinse-button-radius: var(--foinse-radius-control);
  --foinse-button-label-size: var(--foinse-font-size-label);
  --foinse-button-label-line: var(--foinse-font-line-label);
  --foinse-button-label-weight: var(--foinse-font-weight-medium);
  --foinse-input-height: 48px;
  --foinse-input-padding-x: 16px;
  --foinse-input-radius: var(--foinse-radius-control);
  --foinse-textarea-min-height: 96px;
  --foinse-checkbox-size: 20px;
  --foinse-card-padding: 24px;
  --foinse-card-padding-mobile: 16px;
  --foinse-card-radius: var(--foinse-radius-card);
  --foinse-table-row-height: 48px;
  --foinse-table-row-height-mobile: 56px;
  --foinse-badge-padding-y: 4px;
  --foinse-badge-padding-x: 8px;
  --foinse-badge-radius: var(--foinse-radius-badge);
  --foinse-tab-progress-dot: 8px;
  --foinse-mobile-nav-height: 56px;
  --foinse-mobile-menu-row-height: 56px;
  --foinse-mobile-control-height: 48px;
  --foinse-mobile-filter-height: 40px;
  --foinse-mobile-page-bottom-padding: 72px;
  --foinse-mobile-sticky-scroll-padding: 96px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --foinse-motion-duration-ui: 0ms;
    --foinse-motion-duration-overlay: 0ms;
    --foinse-motion-duration-balance: 0ms;
    --foinse-motion-duration-skeleton: 0ms;
    --foinse-motion-duration-spinner: 0ms;
    --foinse-motion-duration-slow: 0ms;
  }
}