/* North Finance shared design system: color tokens, spacing/radius/shadow scale, and a
   handful of truly page-agnostic rules (focus states, scrollbar, selection, theme toggle).
   Every page links this file and layers its own layout-specific CSS on top — component
   classes like .card/.btn/.badge stay defined locally per page (not here), since each
   page's markup already relies on them and duplicating the definition here would just be
   silently overridden by cascade order. This file is the single source of truth for the
   *values* every page's local CSS should be built from.

   "Refined Minimal" system: warm off-white/near-black grounds, a single restrained accent
   (navy in light mode, warm gold in dark — the role stays identical, only the hue shifts,
   since navy reads muddy on near-black), hairline borders instead of heavy elevation, and a
   serif/sans pairing — Newsreader for hero numbers and section headings, Public Sans for
   everything else. */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,wght@0,500;0,600;1,500&family=Public+Sans:wght@400;500;600&display=swap');

:root {
  --bg: #faf9f7;
  --bg-secondary: #f4f2ee;
  --card-bg: #ffffff;
  --text: #1c1c1e;
  --text-secondary: #8a8a86;
  --text-tertiary: #b8b6b0;
  --border: #e8e6e1;
  --border-light: #efeee9;
  --accent: #1e3a5f;
  --accent-hover: #14263f;
  --accent-bg: #eaf0f6;
  --danger: #c0463b;
  --danger-bg: #fbeceb;
  --success: #3a7d63;
  --success-bg: #eaf3ee;
  --warning: #b0713f;
  --warning-bg: #f8ecdf;
  --input-bg: #ffffff;

  /* Shadows: --shadow is the raw color (existing usage: box-shadow: 0 1px 3px var(--shadow));
     --shadow-md/--shadow-lg are full, ready-to-use elevation presets for cards and modals.
     Kept deliberately subtle — this system leans on hairline borders for separation, not
     elevation, so these are for genuinely floating surfaces (modals) only. */
  --shadow: rgba(30, 20, 10, 0.05);
  --shadow-md: 0 2px 8px rgba(30, 20, 10, 0.05);
  --shadow-lg: 0 12px 32px rgba(30, 20, 10, 0.12);

  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-full: 999px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  --font-serif: 'Newsreader', Georgia, serif;
  --font-sans: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

[data-theme="dark"] {
  --bg: #121110;
  --bg-secondary: #1a1918;
  --card-bg: #1c1b19;
  --text: #f2f0ec;
  --text-secondary: #9c968c;
  --text-tertiary: #6f6a62;
  --border: #332f2a;
  --border-light: #2a2622;
  --accent: #d4a55c;
  --accent-hover: #e6bc7a;
  --accent-bg: rgba(212, 165, 92, 0.12);
  --danger: #d9776a;
  --danger-bg: #2a1c19;
  --success: #6fae8f;
  --success-bg: #16241d;
  --warning: #c99a5c;
  --warning-bg: #2a2116;
  --input-bg: #1c1b19;
  --shadow: rgba(0, 0, 0, 0.3);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #121110;
    --bg-secondary: #1a1918;
    --card-bg: #1c1b19;
    --text: #f2f0ec;
    --text-secondary: #9c968c;
    --text-tertiary: #6f6a62;
    --border: #332f2a;
    --border-light: #2a2622;
    --accent: #d4a55c;
    --accent-hover: #e6bc7a;
    --accent-bg: rgba(212, 165, 92, 0.12);
    --danger: #d9776a;
    --danger-bg: #2a1c19;
    --success: #6fae8f;
    --success-bg: #16241d;
    --warning: #c99a5c;
    --warning-bg: #2a2116;
    --input-bg: #1c1b19;
    --shadow: rgba(0, 0, 0, 0.3);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
  }
}

html {
  background: var(--bg);
  min-height: 100%;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  min-height: 100vh;
  transition: background 0.2s ease, color 0.2s ease;
  -webkit-font-smoothing: antialiased;
}

/* Consistent, on-brand focus ring everywhere instead of each browser's mismatched default. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

::selection {
  background: var(--accent);
  color: #ffffff;
}

/* The dark-mode accent is a light gold — white selection text would be low-contrast against
   it, so both dark paths (manual toggle + system preference) flip to a dark selection color. */
[data-theme="dark"] ::selection {
  color: #1c1508;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) ::selection {
    color: #1c1508;
  }
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); }

.theme-toggle {
  font-size: 12px; padding: 6px 12px; border-radius: var(--radius-full); border: 1px solid var(--border);
  color: var(--text-secondary); background: var(--card-bg); cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.theme-toggle:hover { background: var(--bg); border-color: var(--text-tertiary); }