/* ==========================================================================
   Projuris Design System — Colors & Type
   Shadcn-compatible tokens, three product themes (Default / Empresas / ADV),
   light & dark modes.
   ========================================================================== */


/* -----------------------------------------------
   Primitive color ramps (Tailwind palette)
   ----------------------------------------------- */
:root {
  --white: #FFFFFF;
  --black: #0E0E0E;

  /* Slate */
  --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;

  /* Zinc */
  --zinc-50:#FAFAFA; --zinc-100:#F4F4F5; --zinc-200:#E4E4E7; --zinc-300:#D4D4D8;
  --zinc-400:#A1A1AA; --zinc-500:#71717A; --zinc-600:#52525B; --zinc-700:#3F3F46;
  --zinc-800:#27272A; --zinc-900:#18181B; --zinc-950:#09090B;

  /* Gray */
  --gray-50:#F9FAFB; --gray-100:#F3F4F6; --gray-200:#E5E7EB; --gray-300:#D1D5DB;
  --gray-400:#9CA3AF; --gray-500:#6B7280; --gray-600:#4B5563; --gray-700:#374151;
  --gray-800:#1F2937; --gray-900:#111827; --gray-950:#030712;

  /* Status */
  --red-500:#EF4444; --red-600:#DC2626; --red-700:#B91C1C; --red-100:#FEE2E2; --red-50:#FEF2F2;
  --orange-500:#F97316; --orange-600:#EA580C; --orange-700:#C2410C; --orange-100:#FFEDD5; --orange-50:#FFF7ED;
  --green-500:#22C55E; --green-600:#16A34A; --green-700:#15803D; --green-100:#DCFCE7; --green-50:#F0FDF4;
  --blue-500:#3B82F6; --blue-600:#2563EB; --blue-700:#1D4ED8; --blue-100:#DBEAFE; --blue-50:#EFF6FF;
  --purple-500:#A855F7; --purple-600:#9333EA; --purple-700:#7E22CE; --purple-100:#F3E8FF; --purple-50:#FAF5FF;
  --yellow-500:#EAB308; --yellow-600:#CA8A04; --yellow-700:#A16207; --yellow-100:#FEF9C3; --yellow-50:#FEFCE8;

  /* ------ Type primitives ------ */
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-heading: 'Sora', 'Inter', system-ui, sans-serif;
  --font-serif: Georgia, 'Times New Roman', serif;
  --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Sizes (Tailwind scale) */
  --text-2xs: 10px;
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 32px;
  --text-4xl: 36px;
  --text-5xl: 48px;
  --text-6xl: 60px;

  /* Weights */
  --font-thin: 100;
  --font-light: 300;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;
  --font-black: 900;

  /* Line-heights */
  --leading-none: 1;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;

  /* ------ Spacing (4px base grid) ------ */
  --space-0: 0;
  --space-px: 1px;
  --space-0-5: 2px;
  --space-1: 4px;
  --space-1-5: 6px;
  --space-2: 8px;
  --space-2-5: 10px;
  --space-3: 12px;
  --space-3-5: 14px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 36px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* Semantic spacing */
  --spacing-3xs: 2px;
  --spacing-2xs: 4px;
  --spacing-xs: 6px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 24px;
  --spacing-2xl: 32px;
  --spacing-3xl: 48px;

  /* ------ Radius ------ */
  --radius-none: 0;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-2xl: 14px;
  --radius-3xl: 16px;
  --radius-4xl: 20px;
  --radius-full: 9999px;

  /* Component radii */
  --radius-button: var(--radius-md);
  --radius-input: var(--radius-md);
  --radius-icon-button: var(--radius-md);
  --radius-focus-ring: var(--radius-lg);
  --radius-card: var(--radius-3xl);
  --radius-dialog: var(--radius-3xl);

  /* ------ Component sizes ------ */
  --size-button-sm: 36px;
  --size-button-md: 40px;
  --size-button-lg: 44px;
  --size-button-xl: 48px;
  --size-input-sm: 36px;
  --size-input-md: 40px;
  --size-input-lg: 44px;
  --size-avatar-xs: 24px;
  --size-avatar-sm: 32px;
  --size-avatar-md: 40px;
  --size-avatar-lg: 48px;
  --size-avatar-xl: 56px;
  --size-avatar-2xl: 64px;

  /* ------ Shadows (Shadcn-style) ------ */
  --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.05);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);

  /* Tag colors (same across light themes) */
  --tag-blue-bg: #DBEAFE; --tag-blue-fg: #1D4ED8;
  --tag-green-bg: #DCFCE7; --tag-green-fg: #15803D;
  --tag-purple-bg: #F3E8FF; --tag-purple-fg: #7E22CE;
  --tag-orange-bg: #FFEDD5; --tag-orange-fg: #C2410C;
  --tag-red-bg: #FEE2E2; --tag-red-fg: #B91C1C;
  --tag-yellow-bg: #FEF9C3; --tag-yellow-fg: #A16207;
  --tag-gray-bg: #F4F4F5; --tag-gray-fg: #4B5563;
}

