@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Manrope:wght@600;700;800&display=swap');

/* Payno shared foundation. Route styles consume these roles through local aliases. */
:root {
  color-scheme: light;
  --payno-primary-50: #F3F7FF;
  --payno-primary-200: #C9DBFF;
  --payno-primary-400: #78A0FF;
  --payno-primary-500: #4F7CFF;
  --payno-primary-600: #2F5FF5;
  --payno-primary-800: #223D9F;
  --payno-success-50: #EEFCF6;
  --payno-success-600: #16985D;
  --payno-warning-50: #FFF8EB;
  --payno-warning-600: #B97D00;
  --payno-error-50: #FFF1F2;
  --payno-error-600: #C62844;
  --payno-neutral-50: #F7F9FC;
  --payno-neutral-200: #DDE4EE;
  --payno-neutral-400: #93A2B8;
  --payno-neutral-600: #536278;
  --payno-neutral-800: #2B3648;

  --payno-bg: #F4F7FB;
  --payno-surface-standard: #FFFFFF;
  --payno-surface-soft: rgba(255, 255, 255, 0.76);
  --payno-surface-container: rgba(248, 251, 255, 0.80);
  --payno-surface-high: #F2F6FC;
  --payno-text: #18202F;
  --payno-text-muted: #536278;
  --payno-border: #DDE4EE;
  --payno-outline: #223D9F;
  --payno-action-primary: var(--payno-primary-600);
  --payno-action-primary-hover: var(--payno-primary-800);
  --payno-text-on-primary: #FFFFFF;
  --payno-focus-ring: var(--payno-primary-600);
  --payno-focus-halo: rgba(79, 124, 255, 0.28);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-pill: 9999px;
  --size-button-sm: 36px;
  --size-button-md: 40px;
  --size-button-lg: 48px;
  --size-input-height: 44px;

  --shadow-1: 0 1px 2px rgba(24, 32, 47, 0.03), 0 10px 24px rgba(35, 60, 112, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.72);
  --shadow-2: 0 10px 24px rgba(35, 60, 112, 0.10), 0 2px 6px rgba(24, 32, 47, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.78);
  --shadow-3: 0 18px 40px rgba(35, 60, 112, 0.14), 0 4px 12px rgba(24, 32, 47, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.76);
  --shadow-4: 0 24px 48px rgba(24, 32, 47, 0.18), 0 8px 18px rgba(35, 60, 112, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.76);
  --shadow-5: 0 34px 72px rgba(24, 32, 47, 0.24), 0 12px 24px rgba(35, 60, 112, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.82);
  --payno-motion-control: 160ms ease-out;
  --payno-motion-layout: 220ms ease-out;
  --payno-font-heading: 'Manrope', sans-serif;
  --payno-font-body: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --payno-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  /* Category color picker: 30 calm mid-saturation swatches for small markers. */
  --cat-swatch-01: var(--payno-primary-500);
  --cat-swatch-02: #71819A;
  --cat-swatch-03: var(--payno-success-600);
  --cat-swatch-04: var(--payno-primary-500);
  --cat-swatch-05: var(--payno-neutral-600);
  --cat-swatch-06: var(--payno-primary-400);
  --cat-swatch-07: var(--payno-primary-600);
  --cat-swatch-08: var(--payno-primary-800);
  --cat-swatch-09: #2A8F8A;
  --cat-swatch-10: #3D7EA8;
  --cat-swatch-11: #3E8F6A;
  --cat-swatch-12: #2F6B52;
  --cat-swatch-13: #5F8A62;
  --cat-swatch-14: #7A8A4A;
  --cat-swatch-15: var(--payno-warning-600);
  --cat-swatch-16: #C4A35A;
  --cat-swatch-17: #B86A4A;
  --cat-swatch-18: #C46B6B;
  --cat-swatch-19: var(--payno-error-600);
  --cat-swatch-20: #A14D6A;
  --cat-swatch-21: #7A5A8A;
  --cat-swatch-22: #6B63A8;
  --cat-swatch-23: #7B8BC4;
  --cat-swatch-24: #5A6E88;
  --cat-swatch-25: var(--payno-neutral-400);
  --cat-swatch-26: var(--payno-neutral-800);
  --cat-swatch-27: #4A5A72;
  --cat-swatch-28: #A67C52;
  --cat-swatch-29: #3D6B5A;
  --cat-swatch-30: #8B7AA8;
}

