@import "tailwindcss" source(none);
@source "../src";
@import "tw-animate-css";
@import "@fontsource/fraunces/400.css";
@import "@fontsource/fraunces/500.css";
@import "@fontsource/fraunces/600.css";
@import "@fontsource/fraunces/700.css";
@import "@fontsource/sora/300.css";
@import "@fontsource/sora/400.css";
@import "@fontsource/sora/500.css";
@import "@fontsource/sora/600.css";
@import "@fontsource/sora/700.css";

@custom-variant dark (&:is(.dark *));

/*
 * Instituto Vida Segura — Design System
 *
 * Organic + Tech. Base escura, verde-vida como cor principal,
 * acentos: dourado (Safe Company) e gradiente verde→azul (Mind Family).
 * Tudo via tokens semânticos — nunca cores hardcoded em componentes.
 */

@theme inline {
  --font-display: "Fraunces", ui-serif, Georgia, serif;
  --font-sans: "Sora", ui-sans-serif, system-ui, sans-serif;

  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --radius-2xl: calc(var(--radius) + 8px);
  --radius-3xl: calc(var(--radius) + 12px);

  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-ring-offset-background: var(--background);

  /* Brand product tokens */
  --color-life: var(--life);
  --color-life-soft: var(--life-soft);
  --color-life-glow: var(--life-glow);
  --color-safe: var(--safe);
  --color-safe-gold: var(--safe-gold);
  --color-mind-a: var(--mind-a);
  --color-mind-b: var(--mind-b);
  --color-mind-c: var(--mind-c);
  --color-surface: var(--surface);
  --color-surface-2: var(--surface-2);

  --shadow-glow: 0 0 60px -10px color-mix(in oklab, var(--life) 50%, transparent);
  --shadow-card: 0 30px 80px -30px color-mix(in oklab, var(--life) 15%, transparent);
}

:root {
  --radius: 0.875rem;

  /* Light-first — off-white quente (papel) + marinho institucional */
  --background: oklch(0.985 0.005 95);          /* #FAFAF7 */
  --foreground: oklch(0.34 0.07 250);           /* #1E3A5F marinho */

  --surface: oklch(1 0 0);                       /* branco puro p/ cards */
  --surface-2: oklch(0.97 0.008 95);            /* off-white levemente mais profundo */

  --card: oklch(1 0 0);
  --card-foreground: oklch(0.34 0.07 250);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.34 0.07 250);

  /* Verde-menta — Instituto Vida Segura (#2BD9A6) */
  --life: oklch(0.81 0.16 168);
  --life-soft: oklch(0.74 0.06 195);            /* teal Mind Family (#7BB8B0) */
  --life-glow: oklch(0.88 0.13 168);

  /* Safe Company — marinho + dourado */
  --safe: oklch(0.34 0.07 250);                  /* #1E3A5F */
  --safe-gold: oklch(0.79 0.13 82);              /* #E8B547 */
  --partner: color-mix(in oklab, var(--safe-gold) 82%, var(--life) 18%);

  /* Mind Family — verde-oliva → azul-céu → dourado quente */
  --mind-a: oklch(0.74 0.06 195);                /* teal claro */
  --mind-b: oklch(0.74 0.1 240);                 /* azul-céu */
  --mind-c: oklch(0.79 0.13 82);                 /* dourado quente */

  --primary: oklch(0.81 0.16 168);
  --primary-foreground: oklch(0.34 0.07 250);
  --secondary: oklch(0.97 0.008 95);
  --secondary-foreground: oklch(0.34 0.07 250);
  --muted: oklch(0.96 0.008 95);
  --muted-foreground: oklch(0.5 0.04 250);
  --accent: oklch(0.79 0.13 82);
  --accent-foreground: oklch(0.34 0.07 250);
  --destructive: oklch(0.6 0.22 25);
  --destructive-foreground: oklch(1 0 0);
  --border: oklch(0.34 0.07 250 / 10%);
  --input: oklch(0.34 0.07 250 / 14%);
  --ring: oklch(0.81 0.16 168 / 55%);
}

