/* =============================================
   DESIGN SYSTEM TOKENS - IntegraÁudio
   Baseado no shadcn/ui - Estilo minimalista
   ============================================= */

:root {
  /* ===== CORES NEUTRAS - Zinc (shadcn default) ===== */
  --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;

  /* ===== CORES PRIMÁRIAS - Violeta ===== */
  --primary-50: #f5f3ff;
  --primary-100: #ede9fe;
  --primary-200: #ddd6fe;
  --primary-300: #c4b5fd;
  --primary-400: #a78bfa;
  --primary-500: #8b5cf6;
  --primary-600: #7c3aed;
  --primary-700: #6d28d9;
  --primary-800: #5b21b6;
  --primary-900: #4c1d95;

  /* ===== CORES SEMÂNTICAS ===== */
  --success-50: #f0fdf4;
  --success-100: #dcfce7;
  --success-500: #22c55e;
  --success-600: #16a34a;
  --success-700: #15803d;

  --warning-50: #fffbeb;
  --warning-100: #fef3c7;
  --warning-500: #f59e0b;
  --warning-600: #d97706;
  --warning-700: #b45309;

  --error-50: #fef2f2;
  --error-100: #fee2e2;
  --error-500: #ef4444;
  --error-600: #dc2626;
  --error-700: #b91c1c;

  /* ===== TIPOGRAFIA ===== */
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 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;

  --leading-none: 1;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;

  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  /* ===== ESPAÇAMENTO ===== */
  --space-0: 0;
  --space-0-5: 0.125rem;
  --space-1: 0.25rem;
  --space-1-5: 0.375rem;
  --space-2: 0.5rem;
  --space-2-5: 0.625rem;
  --space-3: 0.75rem;
  --space-3-5: 0.875rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-9: 2.25rem;
  --space-10: 2.5rem;
  --space-11: 2.75rem;
  --space-12: 3rem;
  --space-14: 3.5rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* ===== BORDER RADIUS - shadcn usa valores menores ===== */
  --radius-none: 0;
  --radius-sm: 0.125rem;
  --radius-md: calc(0.5rem - 2px);
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;
  --radius-3xl: 1.5rem;
  --radius-full: 9999px;

  /* ===== SOMBRAS - Mais sutis ===== */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow: 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);

  /* ===== TRANSIÇÕES ===== */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);

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

  /* ===== TEMA CLARO (DEFAULT) - shadcn style ===== */
  --background: #ffffff;
  --foreground: var(--zinc-950);

  --card: #ffffff;
  --card-foreground: var(--zinc-950);

  --popover: #ffffff;
  --popover-foreground: var(--zinc-950);

  --primary: var(--primary-600);
  --primary-foreground: #ffffff;

  --secondary: var(--zinc-100);
  --secondary-foreground: var(--zinc-900);

  --muted: var(--zinc-100);
  --muted-foreground: var(--zinc-500);

  --accent: var(--zinc-100);
  --accent-foreground: var(--zinc-900);

  --destructive: var(--error-500);
  --destructive-foreground: var(--zinc-50);

  --border: var(--zinc-200);
  --input: var(--zinc-200);
  --ring: var(--primary-500);

  /* Semantic aliases */
  --foreground-muted: var(--zinc-500);
  --input-border: var(--zinc-200);
  --input-placeholder: var(--zinc-400);

  /* Header */
  --header-bg: #ffffff;
  --header-border: var(--zinc-200);
  --nav-link: var(--zinc-600);
  --nav-link-hover: var(--zinc-900);
  --nav-link-active: var(--zinc-900);
}

/* ===== TEMA ESCURO - shadcn style ===== */
[data-theme="dark"] {
  --background: var(--zinc-950);
  --foreground: var(--zinc-50);

  --card: var(--zinc-950);
  --card-foreground: var(--zinc-50);

  --popover: var(--zinc-950);
  --popover-foreground: var(--zinc-50);

  --primary: var(--primary-500);
  --primary-foreground: #ffffff;

  --secondary: var(--zinc-800);
  --secondary-foreground: var(--zinc-50);

  --muted: var(--zinc-800);
  --muted-foreground: var(--zinc-400);

  --accent: var(--zinc-800);
  --accent-foreground: var(--zinc-50);

  --destructive: #7f1d1d;
  --destructive-foreground: var(--zinc-50);

  --border: var(--zinc-800);
  --input: var(--zinc-800);
  --ring: var(--primary-400);

  /* Semantic aliases */
  --foreground-muted: var(--zinc-400);
  --input-border: var(--zinc-800);
  --input-placeholder: var(--zinc-500);

  /* Header */
  --header-bg: var(--zinc-950);
  --header-border: var(--zinc-800);
  --nav-link: var(--zinc-400);
  --nav-link-hover: var(--zinc-50);
  --nav-link-active: var(--zinc-50);

  /* Sombras para tema escuro */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
  --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.4);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4);
}

/* ===== PREFERÊNCIA DO SISTEMA ===== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --background: var(--zinc-950);
    --foreground: var(--zinc-50);
    --card: var(--zinc-950);
    --card-foreground: var(--zinc-50);
    --popover: var(--zinc-950);
    --popover-foreground: var(--zinc-50);
    --primary: var(--primary-500);
    --primary-foreground: #ffffff;
    --secondary: var(--zinc-800);
    --secondary-foreground: var(--zinc-50);
    --muted: var(--zinc-800);
    --muted-foreground: var(--zinc-400);
    --accent: var(--zinc-800);
    --accent-foreground: var(--zinc-50);
    --border: var(--zinc-800);
    --input: var(--zinc-800);
    --ring: var(--primary-400);
    --foreground-muted: var(--zinc-400);
    --input-border: var(--zinc-800);
    --input-placeholder: var(--zinc-500);
    --header-bg: var(--zinc-950);
    --header-border: var(--zinc-800);
    --nav-link: var(--zinc-400);
    --nav-link-hover: var(--zinc-50);
    --nav-link-active: var(--zinc-50);
  }
}