/* ==========================================================================
   Design Tokens — Brauer
   Extraídos do site Framer (editorabrauer.com.br)
   ========================================================================== */

:root {
  /* --- Colors --- */

  /* Primary — verde institucional (capas, identidade) */
  --color-primary: #1f6f4b;
  --color-primary-light: #23a37a;
  --color-primary-dark: #125e46;

  /* CTA — azul (botões de ação principal) */
  --color-cta: #3F46FF;
  --color-cta-dark: #2f36e6;
  --color-cta-fg: #ffffff;

  /* Accent — amarelo (badges, destaques) */
  --color-accent: #ffe900;
  --color-accent-dark: #e6d200;

  /* Neutral */
  --color-neutral-950: #050505;
  --color-neutral-900: #1D1D1B;
  --color-neutral-800: #333333;
  --color-neutral-700: #404040;
  --color-neutral-600: #525252;
  --color-neutral-500: #7E858F;
  --color-neutral-400: #a3a3a3;
  --color-neutral-300: #B3B3B3;
  --color-neutral-200: #e5e5e5;
  --color-neutral-100: #f7f7f7;
  --color-neutral-50: #F6F7F3;

  /* Semânticas */
  --color-success: #04b500;
  --color-error: #dc2626;
  --color-warning: #f59e0b;
  --color-info: #2a64f3;

  /* Background & Foreground — light (loja, páginas internas) */
  --color-bg: #F5F5F7;
  --color-bg-subtle: var(--color-neutral-100);
  --color-bg-muted: var(--color-neutral-200);
  --color-fg: #1D1D1F;
  --color-fg-strong: #0A0A0A;
  --color-fg-subtle: #6E6E72; /* cinza secundario (Apple-like) sobre o bg claro */
  --color-fg-muted: #6B7078; /* AA sobre o bg claro (4.6:1) */

  /* Painel claro — blocos flutuantes sobre o fundo da página (método,
     hero das trilhas). Mesma moldura e mesmo raio do painel escuro. */
  --color-panel: #F5F5F5;

  /* Cream — logo, botões sobre fundo escuro */
  --color-cream: #EAEBDF;
  --color-cream-dark: #d8dac9;

  /* Dark surface (hero, header, sections escuras) */
  --color-dark-bg: #050505;
  --color-dark-surface: #131313;
  --color-dark-surface-border: #1E1E1E;
  --color-dark-fg: #F6F7F3;
  --color-dark-fg-subtle: #989898;
  --color-dark-fg-muted: #949494; /* mais legível no escuro e nas superfícies */
  --color-dark-border: rgba(255, 255, 255, 0.15);

  /* Gradients */
  --gradient-surface: linear-gradient(
    180deg,
    #050505 0%,
    #3B3B3B 54%
  );

  --gradient-surface-stroke: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.15) 100%
  );

  /* Ruído para dithering — quebra o banding de degradês escuros,
     onde há poucos níveis de cor disponíveis entre as pontas.
     Monocromático (saturate 0) e de alta frequência (1 oitava),
     para perturbar pixel a pixel sem criar chuvisco colorido nem manchas. */
  --texture-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='1' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0.33 0.33 0.33 0 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");

  /* Borders */
  --color-border: #e9e9e9;
  --color-border-strong: var(--color-neutral-300);
  --color-divider: #ECECEC;
  --color-timeline-dot: #D9D9D9;

  /* --- Typography --- */

  --font-body: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  --font-heading: 'Instrument Sans', system-ui, sans-serif;
  --font-heading-accent: 'Instrument Serif', Georgia, serif;
  --font-ui: 'Space Grotesk', system-ui, sans-serif;

  /* Escala tipografica oficial — modular 1.2 ancorada em 14px (p).
     Regra: usar SEMPRE estes tokens; nunca por tamanho de fonte direto. */
  --text-h1: 2.6125rem;      /* 41.8px */
  --text-h2: 2.1775rem;      /* 34.84px */
  --text-h3: 1.8144rem;      /* 29.03px */
  --text-h4: 1.5119rem;      /* 24.19px */
  --text-h5: 1.26rem;        /* 20.16px */
  --text-h6: 1.05rem;        /* 16.8px */
  --text-body: 1rem;         /* 16px */
  --text-p: 0.875rem;        /* 14px */
  --text-small: 0.7294rem;   /* 11.67px */
  --text-caption: 0.6075rem; /* 9.72px */

  /* Display — títulos e números grandes acima de h1 (valores próprios, fora do
     passo 1.2 do corpo de texto, pra não mudar o visual atual). */
  --text-d1: 3rem;        /* 48px */
  --text-d2: 3.5rem;      /* 56px */
  --text-d3: 4.5rem;      /* 72px */
  --text-numeral: 12rem;  /* 192px — número decorativo */

  /* Font weights */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  /* Line heights */
  --leading-tight: 1.2;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;

  /* Letter spacing */
  --tracking-tight: -0.025em;
  --tracking-normal: 0;
  --tracking-wide: 0.025em;

  /* --- Spacing (base 4px) --- */

  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-14: 3.5rem;   /* 56px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-22: 5.5rem;   /* 88px */
  --space-24: 6rem;     /* 96px */
  --space-28: 7rem;     /* 112px */
  --space-30: 7.5rem;   /* 120px */
  --space-44: 11rem;    /* 176px */
  --space-50: 12.5rem;  /* 200px */

  /* Aliases semânticos */
  --space-xs: var(--space-1);
  --space-sm: var(--space-2);
  --space-md: var(--space-4);
  --space-lg: var(--space-6);
  --space-xl: var(--space-8);
  --space-2xl: var(--space-12);
  --space-3xl: var(--space-16);

  /* --- Layout --- */

  --container-max: 1200px;
  --container-narrow: 720px;
  --container-padding: var(--space-4);
  /* Altura da linha de conteúdo do header (= altura dos pills) */
  --header-height: 2.5rem;
  /* Respiro entre o topo do painel e os pills; textos ficam 8px abaixo */
  --header-pad: var(--space-10);
  /* Moldura clara em volta dos painéis escuros (header + hero) */
  --page-frame: var(--space-2);

  /* Home track accordion */
  --home-track-open-width: 54.5625rem; /* 873px */
  --home-track-closed-lg: 15.625rem;   /* 250px */
  --home-track-closed-md: 6.9375rem;   /* 111px */
  --home-track-closed-sm: 4.6875rem;   /* 75px */

  /* Home method timeline */
  --method-section-padding-top: var(--space-14);
  --method-grid-row: 19.5rem;
  --method-step-gap: var(--space-44);
  --method-glow-size: 0.4375rem;

  /* --- Border Radius --- */

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 32px;
  --radius-2xl: 40px;
  --radius-full: 100px;

  /* --- Shadows --- */

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);

  /* --- Transitions --- */

  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 350ms;
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  /* Saída longa e desacelerada — para animações de entrada */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- Breakpoints (referência, usados via media queries) ---
   sm:  640px
   md:  768px
   lg:  1024px
   xl:  1280px
*/

@media (min-width: 768px) {
  :root {
    --container-padding: var(--space-6);
  }
}

@media (min-width: 1024px) {
  :root {
    --container-padding: var(--space-8);
    --page-frame: var(--space-10);
  }
}