@tailwind base;
@tailwind components;
@tailwind utilities;

/* TCC Sem Risco — Design System
   Dashboard refinado, dark/light. Tokens HSL.
   Accent verde reservado p/ CTA "Comprar Agora".
*/

@layer base {
  :root {
    /* Light mode — clean, neutral, soft warmth */
    --background: 220 20% 98%;
    --foreground: 220 20% 12%;

    --card: 0 0% 100%;
    --card-foreground: 220 20% 12%;

    --popover: 0 0% 100%;
    --popover-foreground: 220 20% 12%;

    /* Superfícies escuras (header, chips) usam primary */
    --primary: 220 25% 12%;
    --primary-foreground: 220 15% 98%;

    --secondary: 220 14% 96%;
    --secondary-foreground: 220 25% 12%;

    --muted: 220 14% 96%;
    --muted-foreground: 220 9% 46%;

    --accent: 220 14% 94%;
    --accent-foreground: 220 25% 12%;

    /* CTA verde elétrico — único elemento que destoa */
    --cta: 142 71% 42%;
    --cta-foreground: 0 0% 100%;
    --cta-hover: 142 76% 36%;

    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 98%;

    --border: 220 13% 91%;
    --input: 220 13% 91%;
    --ring: 220 25% 12%;

    --success-green: 142 71% 42%;
    --error-red: 0 84% 60%;
    --error-border: 0 84% 60%;
    --error-text: 0 84% 60%;

    /* Sombras refinadas */
    --shadow-sm: 0 1px 2px 0 hsl(220 25% 12% / 0.05);
    --shadow-md: 0 4px 12px -2px hsl(220 25% 12% / 0.08), 0 2px 4px -2px hsl(220 25% 12% / 0.04);
    --shadow-lg: 0 12px 32px -8px hsl(220 25% 12% / 0.12);

    --radius: 0.75rem;

    --sidebar-background: 220 20% 98%;
    --sidebar-foreground: 220 15% 26%;
    --sidebar-primary: 220 25% 12%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 220 14% 96%;
    --sidebar-accent-foreground: 220 25% 12%;
    --sidebar-border: 220 13% 91%;
    --sidebar-ring: 220 25% 12%;
  }

  .dark {
    /* Dark mode — inspirado no painel Metric: neutro profundo, sutilmente quente */
    --background: 222 44% 4%;
    --foreground: 220 13% 96%;

    --card: 222 35% 7%;
    --card-foreground: 220 13% 96%;

    --popover: 222 35% 7%;
    --popover-foreground: 220 13% 96%;

    /* No dark, "primary" = surface elevada */
    --primary: 222 30% 9%;
    --primary-foreground: 220 13% 96%;

    --secondary: 222 25% 12%;
    --secondary-foreground: 220 13% 96%;

    --muted: 222 25% 12%;
    --muted-foreground: 220 9% 64%;

    --accent: 222 22% 15%;
    --accent-foreground: 220 13% 96%;

    --cta: 142 71% 45%;
    --cta-foreground: 0 0% 100%;
    --cta-hover: 142 76% 50%;

    --destructive: 0 72% 51%;
    --destructive-foreground: 0 0% 98%;

    --border: 222 20% 18%;
    --input: 222 25% 12%;
    --ring: 142 71% 45%;

    --success-green: 142 71% 45%;
    --error-red: 0 72% 51%;
    --error-border: 0 72% 51%;
    --error-text: 0 72% 60%;

    --shadow-sm: 0 1px 2px 0 hsl(0 0% 0% / 0.4);
    --shadow-md: 0 4px 12px -2px hsl(0 0% 0% / 0.5), 0 2px 4px -2px hsl(0 0% 0% / 0.3);
    --shadow-lg: 0 12px 32px -8px hsl(0 0% 0% / 0.6);

    --sidebar-background: 222 44% 4%;
    --sidebar-foreground: 220 13% 96%;
    --sidebar-primary: 222 30% 9%;
    --sidebar-primary-foreground: 220 13% 96%;
    --sidebar-accent: 222 25% 12%;
    --sidebar-accent-foreground: 220 13% 96%;
    --sidebar-border: 220 8% 18%;
    --sidebar-ring: 142 71% 45%;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  html {
    color-scheme: light;
  }
  html.dark {
    color-scheme: dark;
  }

  body {
    @apply bg-background text-foreground antialiased;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-text-size-adjust: 100%;
    touch-action: manipulation;
    font-feature-settings: "rlig" 1, "calt" 1, "ss01" 1;
  }

  input, select, textarea {
    font-size: 16px;
  }

  @media (max-width: 640px) {
    input, select, textarea {
      font-size: 16px !important;
    }
  }

  button,
  [role="button"],
  .button {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  * {
    -webkit-overflow-scrolling: touch;
  }
}

@layer components {
  /* Card de superfície estilo dashboard */
  .surface-card {
    @apply bg-card border border-border rounded-xl;
    box-shadow: var(--shadow-sm);
  }

  /* CTA verde — única quebra de paleta. Dobrando classe p/ vencer utilitárias. */
  .btn-cta.btn-cta {
    background-color: hsl(var(--cta));
    color: hsl(var(--cta-foreground));
    border-color: transparent;
    transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
  }
  .btn-cta.btn-cta:hover {
    background-color: hsl(var(--cta-hover));
    box-shadow: 0 8px 24px -8px hsl(var(--cta) / 0.6);
  }
  .btn-cta.btn-cta:active {
    transform: translateY(1px);
  }
}