/**
 * FundSys Design System — Financial Atelier
 * CSS Custom Properties & Utilities
 */

:root {
  /* Brand Colors - overridden per org via PHP-injected <style> */
  --fs-brand-primary: #131b2e;
  --fs-brand-secondary: #505f76;
  --fs-brand-primary-rgb: 19, 27, 46;
  --fs-brand-secondary-rgb: 80, 95, 118;

  /* Surface Hierarchy (light mode) */
  --fs-bg-primary: #f7f9fb;
  --fs-bg-secondary: #f2f4f6;
  --fs-bg-tertiary: #eceef0;
  --fs-bg-surface-high: #e6e8ea;
  --fs-bg-surface-highest: #e0e3e5;
  --fs-bg-card: #ffffff;

  /* Text Colors */
  --fs-text-primary: #191c1e;
  --fs-text-secondary: #54647a;
  --fs-text-muted: #76777d;

  /* Borders (use sparingly — prefer tonal shifts) */
  --fs-border-default: rgba(198, 198, 205, 0.15);
  --fs-border-strong: rgba(198, 198, 205, 0.4);

  /* Accent: Success Gold */
  --fs-gold: #e9c176;
  --fs-gold-light: #ffdea5;
  --fs-gold-bg: rgba(233, 193, 118, 0.15);

  /* Status Colors */
  --fs-success: #2e7d32;
  --fs-success-bg: rgba(46, 125, 50, 0.08);
  --fs-warning: #e65100;
  --fs-warning-bg: rgba(230, 81, 0, 0.08);
  --fs-error: #ba1a1a;
  --fs-error-bg: rgba(186, 26, 26, 0.08);
  --fs-info: #505f76;
  --fs-info-bg: rgba(80, 95, 118, 0.08);

  /* Typography */
  --fs-font-sans: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  --fs-font-serif: 'Noto Serif', Georgia, serif;
  --fs-font-mono: 'SF Mono', Monaco, monospace;

  /* Type Scale */
  --fs-text-xs: 0.75rem;    /* 12px */
  --fs-text-sm: 0.875rem;   /* 14px */
  --fs-text-base: 1rem;     /* 16px */
  --fs-text-lg: 1.125rem;   /* 18px */
  --fs-text-xl: 1.25rem;    /* 20px */
  --fs-text-2xl: 1.5rem;    /* 24px */
  --fs-text-display: 3.5rem; /* 56px */

  /* Line Heights */
  --fs-leading-tight: 1.25;
  --fs-leading-normal: 1.5;
  --fs-leading-relaxed: 1.625;

  /* Spacing Scale */
  --fs-space-1: 0.25rem;
  --fs-space-2: 0.5rem;
  --fs-space-3: 0.75rem;
  --fs-space-4: 1rem;
  --fs-space-5: 1.25rem;
  --fs-space-6: 1.5rem;
  --fs-space-8: 2rem;
  --fs-space-10: 2.5rem;
  --fs-space-12: 3rem;

  /* Border Radius — sharp architectural corners */
  --fs-radius-sm: 0.125rem;
  --fs-radius-md: 0.125rem;
  --fs-radius-lg: 0.25rem;
  --fs-radius-xl: 0.25rem;
  --fs-radius-2xl: 0.5rem;
  --fs-radius-3xl: 0.5rem;

  /* Shadows — ambient light, not drop-shadows */
  --fs-shadow-sm: 0 4px 16px rgba(15, 23, 42, 0.04);
  --fs-shadow-md: 0 8px 24px rgba(15, 23, 42, 0.06);
  --fs-shadow-lg: 0 12px 40px rgba(15, 23, 42, 0.06);
  --fs-shadow-xl: 0 16px 48px rgba(15, 23, 42, 0.08);
  --fs-shadow-ambient: 0 12px 40px rgba(15, 23, 42, 0.06);

  /* Transitions */
  --fs-transition-fast: 150ms ease;
  --fs-transition-base: 200ms ease;
  --fs-transition-slow: 300ms ease;

  /* Focus Ring */
  --fs-focus-ring: 0 0 0 2px rgba(19, 27, 46, 0.25);
  --fs-focus-ring-offset: 2px;
}

/* Dark Mode Overrides */
.dark {
  color-scheme: dark;
  --fs-bg-primary: #131b2e;
  --fs-bg-secondary: #1a2540;
  --fs-bg-tertiary: #1e293b;
  --fs-bg-surface-high: #243352;
  --fs-bg-surface-highest: #2a3d5e;
  --fs-bg-card: #1a2540;
  --fs-text-primary: #eff1f3;
  --fs-text-secondary: #9ab0cc;
  --fs-text-muted: #6b859e;
  --fs-border-default: rgba(255, 255, 255, 0.08);
  --fs-border-strong: rgba(255, 255, 255, 0.15);

  --fs-success: #66bb6a;
  --fs-success-bg: rgba(102, 187, 106, 0.12);
  --fs-warning: #ffb74d;
  --fs-warning-bg: rgba(255, 183, 77, 0.12);
  --fs-error: #ef5350;
  --fs-error-bg: rgba(239, 83, 80, 0.12);
  --fs-info: #90caf9;
  --fs-info-bg: rgba(144, 202, 249, 0.12);

  --fs-gold: #e9c176;
  --fs-gold-light: #ffdea5;
  --fs-gold-bg: rgba(233, 193, 118, 0.18);

  --fs-shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.2);
  --fs-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.25);
  --fs-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.25);
  --fs-shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.3);
  --fs-shadow-ambient: 0 12px 40px rgba(0, 0, 0, 0.25);

  --fs-focus-ring: 0 0 0 2px rgba(233, 193, 118, 0.4);
}

/* ===== Form Reset for Dark Mode ===== */
.dark input,
.dark select,
.dark textarea {
  background-color: transparent;
  color: inherit;
}

/* ===== Base Utilities ===== */

.fs-container {
  width: 100%;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--fs-space-4);
  padding-right: var(--fs-space-4);
}

@media (min-width: 640px) {
  .fs-container {
    padding-left: var(--fs-space-6);
    padding-right: var(--fs-space-6);
  }
}

/* Focus Visible - Accessibility */
.fs-focus:focus-visible {
  outline: none;
  box-shadow: var(--fs-focus-ring);
  border-radius: var(--fs-radius-sm);
}

/* Skip Link for Accessibility */
.fs-skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--fs-brand-primary);
  color: white;
  padding: var(--fs-space-2) var(--fs-space-4);
  z-index: 100;
  text-decoration: none;
  font-weight: 600;
  border-radius: 0 0 var(--fs-radius-sm) 0;
  transition: top var(--fs-transition-fast);
}

.fs-skip-link:focus {
  top: 0;
}

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

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
  .fs-card,
  .fs-button,
  .fs-input {
    border: 2px solid currentColor;
  }
}