/**
 * Finanzio Design Tokens
 * Based on references/14-design-system.md
 */

:root {
  /* Neutrals */
  --neutral0: #FFFFFF;
  --neutral50: #FAFAFA;
  --neutral100: #F7F7F6;
  --neutral200: #F2F2F7;
  --neutral300: #E6E6E6;
  --neutral400: #D1D1D6;
  --neutral500: #9E9EA3;
  --neutral600: #6E6E73;
  --neutral700: #6C6C70;
  --neutral800: #3A3A3C;
  --neutral900: #1C1C1E;

  /* Semantic surface */
  --background: var(--neutral100);
  --backgroundSubtle: linear-gradient(180deg, var(--neutral50) 0%, var(--neutral100) 100%);
  --surface: var(--neutral0);
  --cardBackground: var(--neutral0);
  --border: var(--neutral300);
  --divider: var(--neutral300);

  /* Text */
  --textPrimary: var(--neutral900);
  --textSecondary: var(--neutral600);
  --textTertiary: var(--neutral500);
  --textDisabled: var(--neutral400);

  /* Accent */
  --accent: #1B8F5A;
  --accentPressed: #157A4D;
  --accentSubtle: rgba(27, 143, 90, 0.12);

  /* Semantic */
  --success: #1B8F5A;
  --warning: #F59E0B;
  --error: #DC2626;

  /* Opacity */
  --opacityDisabled: 0.38;
  --opacityOverlay: 0.6;
  --opacitySubtle: 0.12;

  /* Spacing */
  --spaceXxs: 2px;
  --spaceXs: 4px;
  --spaceSm: 8px;
  --spaceMd: 12px;
  --spaceLg: 16px;
  --spaceXl: 20px;
  --spaceXxl: 24px;
  --spaceHuge: 32px;
  --spaceMassive: 48px;
  --screenHorizontal: 16px;
  --cardPadding: 16px;
  --itemSpacing: 12px;
  --touchTargetMin: 44px;
  --touchTargetSpacing: 8px;

  /* Radius */
  --radiusCard: 16px;
  --radiusCardSmall: 12px;
  --radiusButton: 12px;
  --radiusChip: 12px;

  /* Elevation */
  --elevation0: none;
  --elevation1: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.04);
  --elevation2: 0 4px 12px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.06);
  --elevationButton: 0 2px 8px rgba(27, 143, 90, 0.25);

  /* Typography */
  --fontDisplay: 34px;
  --fontLargeTitle: 28px;
  --fontTitle1: 24px;
  --fontTitle2: 20px;
  --fontTitle3: 18px;
  --fontHeadline: 16px;
  --fontBody: 16px;
  --fontCallout: 15px;
  --fontSubheadline: 14px;
  --fontCaption1: 12px;
  --fontCaption2: 11px;
  --fontStack: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
  --lineHeightTight: 1.2;
  --lineHeightBody: 1.5;
  --lineHeightCaption: 1.3;

  /* Motion */
  --durationFast: 0.15s;
  --durationNormal: 0.25s;
  --durationMedium: 0.35s;
  --durationSlow: 0.5s;
  --easeSmooth: cubic-bezier(0.4, 0, 0.2, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--fontStack);
  background: var(--background);
  color: var(--textPrimary);
  line-height: var(--lineHeightBody);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Dark theme (Design E) */
[data-theme="dark"] {
  --neutral100: #0D0D0F;
  --neutral200: #1C1C1E;
  --neutral300: #2C2C2E;
  --neutral900: #F5F5F4;
  --background: var(--neutral100);
  --surface: var(--neutral200);
  --cardBackground: var(--neutral200);
  --textPrimary: var(--neutral900);
  --textSecondary: var(--neutral500);
  --textTertiary: var(--neutral600);
  --accent: #22A06B;
  --accentPressed: #1B8F5A;
  --elevation1: 0 0 0 1px rgba(255, 255, 255, 0.08);
  --elevation2: 0 0 0 1px rgba(255, 255, 255, 0.12);
}