@import 'tailwindcss';

/*
 * Design tokens, FLOWS.md section 1. Calm fintech: one accent, four semantic status
 * colors used consistently everywhere, generous whitespace, big confident numbers.
 */
@theme {
  --font-sans: var(--font-inter), ui-sans-serif, system-ui, sans-serif;

  /* Accent: deep teal. Primary actions and links only, nothing else. */
  --color-accent-50: oklch(0.97 0.02 190);
  --color-accent-100: oklch(0.93 0.04 190);
  --color-accent-200: oklch(0.87 0.07 190);
  --color-accent-400: oklch(0.68 0.11 190);
  --color-accent-500: oklch(0.58 0.11 190);
  --color-accent-600: oklch(0.48 0.1 191);
  --color-accent-700: oklch(0.4 0.085 192);
  --color-accent-900: oklch(0.27 0.055 194);

  /* Status. positive = a favor, al dia. attention = action required.
     overdue = missed deadlines and invalid documents ONLY, never "tax to pay".
     neutral = everything else. */
  --color-positive: oklch(0.62 0.14 155);
  --color-positive-soft: oklch(0.95 0.04 155);
  --color-attention: oklch(0.75 0.15 78);
  --color-attention-soft: oklch(0.96 0.05 85);
  --color-overdue: oklch(0.58 0.19 25);
  --color-overdue-soft: oklch(0.95 0.04 25);
  --color-neutral-fg: oklch(0.45 0.02 250);

  --radius-card: 1rem;
}

/* Explicit toggle wins over the system preference in both directions (FLOWS.md
   section 1: dark mode from system preference plus a toggle). */
@custom-variant dark (&:where([data-theme='dark'], [data-theme='dark'] *));

:root {
  --surface: oklch(0.99 0.003 250);
  --surface-raised: oklch(1 0 0);
  --border-subtle: oklch(0.92 0.005 250);
  --text: oklch(0.22 0.015 255);
  --text-muted: oklch(0.52 0.015 255);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --surface: oklch(0.18 0.012 255);
    --surface-raised: oklch(0.23 0.014 255);
    --border-subtle: oklch(0.31 0.012 255);
    --text: oklch(0.96 0.004 250);
    --text-muted: oklch(0.72 0.012 255);
    color-scheme: dark;
  }
}

:root[data-theme='dark'] {
  --surface: oklch(0.18 0.012 255);
  --surface-raised: oklch(0.23 0.014 255);
  --border-subtle: oklch(0.31 0.012 255);
  --text: oklch(0.96 0.004 250);
  --text-muted: oklch(0.72 0.012 255);
  color-scheme: dark;
}

@layer base {
  * {
    border-color: var(--border-subtle);
  }

  body {
    background-color: var(--surface);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
  }

  /* Every money figure is tabular. FLOWS.md section 1. */
  .tnum {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
  }
}

/* Motion is purposeful and always interruptible. This disables the non essential
   kind globally, which the GSAP context mirrors. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}