/*
 * Design tokens da OwnBarber — única fonte de cor, tipografia, espaço,
 * raio, sombra e movimento da landing. A paleta bronze/cobre e os neutros
 * são os mesmos do painel (frontend/src/styles.css), para que a página e o
 * produto pareçam uma coisa só. Trocar a marca = editar este arquivo.
 */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url('../fonts/fraunces-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/manrope-latin.woff2') format('woff2');
}

:root {
  /* Marca — bronze/cobre (mesma rampa do painel) */
  --brand-50: #fbf1e1;
  --brand-100: #f4dfb8;
  --brand-200: #e9c589;
  --brand-300: #dba85f;
  --brand-400: #cf9142;
  --brand-500: #b17d29;
  --brand-600: #96611d;
  --brand-700: #7a4f18;
  --brand-800: #5f3d13;
  --brand-900: #47300f;
  --brand-950: #2e1f0a;

  /* Neutros */
  --ink-50: #f7f7f7;
  --ink-100: #f0f0f0;
  --ink-200: #e4e4e4;
  --ink-300: #bdbdbd;
  --ink-400: #96938d;
  --ink-500: #767269;
  --ink-600: #6b6b6b;
  --ink-700: #4a4a4a;
  --ink-800: #2e2e2e;
  --ink-900: #1a1a1a;
  --ink-950: #0d0d0d;

  /* Estados */
  --success-50: #f0f6f1;
  --success-600: #4d7c5a;
  --success-700: #3c6147;
  --success-300: #90b99e;

  /* Semânticos — claro (padrão) */
  --bg: #ffffff;
  --bg-alt: var(--ink-50);
  --bg-warm: var(--brand-50);
  --surface: #ffffff;
  --text: var(--ink-900);
  --text-muted: var(--ink-600);
  --border: var(--ink-200);
  --accent: var(--brand-600); /* texto/ícone de destaque sobre claro (5,1:1) */
  --accent-strong: var(--brand-700);

  /* Semânticos — superfícies escuras (hero, demo, CTA final, footer) */
  --dark-bg: var(--ink-950);
  --dark-surface: #171512;
  --dark-surface-2: #201d18;
  --dark-border: rgba(255, 255, 255, 0.12);
  --dark-text: #f5f1ea;
  --dark-text-muted: #c9c3b8;
  --accent-on-dark: var(--brand-400);

  /* Ação principal (CTA) */
  --cta-bg: var(--brand-400);
  --cta-bg-hover: var(--brand-300);
  --cta-bg-active: var(--brand-500);
  --cta-text: var(--ink-950);

  --focus-ring: #f0b35a;
  --focus-ring-on-light: var(--brand-700);

  /* Tipografia */
  --font-display: 'Fraunces', ui-serif, Georgia, 'Times New Roman', serif;
  --font-body: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1.0625rem;
  --text-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --text-h3: clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem);
  --text-h2: clamp(1.875rem, 1.35rem + 2.2vw, 3rem);
  --text-h1: clamp(2.25rem, 1.5rem + 3vw, 3.5rem);

  /* Espaço (escala de 4) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-section: clamp(4rem, 3rem + 5vw, 7.5rem);

  /* Raio — cantos discretos, "lâmina", nada de pílulas em tudo */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* Sombras quentes (tom bronze, não cinza) */
  --shadow-sm: 0 1px 2px rgba(46, 31, 10, 0.08), 0 1px 1px rgba(46, 31, 10, 0.04);
  --shadow-md: 0 8px 24px -8px rgba(46, 31, 10, 0.18), 0 2px 6px rgba(46, 31, 10, 0.06);
  --shadow-lg: 0 24px 56px -16px rgba(46, 31, 10, 0.32), 0 6px 16px rgba(46, 31, 10, 0.08);
  --shadow-glow: 0 0 0 1px rgba(207, 145, 66, 0.35), 0 18px 48px -12px rgba(207, 145, 66, 0.35);

  /* Movimento — rápido e discreto */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 150ms;
  --dur-base: 240ms;
  --dur-slow: 520ms;

  /* Layout */
  --container: 74rem;
  --container-narrow: 48rem;
  --gutter: clamp(1rem, 4vw, 2rem);
  --header-h: 4.5rem;
}