/* PFOS Design System — Pastel Confidence Theme */

/* ═══════════════════════════════════════════
   Google Fonts Import
   ═══════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Outfit:wght@400;500;600;700;800&display=swap');

/* ═══════════════════════════════════════════
   CSS Custom Properties (Design Tokens)
   ═══════════════════════════════════════════ */
:root {
  /* — Color Palette: Pastel Confidence — */
  --color-bg-primary: #F8F6F3;
  --color-bg-secondary: #FFFFFF;
  --color-bg-tertiary: #F0EDE8;
  --color-bg-elevated: #FFFFFF;
  --color-bg-overlay: rgba(45, 52, 54, 0.4);

  --color-accent-primary: #7C9CBF;
  --color-accent-primary-light: #A8C4DE;
  --color-accent-primary-dark: #5A7A9E;
  --color-accent-secondary: #A8D5BA;
  --color-accent-secondary-light: #C5E8D3;
  --color-accent-tertiary: #E8B4B8;
  --color-accent-gold: #D4A855;
  --color-accent-gold-light: #E8C88A;

  --color-income: #8BC49E;
  --color-income-bg: rgba(139, 196, 158, 0.12);
  --color-expense: #E0918E;
  --color-expense-bg: rgba(224, 145, 142, 0.12);
  --color-transfer: #9BB5D6;
  --color-transfer-bg: rgba(155, 181, 214, 0.12);

  --color-text-primary: #2D3436;
  --color-text-secondary: #636E72;
  --color-text-muted: #B2BEC3;
  --color-text-inverse: #FFFFFF;

  --color-success: #8BC49E;
  --color-success-bg: rgba(139, 196, 158, 0.15);
  --color-warning: #F0C27A;
  --color-warning-bg: rgba(240, 194, 122, 0.15);
  --color-danger: #E0918E;
  --color-danger-bg: rgba(224, 145, 142, 0.15);
  --color-info: #9BB5D6;
  --color-info-bg: rgba(155, 181, 214, 0.15);

  --color-border: rgba(0, 0, 0, 0.06);
  --color-border-strong: rgba(0, 0, 0, 0.12);
  --color-divider: rgba(0, 0, 0, 0.04);

  /* — Typography — */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Outfit', 'Inter', sans-serif;

  --fs-xs: 0.6875rem;   /* 11px */
  --fs-sm: 0.75rem;     /* 12px */
  --fs-base: 0.875rem;  /* 14px */
  --fs-md: 1rem;        /* 16px */
  --fs-lg: 1.125rem;    /* 18px */
  --fs-xl: 1.375rem;    /* 22px */
  --fs-2xl: 1.75rem;    /* 28px */
  --fs-3xl: 2.25rem;    /* 36px */

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  --lh-tight: 1.2;
  --lh-normal: 1.5;
  --lh-relaxed: 1.7;

  /* — Spacing — */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;

  /* — Borders — */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-full: 9999px;

  /* — Shadows — */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.03);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.02);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.06);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.08);
  --shadow-xl: 0 16px 48px rgba(0,0,0,0.1);
  --shadow-glow: 0 0 20px rgba(124, 156, 191, 0.2);
  --shadow-card: 0 2px 8px rgba(0,0,0,0.04), 0 0 1px rgba(0,0,0,0.06);

  /* — Transitions — */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;

  /* — Z-index — */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal-backdrop: 300;
  --z-modal: 400;
  --z-toast: 500;
  --z-tooltip: 600;

  /* — Layout — */
  --nav-height: 60px;
  --bottom-nav-height: 72px;
  --max-width: 480px;
  --sidebar-width: 280px;

  /* — Glassmorphism & Neumorphism — */
  --glass-bg: rgba(255, 255, 255, 0.55);
  --glass-border: rgba(255, 255, 255, 0.35);
  --glass-blur: 16px;
  --neu-shadow-light: rgba(255, 255, 255, 0.7);
  --neu-shadow-dark: rgba(0, 0, 0, 0.08);
  --neu-flat: 4px 4px 10px var(--neu-shadow-dark), -4px -4px 10px var(--neu-shadow-light);
  --neu-pressed: inset 3px 3px 6px var(--neu-shadow-dark), inset -3px -3px 6px var(--neu-shadow-light);
}

