/* ============================================
   design-tokens.css — Chaveiro Sena
   Estilo: Negrito e impactante
   Paleta: Amarelo âmbar + Preto
   Gerado por: skill seo-site-structure
   ============================================ */

:root {

  /* ── CORES ── */
  --color-primary:       #FFC300;
  --color-primary-dark:  #E6B000;
  --color-primary-light: #FFD54F;

  --color-black:         #111111;
  --color-secondary:     #1A1A1A;
  --color-accent:        #FF6B00;

  --color-bg:            #FFFFFF;
  --color-bg-alt:        #F5F5F5;
  --color-bg-dark:       #111111;

  --color-text:          #111111;
  --color-text-muted:    #555555;
  --color-text-light:    #FFFFFF;

  --color-border:        #E0E0E0;
  --color-border-dark:   #2A2A2A;

  --color-success:       #22C55E;
  --color-error:         #EF4444;


  /* ── TIPOGRAFIA ── */
  --font-heading: 'Barlow Condensed', sans-serif;
  --font-body:    'Inter', sans-serif;

  --font-size-xs:   0.75rem;
  --font-size-sm:   0.875rem;
  --font-size-base: 1rem;
  --font-size-lg:   1.125rem;
  --font-size-xl:   1.5rem;
  --font-size-2xl:  2rem;
  --font-size-3xl:  2.5rem;
  --font-size-4xl:  3.5rem;
  --font-size-5xl:  4.5rem;

  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;
  --font-weight-black:    800;

  --line-height-tight:   1.1;
  --line-height-heading: 1.2;
  --line-height-body:    1.6;
  --line-height-loose:   1.8;

  --letter-spacing-tight: -0.02em;
  --letter-spacing-wide:   0.08em;


  /* ── ESPAÇAMENTO (escala 4px) ── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;


  /* ── LAYOUT ── */
  --container-max:    1200px;
  --container-narrow:  768px;
  --container-wide:   1400px;


  /* ── BORDER RADIUS ── */
  --radius-sm:   3px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-pill: 9999px;


  /* ── SOMBRAS ── */
  --shadow-sm:    0 1px 3px rgba(0,0,0,.10);
  --shadow-md:    0 4px 16px rgba(0,0,0,.12);
  --shadow-lg:    0 8px 32px rgba(0,0,0,.15);
  --shadow-amber: 0 4px 24px rgba(255,195,0,.35);


  /* ── TRANSIÇÕES ── */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;


  /* ── Z-INDEX ── */
  --z-base:     1;
  --z-dropdown: 10;
  --z-sticky:   20;
  --z-overlay:  30;
  --z-modal:    40;
  --z-toast:    50;

}


/* ── RESET ── */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

body {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  color: var(--color-text);
  background-color: var(--color-bg);
  line-height: var(--line-height-body);
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-text);
}

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-6);
}