/* ============================================================
   base.css — Reset · CSS Custom Properties · Typography Scale
   MoneyMaths | Mobile-first
   ============================================================ */

/* ── 1. Modern CSS Reset ─────────────────────────────────── */

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

body {
  min-height: 100vh;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

ul, ol {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

table {
  border-collapse: collapse;
  width: 100%;
}

/* ── 2. Design Tokens ────────────────────────────────────── */

:root {

  /* --- Color Palette --- */

  /* Brand */
  --color-primary:        #1a6b55;
  --color-primary-light:  #22876b;
  --color-primary-dark:   #124d3d;
  --color-primary-50:     #edf7f4;
  --color-primary-100:    #c8ead9;

  /* Accent */
  --color-accent:         #f59e0b;
  --color-accent-light:   #fbbf24;
  --color-accent-dark:    #d97706;
  --color-accent-50:      #fffbeb;

  /* Semantic */
  --color-success:        #16a34a;
  --color-success-bg:     #f0fdf4;
  --color-warning:        #d97706;
  --color-warning-bg:     #fffbeb;
  --color-error:          #dc2626;
  --color-error-bg:       #fef2f2;
  --color-info:           #0369a1;
  --color-info-bg:        #f0f9ff;

  /* Neutrals */
  --color-bg:             #f8fafc;
  --color-surface:        #ffffff;
  --color-surface-raised: #ffffff;
  --color-border:         #e2e8f0;
  --color-border-light:   #f1f5f9;

  /* Text */
  --color-text:           #0f172a;
  --color-text-secondary: #475569;
  --color-text-muted:     #94a3b8;
  --color-text-inverse:   #ffffff;
  --color-text-on-primary:#ffffff;

  /* --- Typography --- */

  --font-display: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  /* Type Scale — 1.25 Major Third */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;

  /* Font Weights */
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;

  /* Line Heights */
  --leading-tight:   1.25;
  --leading-snug:    1.375;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;
  --leading-loose:   2;

  /* Letter Spacing */
  --tracking-tight:   -0.025em;
  --tracking-normal:   0em;
  --tracking-wide:     0.025em;
  --tracking-wider:    0.05em;
  --tracking-widest:   0.1em;

  /* --- Spacing Scale (4px base) --- */

  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* --- Border Radius --- */

  --radius-sm:   0.25rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.75rem;
  --radius-xl:   1rem;
  --radius-2xl:  1.5rem;
  --radius-full: 9999px;

  /* --- Shadows --- */

  --shadow-xs:    0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-sm:    0 1px 3px 0 rgb(0 0 0 / 0.10), 0 1px 2px -1px rgb(0 0 0 / 0.10);
  --shadow-md:    0 4px 6px -1px rgb(0 0 0 / 0.10), 0 2px 4px -2px rgb(0 0 0 / 0.10);
  --shadow-lg:    0 10px 15px -3px rgb(0 0 0 / 0.10), 0 4px 6px -4px rgb(0 0 0 / 0.10);
  --shadow-xl:    0 20px 25px -5px rgb(0 0 0 / 0.10), 0 8px 10px -6px rgb(0 0 0 / 0.10);
  --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);

  /* --- Transitions --- */

  --transition-fast:   150ms ease;
  --transition-base:   200ms ease;
  --transition-slow:   300ms ease;
  --transition-slower: 500ms ease;

  /* --- Z-Index Scale --- */

  --z-below:    -1;
  --z-base:      0;
  --z-raised:    10;
  --z-dropdown:  100;
  --z-sticky:    200;
  --z-overlay:   300;
  --z-modal:     400;
  --z-toast:     500;

  /* --- Layout --- */

  --max-width-content: 800px;
  --max-width-wide:    1200px;
  --max-width-full:    1440px;
  --nav-height:        64px;
}

/* ── 3. Google Fonts ─────────────────────────────────────── */

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

/* ── 4. Base Typography ──────────────────────────────────── */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  color: var(--color-text);
  letter-spacing: var(--tracking-tight);
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl);  }
h4 { font-size: var(--text-lg);  }
h5 { font-size: var(--text-base); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-normal); }
h6 { font-size: var(--text-sm);   font-weight: var(--weight-semibold); letter-spacing: var(--tracking-normal); }

@media (min-width: 768px) {
  h1 { font-size: var(--text-4xl); }
  h2 { font-size: var(--text-3xl); }
  h3 { font-size: var(--text-2xl); }
}

p {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
}

p + p {
  margin-top: var(--space-4);
}

strong, b {
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

small {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--color-border-light);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-sm);
  color: var(--color-primary-dark);
}

/* ── 5. Focus (Accessibility) ────────────────────────────── */

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

:focus:not(:focus-visible) {
  outline: none;
}

/* ── 6. Selection ────────────────────────────────────────── */

::selection {
  background-color: var(--color-primary-100);
  color: var(--color-primary-dark);
}

/* ── 7. Scrollbar ────────────────────────────────────────── */

::-webkit-scrollbar        { width: 6px; height: 6px; }
::-webkit-scrollbar-track  { background: var(--color-border-light); }
::-webkit-scrollbar-thumb  { background: var(--color-border); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted); }

/* ── 8. Reduced Motion ───────────────────────────────────── */

@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;
  }
}