body.theme-dark {
  color-scheme: dark;
  --payno-bg: #101827;
  --payno-surface-standard: #111827;
  --payno-surface-soft: rgba(20, 31, 49, 0.78);
  --payno-surface-container: rgba(30, 45, 69, 0.72);
  --payno-surface-high: #1E2D45;
  --payno-text: #F7F9FC;
  --payno-text-muted: #CAD5E6;
  --payno-border: #3F4C61;
  --payno-outline: #C9DBFF;
  --payno-focus-ring: #C9DBFF;
  --payno-focus-halo: rgba(120, 160, 255, 0.34);

  --cat-swatch-01: var(--payno-primary-400);
  --cat-swatch-02: #B8C5D8;
  --cat-swatch-03: #62D59F;
  --cat-swatch-04: var(--payno-primary-400);
  --cat-swatch-05: #CAD5E6;
  --cat-swatch-06: #A8C4FF;
  --cat-swatch-07: var(--payno-primary-200);
  --cat-swatch-08: #C9DBFF;
  --cat-swatch-09: #5EC4BC;
  --cat-swatch-10: #6BB0D0;
  --cat-swatch-11: #6BC49A;
  --cat-swatch-12: #5AAA84;
  --cat-swatch-13: #8FBF90;
  --cat-swatch-14: #B0C06A;
  --cat-swatch-15: #E0B04A;
  --cat-swatch-16: #D4BC7A;
  --cat-swatch-17: #D49274;
  --cat-swatch-18: #D98A8A;
  --cat-swatch-19: #E06B80;
  --cat-swatch-20: #C47A96;
  --cat-swatch-21: #B08BC4;
  --cat-swatch-22: #9B96D4;
  --cat-swatch-23: #A8B4E0;
  --cat-swatch-24: #8A9BB0;
  --cat-swatch-25: #B6C2D4;
  --cat-swatch-26: #CAD5E6;
  --cat-swatch-27: #8A9BB0;
  --cat-swatch-28: #D4A87A;
  --cat-swatch-29: #6BAA90;
  --cat-swatch-30: #B8A8D4;
}

body.payno-public,
body.payno-auth,
body.payno-app-shell,
body.payno-document {
  font-family: var(--payno-font-body);
  background: var(--payno-bg);
  color: var(--payno-text);
}

body.payno-public,
body.payno-auth,
body.payno-app-shell {
  --auth-bg: var(--payno-bg);
  --auth-surface: var(--payno-surface-soft);
  --auth-surface-2: var(--payno-surface-high);
  --auth-border: var(--payno-border);
  --auth-border-strong: var(--payno-border);
  --auth-ink-1: var(--payno-text);
  --auth-ink-2: var(--payno-text-muted);
  --auth-ink-3: var(--payno-neutral-400);
  --auth-ink-4: var(--payno-neutral-400);
  --auth-accent: var(--payno-primary-500);
  --auth-accent-blue: var(--payno-primary-200);
  --auth-accent-soft: rgba(79, 124, 255, 0.12);
  --auth-danger: var(--payno-error-600);
  --auth-danger-soft: var(--payno-error-50);
  --auth-success: var(--payno-success-600);
  --auth-radius-card: var(--radius-xl);
  --auth-radius-input: var(--radius-md);
  --auth-radius: var(--radius-xl);
  --auth-radius-sm: var(--radius-md);
  --auth-sans: var(--payno-font-body);
  --auth-serif: var(--payno-font-heading);
  --auth-mono: var(--payno-font-mono);
  --auth-btn-primary-bg: var(--payno-action-primary);
  --auth-btn-primary-hover: var(--payno-action-primary-hover);
  --auth-btn-primary-text: #FFFFFF;
  --auth-btn-secondary-bg: var(--payno-surface-high);
  --auth-btn-secondary-text: var(--payno-primary-600);
  --auth-btn-secondary-border: var(--payno-border);
  --auth-btn-secondary-hover: var(--payno-primary-50);
  --auth-glass-bg: var(--payno-surface-soft);
  --auth-glass-stroke: var(--payno-border);
  --auth-glass-stroke-low: var(--payno-border);
  --auth-glass-blur: blur(22px) saturate(145%);
  --auth-glass-glint: inset 0 1px 0 rgba(255, 255, 255, 0.72);
  --auth-glass-shadow: var(--shadow-1);
  --auth-glass-control: var(--payno-surface-container);
}

