/* ==========================================================================
   KaroPrints — Design Tokens
   Palette, type, spacing, radii and shadows extracted 1:1 from the
   Tailwind utility values used across the .tsx components.
   ========================================================================== */

:root {
  /* Brand ------------------------------------------------------------------ */
  --blue-50: #eff6ff;
  --blue-100: #dbeafe;
  --blue-200: #bfdbfe;
  --blue-300: #93c5fd;
  --blue-400: #60a5fa;
  --blue-500: #3b82f6;
  --blue-600: #2563eb;
  --blue-700: #1d4ed8;
  --blue-800: #1e40af;
  --blue-900: #1e3a8a;
  --blue-950: #172554;

  --yellow-50: #fefce8;
  --yellow-100: #fef9c3;
  --yellow-200: #fef08a;
  --yellow-300: #fde047;
  --yellow-400: #facc15;
  --yellow-500: #eab308;
  --yellow-600: #ca8a04;
  --yellow-700: #a16207;
  --yellow-800: #854d0e;
  --yellow-900: #713f12;
  --yellow-950: #422006;

  --slate-50: #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;
  --slate-950: #020617;

  --emerald-50: #ecfdf5;
  --emerald-100: #d1fae5;
  --emerald-200: #a7f3d0;
  --emerald-300: #6ee7b7;
  --emerald-400: #34d399;
  --emerald-500: #10b981;
  --emerald-600: #059669;
  --emerald-700: #047857;
  --emerald-800: #065f46;
  --emerald-950: #022c22;

  --rose-50: #fff1f2;
  --rose-100: #ffe4e6;
  --rose-300: #fda4af;
  --rose-500: #f43f5e;
  --rose-600: #e11d48;

  --indigo-500: #6366f1;

  /* Semantic --------------------------------------------------------------- */
  --bg: #ffffff;
  --bg-alt: var(--slate-50);
  --ink: var(--slate-900);
  --ink-strong: var(--slate-950);
  --ink-muted: var(--slate-600);
  --ink-faint: var(--slate-500);
  --line: var(--slate-200);
  --line-strong: var(--slate-900);
  --brand: var(--blue-600);
  --brand-ink: #ffffff;
  --accent: var(--yellow-400);
  --accent-ink: var(--slate-950);
  --ok: var(--emerald-600);
  --danger: var(--rose-600);

  /* Type ------------------------------------------------------------------- */
  --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo,
    Consolas, "Liberation Mono", monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  --text-6xl: 3.75rem;

  /* Space ------------------------------------------------------------------ */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-14: 3.5rem;
  --sp-16: 4rem;
  --sp-20: 5rem;

  /* Radii ------------------------------------------------------------------ */
  --r-sm: 0.25rem;
  --r-md: 0.5rem;
  --r-lg: 0.75rem;
  --r-xl: 1rem;
  --r-2xl: 1rem;
  --r-3xl: 1.5rem;
  --r-full: 9999px;

  /* Elevation -------------------------------------------------------------- */
  --shadow-xs: 0 1px 2px 0 rgb(2 6 23 / 0.05);
  --shadow-sm: 0 1px 3px 0 rgb(2 6 23 / 0.1), 0 1px 2px -1px rgb(2 6 23 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(2 6 23 / 0.1), 0 2px 4px -2px rgb(2 6 23 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(2 6 23 / 0.1), 0 4px 6px -4px rgb(2 6 23 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(2 6 23 / 0.1), 0 8px 10px -6px rgb(2 6 23 / 0.1);
  --shadow-2xl: 0 25px 50px -12px rgb(2 6 23 / 0.35);
  --shadow-accent: 0 12px 24px -8px rgb(234 179 8 / 0.45);
  --shadow-brand: 0 10px 20px -8px rgb(37 99 235 / 0.45);

  /* Layout ----------------------------------------------------------------- */
  --container: 80rem;
  --container-narrow: 64rem;
  --nav-h: 5rem;
  --tap: 44px;

  /* Motion ----------------------------------------------------------------- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur: 180ms;
  --dur-slow: 260ms;
}

/* Optional dark surfaces use these aliases so components stay themeable. */
.surface-dark {
  --ink: #e2e8f0;
  --ink-strong: #ffffff;
  --ink-muted: #94a3b8;
  --line: #1e293b;
}