/*
 * Design tokens Visibela — Manual Gráfico da Marca v1.0
 * Fonte da verdade das cores/tipografia: front de referência (visibela-loveble/src/styles.css)
 * Roxo #8B1F52 · Rosa #D83D70 · Coral #FF765F · Pêssego #FF9A78
 * Roxo escuro #5A1340 · Cinza #6B6B6B · Off white #FFFDFC
 * Tipografia: Poppins (títulos) + Inter (corpo)
 */

:root {
  --radius: 1rem;
  --radius-sm: calc(var(--radius) - 6px);
  --radius-md: calc(var(--radius) - 3px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 6px);

  --color-background: oklch(0.995 0.003 48.7);
  --color-foreground: oklch(0.289 0 90);
  --color-surface: oklch(0.966 0.015 44.2);

  --color-card: oklch(1 0 0);
  --color-card-foreground: oklch(0.289 0 90);

  --color-primary: oklch(0.433 0.149 356.9); /* Roxo #8B1F52 */
  --color-primary-foreground: oklch(0.995 0.003 48.7);
  --color-plum: oklch(0.326 0.114 346.4); /* Roxo escuro #5A1340 */

  --color-secondary: oklch(0.937 0.016 347.6);
  --color-secondary-foreground: oklch(0.433 0.149 356.9);

  --color-accent: oklch(0.601 0.194 5.4); /* Rosa #D83D70 */
  --color-accent-foreground: oklch(0.995 0.003 48.7);

  --color-coral: oklch(0.724 0.172 31.3); /* Coral #FF765F */
  --color-coral-foreground: oklch(0.995 0.003 48.7);
  --color-peach: oklch(0.783 0.13 39.3); /* Pêssego #FF9A78 */

  --color-muted: oklch(0.966 0.015 44.2);
  --color-muted-foreground: oklch(0.528 0 90); /* Cinza #6B6B6B */

  --color-destructive: oklch(0.577 0.245 27.3);
  --color-destructive-foreground: oklch(0.995 0.003 48.7);
  --color-success: oklch(0.55 0.13 155);
  --color-success-foreground: oklch(0.995 0.003 48.7);

  --color-border: oklch(0.915 0.012 40);
  --color-input: oklch(0.915 0.012 40);
  --color-ring: oklch(0.601 0.194 5.4);

  --gradient-brand: linear-gradient(135deg, var(--color-coral) 0%, var(--color-accent) 52%, var(--color-primary) 100%);
  --gradient-soft: linear-gradient(160deg, oklch(0.98 0.02 40) 0%, oklch(0.96 0.018 350) 100%);
  --shadow-card: 0 4px 20px -8px color-mix(in oklab, var(--color-primary) 28%, transparent);
  --shadow-float: 0 -6px 24px -12px color-mix(in oklab, var(--color-primary) 35%, transparent);

  --font-display: "Poppins", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
}

* {
  border-color: var(--color-border);
}

body {
  background-color: var(--color-background);
  color: var(--color-foreground);
  font-family: var(--font-sans);
  margin: 0;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
}

a {
  color: var(--color-primary);
}

:focus-visible {
  outline: 2px solid var(--color-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.bg-brand-gradient {
  background-image: var(--gradient-brand);
}

.bg-soft-gradient {
  background-image: var(--gradient-soft);
}

.text-brand-gradient {
  background-image: var(--gradient-brand);
  background-clip: text;
  color: transparent;
}

.shadow-card {
  box-shadow: var(--shadow-card);
}

.shadow-float {
  box-shadow: var(--shadow-float);
}