body.payno-public.theme-dark,
body.payno-auth.theme-dark,
body.payno-app-shell.theme-dark {
  --auth-bg: var(--payno-bg);
  --auth-surface: var(--payno-surface-soft);
  --auth-surface-2: var(--payno-surface-high);
  --auth-border: var(--payno-border);
  --auth-border-strong: var(--payno-border);
  --auth-ink-1: var(--payno-text);
  --auth-ink-2: var(--payno-text-muted);
  --auth-ink-3: var(--payno-neutral-400);
  --auth-accent: var(--payno-primary-400);
  --auth-btn-primary-bg: var(--payno-action-primary);
  --auth-btn-primary-hover: var(--payno-action-primary-hover);
  --auth-btn-secondary-bg: var(--payno-surface-high);
  --auth-btn-secondary-text: var(--payno-primary-200);
  --auth-glass-bg: var(--payno-surface-soft);
  --auth-glass-stroke: var(--payno-border);
  --auth-glass-stroke-low: var(--payno-border);
  --auth-glass-blur: blur(22px) saturate(140%);
  --auth-glass-glint: inset 0 1px 0 rgba(255, 255, 255, 0.10);
  --auth-glass-shadow: var(--shadow-1);
  --auth-glass-control: var(--payno-surface-container);
}

body.payno-goal {
  --bg: var(--payno-bg);
  --bg-2: var(--payno-surface-standard);
  --bg-3: var(--payno-surface-high);
  --fg: var(--payno-text);
  --fg-muted: var(--payno-text-muted);
  --fg-dim: var(--payno-neutral-400);
  --border: var(--payno-border);
  --border-strong: var(--payno-border);
  --accent: var(--payno-primary-500);
  --plus: var(--payno-success-600);
  --danger: var(--payno-error-600);
  --sans: var(--payno-font-body);
  --serif: var(--payno-font-heading);
  --mono: var(--payno-font-mono);
}

body.payno-document {
  line-height: 1.6;
}

body.payno-document .wrap {
  color: var(--payno-text);
}

body.payno-document h1,
body.payno-document h2,
body.payno-document h3 {
  font-family: var(--payno-font-heading);
  color: var(--payno-text);
}

body.payno-document p,
body.payno-document ul,
body.payno-document .meta,
body.payno-document .back {
  color: var(--payno-text-muted);
}

body.payno-document a {
  color: var(--payno-primary-600);
}

body.payno-document .card {
  background: var(--payno-surface-standard);
  border-color: var(--payno-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
}

body.payno-goal .btn-primary {
  background: var(--payno-action-primary);
  border-color: var(--payno-action-primary);
  color: var(--payno-text-on-primary);
}

body.payno-goal .btn-primary:hover {
  background: var(--payno-action-primary-hover);
  color: var(--payno-text-on-primary);
}

body.payno-goal .page-header,
body.payno-goal .card {
  background: var(--payno-surface-standard);
  border-color: var(--payno-border);
}

body.payno-goal .page-header {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body.payno-goal .card {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
}

body.payno-goal .btn {
  min-height: var(--size-button-md);
  border-radius: var(--radius-md);
  font-family: var(--payno-font-body);
  font-size: 12px;
}

body.payno-goal input,
body.payno-goal textarea,
body.payno-goal select {
  min-height: var(--size-input-height);
  border-color: var(--payno-border);
  background: var(--payno-surface-standard);
}

:where(button, a, input, select, textarea, [role="button"]):focus-visible {
  outline: 2px solid var(--payno-focus-ring);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--payno-focus-halo);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}