/* ki-buchhalter.at — Design Tokens
   Import once at app root. All values are the source of truth. */

:root {
  /* ---------- Colors ---------- */
  --color-ink:        #1a1a1a;  /* primary text / borders */
  --color-ink-2:      #3a3a3a;  /* secondary text */
  --color-ink-3:      #6b6b6b;  /* muted text / meta */

  --color-paper:      #f5f1e8;  /* page background (warm) */
  --color-paper-2:    #ebe6d8;  /* raised surface / headers */
  --color-surface:    #fffdf7;  /* card / input background */

  --color-accent:     #d97757;  /* brand orange — oklch(0.68 0.17 35) */
  --color-accent-ink: #8f4a2e;  /* accent text on paper — oklch(0.35 0.12 35) */
  --color-accent-2:   #e6c96b;  /* secondary yellow — oklch(0.78 0.14 80) */

  /* status (semantic palette — use these, never raw amber/green/red) */
  --color-success:      oklch(0.92 0.05 140);   /* mid: borders, fills */
  --color-success-soft: #e7f3e1;                /* light bg tint */
  --color-success-fg:   oklch(0.40 0.10 140);   /* readable text on soft bg */
  --color-warning:      #e6c96b;                /* mid */
  --color-warning-soft: #faf3d7;                /* light bg tint */
  --color-warning-fg:   #6b5419;                /* readable text on soft bg */
  --color-danger:       oklch(0.90 0.06 25);    /* mid */
  --color-danger-soft:  #fbe3d4;                /* light bg tint */
  --color-danger-fg:    oklch(0.45 0.15 25);    /* readable text on soft bg */

  /* ---------- Typography ---------- */
  --font-sans:  'Geist', 'Inter', system-ui, -apple-system, sans-serif;
  --font-serif: 'Instrument Serif', Georgia, serif;           /* editorial headlines */
  --font-mono:  'JetBrains Mono', 'SF Mono', ui-monospace, monospace;
  /* hand fonts used ONLY in the wireframe for annotations; NOT in production UI */

  --fs-11: 11px;  --fs-12: 12px;  --fs-13: 13px;  --fs-14: 14px;
  --fs-16: 16px;  --fs-18: 18px;  --fs-20: 20px;  --fs-24: 24px;
  --fs-28: 28px;  --fs-32: 32px;  --fs-40: 40px;  --fs-48: 48px;

  /* ---------- Spacing (4px baseline) ---------- */
  --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; --space-20: 80px;

  /* ---------- Radii ---------- */
  --r-sm: 4px;  --r-md: 6px;  --r-lg: 8px;
  --r-xl: 12px; --r-2xl: 14px; --r-pill: 999px;

  /* ---------- Shadows ---------- */
  --shadow-btn: 3px 3px 0 0 var(--color-ink);   /* hard drop — buttons */
  --shadow-card: 4px 4px 0 0 var(--color-ink);  /* hard drop — cards */
  --shadow-soft: 0 1px 2px rgba(26,26,26,0.04), 0 4px 12px rgba(26,26,26,0.06);

  /* ---------- Borders ---------- */
  --border: 1.5px solid var(--color-ink);
  --border-thin: 1px solid var(--color-paper-2);
  --border-dashed: 1.5px dashed var(--color-ink);
}

/* ---------- Onboarding Spotlight ---------- */
@keyframes pulse-highlight {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

.animate-pulse-highlight {
  animation: pulse-highlight 2s ease-in-out infinite;
}