/* ═══════════════════════════════════════════
   THEME: Dark Mode — Midnight Blue
   ═══════════════════════════════════════════ */
[data-theme="dark"] {
  --color-bg-primary: #0F1729;
  --color-bg-secondary: #182036;
  --color-bg-tertiary: #1E2844;
  --color-bg-elevated: #243052;
  --color-bg-overlay: rgba(5, 8, 20, 0.65);

  --color-accent-primary: #6C9BD2;
  --color-accent-primary-light: #8FB8E8;
  --color-accent-primary-dark: #4A7AB8;
  --color-accent-secondary: #6DD5A0;
  --color-accent-secondary-light: #94E8BF;
  --color-accent-tertiary: #E89BA0;
  --color-accent-gold: #E8C364;
  --color-accent-gold-light: #F0D88E;

  --color-income: #6DD5A0;
  --color-income-bg: rgba(109, 213, 160, 0.12);
  --color-expense: #E89BA0;
  --color-expense-bg: rgba(232, 155, 160, 0.12);
  --color-transfer: #8BB5E0;
  --color-transfer-bg: rgba(139, 181, 224, 0.12);

  --color-text-primary: #E8ECF4;
  --color-text-secondary: #9AA5B8;
  --color-text-muted: #5C6880;
  --color-text-inverse: #0F1729;

  --color-success: #6DD5A0;
  --color-success-bg: rgba(109, 213, 160, 0.12);
  --color-warning: #E8C364;
  --color-warning-bg: rgba(232, 195, 100, 0.12);
  --color-danger: #E89BA0;
  --color-danger-bg: rgba(232, 155, 160, 0.12);
  --color-info: #8BB5E0;
  --color-info-bg: rgba(139, 181, 224, 0.12);

  --color-border: rgba(255, 255, 255, 0.06);
  --color-border-strong: rgba(255, 255, 255, 0.12);
  --color-divider: rgba(255, 255, 255, 0.04);

  --shadow-xs: 0 1px 2px rgba(0,0,0,0.15);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.2), 0 1px 2px rgba(0,0,0,0.1);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.25);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.3);
  --shadow-xl: 0 16px 48px rgba(0,0,0,0.35);
  --shadow-glow: 0 0 20px rgba(108, 155, 210, 0.25);
  --shadow-card: 0 2px 8px rgba(0,0,0,0.2), 0 0 1px rgba(255,255,255,0.05);

  --glass-bg: rgba(24, 32, 54, 0.65);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-blur: 20px;
  --neu-shadow-light: rgba(40, 52, 82, 0.6);
  --neu-shadow-dark: rgba(0, 0, 0, 0.4);
  --neu-flat: 4px 4px 10px var(--neu-shadow-dark), -4px -4px 10px var(--neu-shadow-light);
  --neu-pressed: inset 3px 3px 6px var(--neu-shadow-dark), inset -3px -3px 6px var(--neu-shadow-light);
}

/* ═══════════════════════════════════════════
   THEME: Light Mode — Matcha Green + Orange
   ═══════════════════════════════════════════ */
