/* ============================================================
   Karify — Design Tokens
   Single source of truth for colors, typography, spacing, etc.
   ============================================================ */

:root {
  /* ---- Base colors ---- */
  --navy:        #0B1829;
  --navy-mid:    #132236;
  --navy-light:  #1C3350;

  /* ---- Category accents ---- */
  --accent-income:  #4FC3F7;
  --accent-invest:  #69F0AE;
  --accent-plan:    #FFD54F;
  --accent-comply:  #B388FF;

  /* Default accent (blue, overridden per-category on body class) */
  --accent:     var(--accent-income);

  /* ---- Semantic ---- */
  --positive:   #69F0AE;
  --negative:   #FF6B6B;
  --warning:    #FFD54F;

  /* ---- Text ---- */
  --text:       #E8F4FD;
  --text-muted: #7A9BB5;
  --text-dim:   #4A6880;

  /* ---- Borders ---- */
  --border:        rgba(79,195,247,0.12);
  --border-bright: rgba(79,195,247,0.3);

  /* ---- Glass ---- */
  --glass-bg:     rgba(19,34,54,0.7);
  --glass-border: rgba(255,255,255,0.06);
  --glass-blur:   12px;

  /* ---- Typography ---- */
  --font-sans: 'Sora', system-ui, -apple-system, sans-serif;
  --font-mono: 'DM Mono', ui-monospace, 'SF Mono', monospace;

  --text-xs:     11px;
  --text-sm:     13px;
  --text-base:   15px;
  --text-lg:     18px;
  --text-xl:     22px;
  --text-2xl:    28px;

  /* ---- Spacing ---- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ---- Radius ---- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  /* ---- Shadows ---- */
  --shadow-card:  0 4px 24px rgba(0,0,0,0.35);
  --shadow-glow:  0 0 0 3px rgba(79,195,247,0.08);
  --shadow-drawer:-16px 0 48px rgba(0,0,0,0.5);

  /* ---- Timing ---- */
  --duration-fast:   150ms;
  --duration-normal: 250ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Per-category accent scoping — body.cat-* changes --accent */
body.cat-income  { --accent: var(--accent-income); }
body.cat-invest  { --accent: var(--accent-invest); }
body.cat-plan    { --accent: var(--accent-plan); }
body.cat-comply  { --accent: var(--accent-comply); }

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

html, body {
  font-family: var(--font-sans);
  background: var(--navy);
  color: var(--text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  overflow-x: hidden;
  font-size: var(--text-base);
  line-height: 1.55;
}

/* Subtle grid background, matches PF calculator */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(79,195,247,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(79,195,247,0.025) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
  z-index: 0;
}

button, input, select, textarea {
  font-family: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: none;
}

/* Strip native number spinners */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] { -moz-appearance: textfield; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }