/* ============================================================
   ReaDI — COSS UI design tokens
   Faithful port of coss.com/ui (Cal.com's design system):
   Base UI + Tailwind + shadcn-style CSS variables.
   ============================================================ */

:root {
  /* --- Tailwind neutral / accent palette (source colors) --- */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-neutral-50:  #fafafa;
  --color-neutral-100: #f5f5f5;
  --color-neutral-200: #e5e5e5;
  --color-neutral-300: #d4d4d4;
  --color-neutral-400: #a3a3a3;
  --color-neutral-500: #737373;
  --color-neutral-600: #525252;
  --color-neutral-700: #404040;
  --color-neutral-800: #262626;
  --color-neutral-900: #171717;
  --color-neutral-950: #0a0a0a;

  --color-red-400: #f87171;   --color-red-500: #ef4444;   --color-red-700: #b91c1c;
  --color-blue-400: #60a5fa;  --color-blue-500: #3b82f6;  --color-blue-700: #1d4ed8;
  --color-emerald-400: #34d399; --color-emerald-500: #10b981; --color-emerald-700: #047857;
  --color-amber-400: #fbbf24; --color-amber-500: #f59e0b; --color-amber-700: #b45309;
  --color-violet-500: #8b5cf6; --color-violet-700: #6d28d9;

  /* --- COSS semantic tokens (light) --- */
  --radius: 0.625rem;

  --background: var(--color-white);
  --foreground: var(--color-neutral-800);

  --card: var(--color-white);
  --card-foreground: var(--color-neutral-800);
  --popover: var(--color-white);
  --popover-foreground: var(--color-neutral-800);

  --primary: var(--color-neutral-800);
  --primary-foreground: var(--color-neutral-50);

  --secondary: rgba(0, 0, 0, 0.04);
  --secondary-foreground: var(--color-neutral-800);
  --muted: rgba(0, 0, 0, 0.04);
  --muted-foreground: #676767; /* neutral-500 90% + black */
  --accent: rgba(0, 0, 0, 0.05);
  --accent-foreground: var(--color-neutral-800);

  --destructive: var(--color-red-500);
  --destructive-foreground: var(--color-red-700);
  --info: var(--color-blue-500);
  --info-foreground: var(--color-blue-700);
  --success: var(--color-emerald-500);
  --success-foreground: var(--color-emerald-700);
  --warning: var(--color-amber-500);
  --warning-foreground: var(--color-amber-700);

  --border: rgba(0, 0, 0, 0.08);
  --border-strong: rgba(0, 0, 0, 0.12);
  --input: rgba(0, 0, 0, 0.10);
  --ring: var(--color-neutral-400);

  /* tinted surfaces for semantic chips/banners (light) */
  --destructive-soft: #fef2f2;
  --info-soft: #eff6ff;
  --success-soft: #ecfdf5;
  --warning-soft: #fffbeb;
  --violet-soft: #f5f3ff;

  /* --- Typography --- */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-heading: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;

  /* --- Shadows (subtle, Cal.com-style) --- */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05), 0 1px 1px rgba(0, 0, 0, 0.03);
  --shadow-md: 0 4px 12px -2px rgba(0, 0, 0, 0.08), 0 2px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 12px 32px -6px rgba(0, 0, 0, 0.14), 0 6px 14px -6px rgba(0, 0, 0, 0.08);
  --shadow-pop: 0 16px 48px -12px rgba(0, 0, 0, 0.22);

  /* --- Layout metrics --- */
  --sidebar-w: 248px;
  --topbar-h: 56px;
  --content-max: 1240px;
}

.dark {
  --background: #161616;            /* neutral-950 95% + white */
  --foreground: var(--color-neutral-100);

  --card: #1c1c1c;
  --card-foreground: var(--color-neutral-100);
  --popover: #1f1f1f;
  --popover-foreground: var(--color-neutral-100);

  --primary: var(--color-neutral-100);
  --primary-foreground: var(--color-neutral-800);

  --secondary: rgba(255, 255, 255, 0.05);
  --secondary-foreground: var(--color-neutral-100);
  --muted: rgba(255, 255, 255, 0.04);
  --muted-foreground: #a0a0a0;
  --accent: rgba(255, 255, 255, 0.07);
  --accent-foreground: var(--color-neutral-100);

  --destructive: #f25555;
  --destructive-foreground: var(--color-red-400);
  --info-foreground: var(--color-blue-400);
  --success-foreground: var(--color-emerald-400);
  --warning-foreground: var(--color-amber-400);

  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);
  --input: rgba(255, 255, 255, 0.10);
  --ring: var(--color-neutral-500);

  --destructive-soft: rgba(239, 68, 68, 0.12);
  --info-soft: rgba(59, 130, 246, 0.12);
  --success-soft: rgba(16, 185, 129, 0.12);
  --warning-soft: rgba(245, 158, 11, 0.13);
  --violet-soft: rgba(139, 92, 246, 0.14);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 6px 16px -4px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 16px 40px -8px rgba(0, 0, 0, 0.7);
  --shadow-pop: 0 20px 56px -12px rgba(0, 0, 0, 0.8);
}