[data-theme="light"] {
  --color-bg-primary: #F4F8F0;
  --color-bg-secondary: #FFFFFF;
  --color-bg-tertiary: #EBF2E4;
  --color-bg-elevated: #FFFFFF;
  --color-bg-overlay: rgba(30, 45, 20, 0.35);

  --color-accent-primary: #6B9E5A;
  --color-accent-primary-light: #94C484;
  --color-accent-primary-dark: #4A7A3E;
  --color-accent-secondary: #E8944E;
  --color-accent-secondary-light: #F0B07A;
  --color-accent-tertiary: #E88B6E;
  --color-accent-gold: #E8A832;
  --color-accent-gold-light: #F0C268;

  --color-income: #6B9E5A;
  --color-income-bg: rgba(107, 158, 90, 0.12);
  --color-expense: #E88B6E;
  --color-expense-bg: rgba(232, 139, 110, 0.12);
  --color-transfer: #E8944E;
  --color-transfer-bg: rgba(232, 148, 78, 0.12);

  --color-text-primary: #2A3520;
  --color-text-secondary: #5A6B4A;
  --color-text-muted: #A0B090;
  --color-text-inverse: #FFFFFF;

  --color-success: #6B9E5A;
  --color-success-bg: rgba(107, 158, 90, 0.12);
  --color-warning: #E8A832;
  --color-warning-bg: rgba(232, 168, 50, 0.12);
  --color-danger: #E88B6E;
  --color-danger-bg: rgba(232, 139, 110, 0.12);
  --color-info: #5A8AC0;
  --color-info-bg: rgba(90, 138, 192, 0.12);

  --color-border: rgba(0, 0, 0, 0.06);
  --color-border-strong: rgba(0, 0, 0, 0.1);
  --color-divider: rgba(0, 0, 0, 0.04);

  --shadow-glow: 0 0 20px rgba(107, 158, 90, 0.2);
  --shadow-card: 0 2px 8px rgba(42, 53, 32, 0.06), 0 0 1px rgba(42, 53, 32, 0.08);

  --glass-bg: rgba(255, 255, 255, 0.6);
  --glass-border: rgba(255, 255, 255, 0.4);
  --glass-blur: 16px;
  --neu-shadow-light: rgba(255, 255, 255, 0.8);
  --neu-shadow-dark: rgba(42, 53, 32, 0.1);
  --neu-flat: 4px 4px 10px var(--neu-shadow-dark), -4px -4px 10px var(--neu-shadow-light);
}

/* ═══════════════════════════════════════════
   CSS Reset
   ═══════════════════════════════════════════ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-primary);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--color-text-primary);
  background-color: var(--color-bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  min-height: 100vh;
  min-height: 100dvh;
}

a { color: inherit; text-decoration: none; }
button { cursor: pointer; font: inherit; border: none; background: none; }
input, select, textarea { font: inherit; border: none; outline: none; background: none; }
ul, ol { list-style: none; }
img, svg { display: block; max-width: 100%; }
table { border-collapse: collapse; }

/* ═══════════════════════════════════════════
   Utility Classes
   ═══════════════════════════════════════════ */
.text-primary { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-muted { color: var(--color-text-muted); }
.text-accent { color: var(--color-accent-primary); }
.text-income { color: var(--color-income); }
.text-expense { color: var(--color-expense); }
.text-gold { color: var(--color-accent-gold); }

.fw-light { font-weight: var(--fw-light); }
.fw-medium { font-weight: var(--fw-medium); }
.fw-semibold { font-weight: var(--fw-semibold); }
.fw-bold { font-weight: var(--fw-bold); }

.fs-xs { font-size: var(--fs-xs); }
.fs-sm { font-size: var(--fs-sm); }
.fs-md { font-size: var(--fs-md); }
.fs-lg { font-size: var(--fs-lg); }
.fs-xl { font-size: var(--fs-xl); }
.fs-2xl { font-size: var(--fs-2xl); }

.text-center { text-align: center; }
.text-right { text-align: right; }

.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.gap-xs { gap: var(--space-xs); }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
.flex-1 { flex: 1; }

.grid { display: grid; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }

.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; clip: rect(0,0,0,0); overflow: hidden; }

.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-full { width: 100%; }
.relative { position: relative; }

.mt-xs { margin-top: var(--space-xs); }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mb-xs { margin-bottom: var(--space-xs); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }

.p-xs { padding: var(--space-xs); }
.p-sm { padding: var(--space-sm); }
.p-md { padding: var(--space-md); }
.p-lg { padding: var(--space-lg); }

/* Scrollbar styling */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--color-border-strong); border-radius: var(--radius-full); }