/**
 * KaamPoint - Design Tokens
 * 
 * Single source of truth for colors, typography, spacing, shadows, motion, z-index.
 * All components read from these CSS custom properties.
 * Derived from the design system spec in docs/design-system.md
 */

:root {
  /* ========== COLORS ========== */

  /* Brand Blue - Primary (#039CF9 + #02235A) */
  --kp-primary-50: #e6f5ff;
  --kp-primary-100: #cce9fe;
  --kp-primary-200: #99d7fc;
  --kp-primary-300: #67c4fb;
  --kp-primary-400: #35b0fa;
  --kp-primary-500: #039cf9; /* PRIMARY - brand bright blue */
  --kp-primary-600: #0284d4;
  --kp-primary-700: #0268a8;
  --kp-primary-800: #024a7a;
  --kp-primary-900: #02235a; /* brand dark navy */

  /* Accents - Category icons and feature highlights */
  --kp-accent-orange: #f97316;
  --kp-accent-green: #10b981;
  --kp-accent-pink: #ec4899;
  --kp-accent-blue: #039cf9;
  --kp-accent-amber: #f59e0b;
  --kp-accent-teal: #14b8a6;

  /* Neutrals - Ink & Surface */
  --kp-ink-900: #0f172a; /* headings, dark footer */
  --kp-ink-800: #1e293b;
  --kp-ink-700: #334155; /* strong body */
  --kp-ink-600: #475569; /* body text default */
  --kp-ink-500: #64748b; /* muted body text */
  --kp-ink-400: #94a3b8; /* placeholder text */
  --kp-ink-300: #cbd5e1; /* strong borders */
  --kp-ink-200: #e2e8f0; /* default borders */
  --kp-ink-100: #f1f5f9; /* subtle surface, backgrounds */
  --kp-ink-50: #f8fafc; /* app background */
  --kp-white: #ffffff;

  /* Status Colors */
  --kp-success: #10b981;
  --kp-success-soft: rgba(16, 185, 129, 0.1);
  --kp-success-strong: #059669;

  --kp-warning: #f59e0b;
  --kp-warning-soft: rgba(245, 158, 11, 0.1);
  --kp-warning-strong: #d97706;

  --kp-danger: #ef4444;
  --kp-danger-soft: rgba(239, 68, 68, 0.1);
  --kp-danger-strong: #dc2626;

  --kp-info: #039cf9;
  --kp-info-soft: rgba(3, 156, 249, 0.1);
  --kp-info-strong: #0284d4;

  /* Soft variants for backgrounds (10% tint) */
  --kp-primary-soft: rgba(3, 156, 249, 0.1);

  /* ========== TYPOGRAPHY ========== */

  --kp-font-sans:
    "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial,
    sans-serif;
  --kp-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  /* Font Weights */
  --kp-fw-regular: 400;
  --kp-fw-medium: 500;
  --kp-fw-semibold: 600;
  --kp-fw-bold: 700;

  /* Font Size & Line Height (responsive via clamp where noted) */
  --kp-fs-display: clamp(
    36px,
    5vw,
    48px
  ); /* 48/56 on desktop, 36/44 on mobile */
  --kp-fs-h1: clamp(28px, 4vw, 36px); /* 36/44 → 28/36 */
  --kp-fs-h2: 28px;
  --kp-lh-h2: 36px;
  --kp-fs-h3: 22px;
  --kp-lh-h3: 30px;
  --kp-fs-h4: 18px;
  --kp-lh-h4: 26px;
  --kp-fs-lead: 17px;
  --kp-lh-lead: 26px;
  --kp-fs-body: 15px;
  --kp-lh-body: 24px;
  --kp-fs-small: 13px;
  --kp-lh-small: 20px;
  --kp-fs-micro: 11px;
  --kp-lh-micro: 16px;

  /* ========== SPACING (4pt scale) ========== */
  --kp-space-0: 0;
  --kp-space-1: 4px;
  --kp-space-2: 8px;
  --kp-space-3: 12px;
  --kp-space-4: 16px;
  --kp-space-5: 20px;
  --kp-space-6: 24px;
  --kp-space-8: 32px;
  --kp-space-10: 40px;
  --kp-space-12: 48px;
  --kp-space-16: 64px;
  --kp-space-20: 80px;
  --kp-space-24: 96px;

  /* ========== RADII ========== */
  --kp-radius-sm: 6px; /* badges, chips */
  --kp-radius-md: 10px; /* inputs, small buttons */
  --kp-radius-lg: 14px; /* buttons, secondary cards */
  --kp-radius-xl: 18px; /* cards, modals */
  --kp-radius-2xl: 24px; /* hero panels */
  --kp-radius-pill: 999px;

  /* ========== SHADOWS ========== */
  --kp-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
  --kp-shadow-sm: 0 2px 6px rgba(15, 23, 42, 0.06);
  --kp-shadow-md: 0 6px 16px rgba(15, 23, 42, 0.08);
  --kp-shadow-lg: 0 14px 32px rgba(15, 23, 42, 0.1);
  --kp-shadow-xl: 0 24px 48px rgba(15, 23, 42, 0.14);

  /* Focus ring */
  --kp-ring-primary: 0 0 0 4px rgba(3, 156, 249, 0.18);
  --kp-ring-danger: 0 0 0 4px rgba(239, 68, 68, 0.18);

  /* ========== Z-INDEX ========== */
  --kp-z-dropdown: 1000;
  --kp-z-sticky: 1020;
  --kp-z-fixed: 1030;
  --kp-z-modal-backdrop: 1040;
  --kp-z-modal: 1050;
  --kp-z-popover: 1060;
  --kp-z-tooltip: 1070;
  --kp-z-toast: 1080;

  /* ========== MOTION ========== */
  --kp-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --kp-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --kp-duration-fast: 120ms;
  --kp-duration-base: 200ms;
  --kp-duration-slow: 360ms;

  /* Respect prefers-reduced-motion */
  @media (prefers-reduced-motion: reduce) {
    --kp-duration-fast: 0ms;
    --kp-duration-base: 0ms;
    --kp-duration-slow: 0ms;
  }

  /* ========== BREAKPOINTS ========== */
  /* xs: <576px (mobile)
     sm: >=576px (small phone landscape / tablet portrait)
     md: >=768px (tablet)
     lg: >=992px (desktop)
     xl: >=1200px (wide desktop)
     xxl: >=1400px (ultra-wide)
  */
}

/* Light mode (default) */
body {
  color-scheme: light;
}

/* Dark mode support (future phase) */
@media (prefers-color-scheme: dark) {
  :root {
    /* Swap to dark palette if ever needed */
  }
}