/* -----------------------------------------------
   SEMANTIC — Light mode (Default product)
   ----------------------------------------------- */
:root, [data-theme="default"][data-mode="light"], [data-theme="default"]:not([data-mode]) {
  --background: #FFFFFF;
  --foreground: #030712;
  --card: #FFFFFF;
  --card-foreground: #030712;
  --popover: #FFFFFF;
  --popover-foreground: #030712;
  --primary: #3B82F6;
  --primary-foreground: #F9FAFB;
  --secondary: #F3F4F6;
  --secondary-foreground: #6B7280;
  --muted: #F4F4F5;
  --muted-foreground: #64748B;
  --accent: #F3F4F6;
  --accent-foreground: #111827;
  --destructive: #DC2626;
  --destructive-foreground: #FEE2E2;
  --success: #16A34A;
  --success-foreground: #F0FDF4;
  --warning: #EA580C;
  --warning-foreground: #FFF7ED;
  --border: #E5E7EB;
  --input: #E5E7EB;
  --ring: #D1D5DB;

  --sidebar: #F3F4F6;
  --sidebar-foreground: #111827;
  --sidebar-primary: #DBEAFE;
  --sidebar-primary-foreground: #1D4ED8;
  --sidebar-accent: #F1F5F9;
  --sidebar-accent-foreground: #111827;
  --sidebar-border: #E5E7EB;
  --sidebar-ring: #9CA3AF;

  --chart-1: #1D4ED8; --chart-2: #0D9488; --chart-3: #164E63;
  --chart-4: #FBBF24; --chart-5: #F59E0B;

  --ia-primary: #A855F7;
  --ia-primary-foreground: #FAF5FF;

  --font-body: var(--font-sans);
  --font-display: var(--font-heading);
}

/* -----------------------------------------------
   SEMANTIC — Dark mode
   ----------------------------------------------- */
[data-mode="dark"], .dark {
  --background: #09090B;
  --foreground: #F9FAFB;
  --card: #18181B;
  --card-foreground: #F8FAFC;
  --popover: #27272A;
  --popover-foreground: #F9FAFB;
  --primary: #3B82F6;
  --primary-foreground: #F9FAFB;
  --secondary: rgb(249 250 251 / 0.08);
  --secondary-foreground: #9CA3AF;
  --muted: #18181B;
  --muted-foreground: #9CA3AF;
  --accent: #111827;
  --accent-foreground: #F9FAFB;
  --destructive: #F87171;
  --destructive-foreground: #450A0A;
  --success: #4ADE80;
  --success-foreground: #F0FDF4;
  --warning: #FB923C;
  --warning-foreground: #FFF7ED;
  --border: rgb(255 255 255 / 0.1);
  --input: rgb(255 255 255 / 0.15);
  --ring: #374151;

  --sidebar: #18181B;
  --sidebar-foreground: #FAFAFA;
  --sidebar-primary: #172554;
  --sidebar-primary-foreground: #60A5FA;
  --sidebar-accent: #111827;
  --sidebar-accent-foreground: #F3F4F6;
  --sidebar-border: rgb(255 255 255 / 0.1);
  --sidebar-ring: #4B5563;
}