@layer base {
  * {
    border-color: var(--color-border);
  }
  html, body {
    scroll-behavior: smooth;
    overflow-x: hidden;
  }
  body {
    background-color: var(--color-background);
    color: var(--color-foreground);
    font-family: var(--font-sans);
    font-feature-settings: "ss01", "cv11";
    -webkit-font-smoothing: antialiased;
  }
  h1, h2, h3, h4 {
    font-family: var(--font-display);
    letter-spacing: -0.02em;
  }
}

@utility container-page {
  width: 100%;
  margin-inline: auto;
  max-width: 80rem;
  padding-inline: 1.25rem;
  @media (min-width: 768px) {
    padding-inline: 2.5rem;
  }
}

@utility text-gradient-life {
  background-image: linear-gradient(
    100deg,
    var(--life-glow) 0%,
    var(--life) 45%,
    var(--mind-b) 100%
  );
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

@utility text-gradient-hero {
  background-image: linear-gradient(
    105deg,
    var(--life) 0%,
    var(--life-glow) 35%,
    var(--mind-b) 75%,
    color-mix(in oklab, var(--mind-b) 85%, var(--safe) 15%) 100%
  );
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  filter: drop-shadow(0 1px 1px color-mix(in oklab, var(--life) 22%, transparent));
}

@utility text-gradient-mind {
  background-image: linear-gradient(
    100deg,
    var(--mind-a) 0%,
    var(--mind-b) 55%,
    var(--mind-c) 100%
  );
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

@utility text-gradient-safe {
  background-image: linear-gradient(100deg, var(--safe-gold), oklch(0.92 0.1 82));
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

@utility bg-gradient-life {
  background-image: radial-gradient(
      120% 80% at 100% 0%,
      color-mix(in oklab, var(--life) 28%, transparent) 0%,
      transparent 60%
    ),
    radial-gradient(
      80% 60% at 0% 100%,
      color-mix(in oklab, var(--mind-b) 22%, transparent) 0%,
      transparent 55%
    ),
    var(--background);
}

@utility bg-gradient-safe {
  background-image: linear-gradient(
    135deg,
    color-mix(in oklab, var(--safe) 60%, var(--background)) 0%,
    color-mix(in oklab, var(--safe-gold) 18%, var(--background)) 100%
  );
}

@utility bg-gradient-mind {
  background-image: linear-gradient(
    135deg,
    color-mix(in oklab, var(--mind-a) 35%, var(--background)) 0%,
    color-mix(in oklab, var(--mind-b) 30%, var(--background)) 55%,
    color-mix(in oklab, var(--mind-c) 28%, var(--background)) 100%
  );
}

@utility glass-card {
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--surface) 92%, transparent),
    color-mix(in oklab, var(--surface-2) 88%, transparent)
  );
  border: 1px solid color-mix(in oklab, var(--safe) 8%, transparent);
  backdrop-filter: blur(20px);
  box-shadow:
    0 1px 0 0 color-mix(in oklab, oklch(1 0 0) 80%, transparent) inset,
    0 30px 60px -40px color-mix(in oklab, var(--safe) 30%, transparent);
}

@utility hairline-divider {
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in oklab, var(--life) 35%, transparent),
    transparent
  );
}

@keyframes grow-line {
  0% { stroke-dashoffset: 1200; opacity: 0; }
  20% { opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0.7; }
}
@keyframes float-soft {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@keyframes pulse-glow {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 0.9; transform: scale(1.04); }
}
@keyframes fade-up {
  0% { opacity: 0; transform: translateY(18px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@utility animate-grow-line {
  stroke-dasharray: 1200;
  animation: grow-line 3.2s ease-out forwards;
}
@utility animate-float-soft {
  animation: float-soft 6s ease-in-out infinite;
}
@utility animate-pulse-glow {
  animation: pulse-glow 4s ease-in-out infinite;
}
@utility animate-fade-up {
  animation: fade-up 0.7s ease-out both;
}
@utility animate-spin-slow {
  animation: spin-slow 24s linear infinite;
}