/* KikiFinance design tokens — source of truth: design/tokens/colors_and_type.css */
/* Served as a static file via the public/ directory.                            */
/* Import globally; reference via var(--kf-*) everywhere.                        */

@import url("https://fonts.googleapis.com/css2?family=Mulish:wght@400;500;600;700;800&display=swap");

:root {
  /* ---- Brand / accent (pine teal) ---- */
  --kf-accent: #0f766e;
  --kf-accent-ink: #0b5852;
  --kf-accent-border: #9fd2c9;
  --kf-accent-surface: #f0faf8;
  --kf-accent-tint: #eff7f4;

  /* ---- Muted secondary accents ---- */
  --kf-c-cyan: #2aa198;
  --kf-c-blue: #3b7ea1;
  --kf-c-violet: #6c71c4;
  --kf-c-gold: #b58900;
  --kf-c-clay: #c1573b;
  --kf-c-olive: #7a8b1f;

  /* ---- Ink & text ---- */
  --kf-ink: #18211f;
  --kf-ink-2: #1f2926;
  --kf-text-strong: #33413d;
  --kf-muted: #5f6f69;
  --kf-muted-2: #60706b;
  --kf-text-on-accent: #ffffff;

  /* ---- Surfaces ---- */
  --kf-panel: #ffffff;
  --kf-paper: #fbfcf8;
  --kf-paper-cool: #f8faf8;
  --kf-line: #d7ddd5;
  --kf-line-soft: #e3e8e0;

  /* ---- Page background gradient (sage → cream) ---- */
  --kf-bg-from: #edf4ee;
  --kf-bg-to: #f8fbf8;
  --kf-bg: linear-gradient(180deg, var(--kf-bg-from) 0%, var(--kf-bg-to) 42%);
  --kf-bg-login: linear-gradient(180deg, #eff7f6 0%, #fbfcfb 46%);

  /* ---- Semantic status ---- */
  --kf-success-surface: #dcf4e6;
  --kf-success-border: #74c79b;
  --kf-success-ink: #06703c;
  --kf-info-surface: #e4edfd;
  --kf-info-border: #9dbdf4;
  --kf-info-ink: #1556c8;
  --kf-warn-surface: #fce9c8;
  --kf-warn-border: #e6b450;
  --kf-warn-ink: #8a4a00;
  --kf-danger-surface: #fcdfdf;
  --kf-danger-border: #ee9b9b;
  --kf-danger-ink: #bf4500;
  --kf-badge-surface: #f5f8f5;

  /* ---- Money semantics ---- */
  --kf-money-pos: #137a4b;
  --kf-money-neg: #ff9900;
  --kf-money-zero: #aaaaaa;

  /* ---- Radii ---- */
  --kf-radius-sm: 6px;
  --kf-radius: 8px;
  --kf-radius-lg: 10px;
  --kf-radius-pill: 999px;

  /* ---- Elevation ---- */
  --kf-shadow: 0 10px 24px rgba(24, 33, 31, 0.06);
  --kf-shadow-sm: 0 1px 4px rgba(24, 33, 31, 0.07);
  --kf-shadow-md: 0 4px 12px rgba(24, 33, 31, 0.09);
  --kf-shadow-lg: 0 8px 24px rgba(24, 33, 31, 0.11);
  --kf-shadow-dialog: 0 24px 56px rgba(24, 33, 31, 0.16), 0 2px 8px rgba(24, 33, 31, 0.06);
  --kf-overlay: rgba(24, 33, 31, 0.35);

  /* ---- Spacing scale (4px base) ---- */
  --kf-space-1: 4px;
  --kf-space-2: 6px;
  --kf-space-3: 8px;
  --kf-space-4: 10px;
  --kf-space-5: 12px;
  --kf-space-6: 14px;
  --kf-space-7: 16px;
  --kf-space-8: 18px;
  --kf-space-10: 24px;
  --kf-space-12: 28px;
  --kf-space-14: 32px;
  --kf-space-16: 48px;

  /* ---- Typography ---- */
  --kf-font: "Mulish", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --kf-font-num: "Mulish", "Avenir Next", "Segoe UI", system-ui, sans-serif;

  --kf-fs-eyebrow: 12px;
  --kf-fs-caption: 12px;
  --kf-fs-small: 13px;
  --kf-fs-body: 14px;
  --kf-fs-panel: 16px;
  --kf-fs-metric: 20px;
  --kf-fs-h2: 24px;
  --kf-fs-h1-sm: 32px;
  --kf-fs-h1: 34px;
  --kf-fs-display: 44px;

  --kf-font-lh-tight: 1.05;
  --kf-font-lh-title: 1.12;
  --kf-font-lh-snug: 1.25;
  --kf-font-lh-body: 1.5;

  --kf-weight-reg: 400;
  --kf-weight-med: 500;
  --kf-weight-semi: 600;
  --kf-weight-bold: 700;
  --kf-weight-black: 800;

  --kf-eyebrow-tracking: 0.08em;
}

/* ---- Animations (global, referenced by name from CSS modules) ---- */
@keyframes kfshimmer {
  0% {
    background-position: -240px 0;
  }
  100% {
    background-position: 240px 0;
  }
}
@keyframes kfspin {
  to {
    transform: rotate(360deg);
  }
}

/* ---- Global element defaults ---- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--kf-font);
  color: var(--kf-ink);
  font-size: var(--kf-fs-body);
  line-height: var(--kf-font-lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---- Utility classes (opt-in via class="kf") ---- */
.kf {
  font-family: var(--kf-font);
  color: var(--kf-ink);
}
.kf-eyebrow {
  margin: 0;
  color: var(--kf-accent);
  font-size: var(--kf-fs-eyebrow);
  font-weight: var(--kf-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--kf-eyebrow-tracking);
}
.kf-display {
  font-size: var(--kf-fs-display);
  line-height: var(--kf-font-lh-tight);
  font-weight: var(--kf-weight-bold);
  letter-spacing: -0.015em;
  margin: 0;
}
.kf-muted {
  color: var(--kf-muted);
}
.kf-money {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.kf-money--pos {
  color: var(--kf-money-pos);
}