/*
 * Planitia — tokens (fonte única)
 * Espelham o design system (design-system/app/globals.css, tema escuro = tema da marca).
 * Cores só via estas variáveis; nada de hex solto em componentes.
 */
:root {
  color-scheme: dark;

  /* Paleta de marca */
  --ink: #040f0f;
  --paper: #f2f4ef;
  --deep: #04471c;
  --green: #058c42;
  --mint: #16db65;

  /* Neutros (50 = Paper, 950 = Ink) */
  --ink-50: #f2f4ef;
  --ink-100: #e6eae5;
  --ink-200: #d3d9d4;
  --ink-300: #b3bdb6;
  --ink-400: #8a9a92;
  --ink-500: #62736b;
  --ink-600: #45534d;
  --ink-700: #2d3a3a;
  --ink-800: #1b2726;
  --ink-900: #0d1918;
  --ink-950: #040f0f;

  /* Verde (400 = Mint, 600 = Green, 800 = Deep). Uso parcimonioso. */
  --brand-400: #16db65;
  --brand-600: #058c42;
  --brand-700: #066b34;
  --brand-800: #04471c;
  --brand-900: #032e14;

  /* Tokens semânticos (escuro) */
  --background: #040f0f;
  --foreground: #f2f4ef;
  --card: #091514;
  --popover: #0d1918;
  --primary: #f2f4ef;
  --primary-foreground: #040f0f;
  --secondary: #121e1d;
  --muted: #0d1918;
  --muted-foreground: #8a9a92;
  --accent: #0a1f16;
  --signal: #16db65;
  --signal-foreground: #040f0f;
  --destructive: #f05252;
  --border: #1f2c2b;
  --input: #2d3a3a;
  --ring: #16db65;

  /* Linhas translúcidas e superfícies */
  --line: color-mix(in oklab, var(--foreground) 11%, transparent);
  --line-strong: color-mix(in oklab, var(--foreground) 22%, transparent);
  --surface-glass: color-mix(in oklab, var(--foreground) 4%, transparent);
  --text-dim: color-mix(in oklab, var(--foreground) 42%, transparent);
  --text-soft: color-mix(in oklab, var(--foreground) 68%, transparent);

  /* Tipografia */
  --font-heading: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --font-sans: "Geist", "Segoe UI", system-ui, sans-serif;

  --fs-display: clamp(3rem, 1.5rem + 6vw, 7.5rem);
  --fs-hero: clamp(2.875rem, 1.25rem + 6.2vw, 7rem);
  --fs-h1: clamp(2.5rem, 1.4rem + 4.5vw, 5rem);
  --fs-h2: clamp(1.75rem, 1.2rem + 2.2vw, 3.25rem);
  --fs-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);
  --fs-lead: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-price: clamp(2.25rem, 1.8rem + 1.4vw, 3.25rem);

  /* Formas */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-squircle-sm: 20px;
  --radius-squircle: 32px;
  --radius-squircle-lg: 48px;

  /* Escala de espaçamento (base 4) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;
  --section-pad: clamp(72px, 4rem + 8vw, 160px);

  /* Grid */
  --container-max: 1440px;
  --gutter: clamp(16px, 4vw, 48px);
  --col-gap: clamp(16px, 2vw, 24px);
  --header-h: 72px;

  /* Motion */
  --ease-studio: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-studio-in-out: cubic-bezier(0.76, 0, 0.24, 1);

  /* Elevação (quase imperceptível; a estrutura vem das linhas) */
  --shadow-card: 0 16px 40px -20px rgb(0 0 0 / 0.8);
  --shadow-float: 0 32px 80px -32px rgb(0 0 0 / 0.9);

  /* Hero: troque o bloco pelo vídeo sem mexer na estrutura */
  --hero-h: 100svh;
  --hero-min: 640px;
  --hero-overlay-top: 0.35;
  --hero-overlay-bottom: 0.88;
}

@media (max-width: 960px) {
  :root {
    --header-h: 64px;
    --hero-min: 600px;
  }
}