/* -----------------------------------------------
   Theme override — EMPRESAS (Corporate / B2B)
   Montserrat headline, softer grayscale
   ----------------------------------------------- */
[data-theme="empresas"] {
  --primary: #3B82F6;
  --accent: #F3F4F6;
  --accent-foreground: #111827;
  --secondary: #F3F4F6;
  --secondary-foreground: #6B7280;
  --muted-foreground: #64748B;
  --ring: #D1D5DB;

  --sidebar: #F3F4F6;
  --sidebar-foreground: #111827;
  --sidebar-primary: #DBEAFE;
  --sidebar-primary-foreground: #1D4ED8;
  --sidebar-accent: #F1F5F9;
  --sidebar-accent-foreground: #111827;

  --font-body: 'Montserrat', var(--font-sans);
  --font-display: 'Montserrat', var(--font-heading);
}
[data-theme="empresas"][data-mode="dark"], [data-theme="empresas"].dark {
  --sidebar-primary: #172554;
  --sidebar-primary-foreground: #60A5FA;
  --sidebar-accent: #111827;
  --ring: #374151;
}

/* -----------------------------------------------
   Theme override — ADV (Advocacia / Lawyers)
   Purple/green accents, Geist body
   ----------------------------------------------- */
[data-theme="adv"] {
  --primary: #6B21A8;
  --primary-foreground: #FAF5FF;
  --sidebar-primary: #BBF7D0;
  --sidebar-primary-foreground: #14532D;

  --font-body: 'Geist', var(--font-sans);
}
[data-theme="adv"][data-mode="dark"], [data-theme="adv"].dark {
  --primary: #15803D;
  --sidebar-primary: #15803D;
  --sidebar-primary-foreground: #F0FDF4;
}

/* -----------------------------------------------
   SEMANTIC Typography classes (h1, h2, code, p …)
   ----------------------------------------------- */
.ds-h1 { font-family: var(--font-display); font-size: var(--text-5xl); line-height: 1.1; font-weight: var(--font-bold); letter-spacing: -0.02em; color: var(--foreground); }
.ds-h2 { font-family: var(--font-display); font-size: var(--text-4xl); line-height: 1.15; font-weight: var(--font-bold); letter-spacing: -0.015em; color: var(--foreground); }
.ds-h3 { font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1.25; font-weight: var(--font-semibold); letter-spacing: -0.01em; color: var(--foreground); }
.ds-h4 { font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.3; font-weight: var(--font-semibold); color: var(--foreground); }
.ds-h5 { font-family: var(--font-display); font-size: var(--text-lg); line-height: 1.35; font-weight: var(--font-semibold); color: var(--foreground); }
.ds-lead { font-family: var(--font-body); font-size: var(--text-lg); line-height: 1.6; font-weight: var(--font-normal); color: var(--muted-foreground); }
.ds-p { font-family: var(--font-body); font-size: var(--text-base); line-height: 1.55; color: var(--foreground); }
.ds-small { font-family: var(--font-body); font-size: var(--text-sm); line-height: 1.4; color: var(--muted-foreground); }
.ds-caption { font-family: var(--font-body); font-size: var(--text-xs); line-height: 1.3; color: var(--muted-foreground); letter-spacing: 0.01em; }
.ds-overline { font-family: var(--font-body); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em; font-weight: var(--font-semibold); color: var(--muted-foreground); }
.ds-code, code.ds { font-family: var(--font-mono); font-size: 0.9em; background: var(--muted); padding: 2px 6px; border-radius: var(--radius-sm); }
.ds-blockquote { font-family: var(--font-serif); font-size: var(--text-xl); line-height: 1.5; font-style: italic; color: var(--foreground); border-left: 3px solid var(--primary); padding-left: 16px; }