/* ============================================
   ISABELLE FRANCO MELAZZO — DESIGN TOKENS
   ============================================ */

@font-face {
  font-family: 'Inter';
  src: url('fonts/inter-latin-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('fonts/inter-latin-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Cormorant Garamond';
  src: url('fonts/cormorant-garamond-latin-300.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Cormorant Garamond';
  src: url('fonts/cormorant-garamond-latin-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Cormorant Garamond';
  src: url('fonts/cormorant-garamond-latin-300italic.woff2') format('woff2');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Cormorant Garamond';
  src: url('fonts/cormorant-garamond-latin-400italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/jetbrains-mono-latin-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/jetbrains-mono-latin-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Polly';
  src: url('fonts/Polly.woff2') format('woff2'),
       url('fonts/Polly.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ——— PALETA NEUTRA ——— */
  /* Off-whites e bases */
  --ifm-bone:        #FAF8F3;   /* fundo principal, "papel" */
  --ifm-paper:       #F4F1EA;   /* fundo alternativo */
  --ifm-mist:        #EFEAE0;   /* fundo de cards/seções */

  /* Beges/taupes — cor da marca */
  --ifm-sand:        #E2DBC9;   /* bege da marca d'água */
  --ifm-clay:        #C9C0AE;   /* bege médio */
  --ifm-stone:       #A89F8C;   /* taupe / divisórias fortes */
  --ifm-bronze:      #7A6F58;   /* bege escuro / textos secundários em fundo claro */

  /* Cinzas/escuros */
  --ifm-graphite:    #3A3833;   /* cinza escuro do logo */
  --ifm-ink:         #1F1D18;   /* preto quase puro */
  --ifm-shadow:      #0D0C0A;   /* preto profundo */

  /* Cores funcionais (uso muito restrito) */
  --ifm-success:     #5A6B53;   /* verde sálvia, sóbrio */
  --ifm-warn:        #B8895A;   /* terracota suave */
  --ifm-info:        #6B7B8A;   /* azul ardósia */

  /* ——— TIPOGRAFIA ——— */
  --ifm-font-display: 'Polly', 'Cormorant Garamond', serif;
  --ifm-font-serif:   'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  --ifm-font-sans:    'Inter', 'Söhne', -apple-system, BlinkMacSystemFont, sans-serif;
  --ifm-font-mono:    'JetBrains Mono', 'Courier New', monospace;

  /* Escala tipográfica (modular, ratio ~1.250) */
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-md:   18px;
  --fs-lg:   22px;
  --fs-xl:   28px;
  --fs-2xl:  36px;
  --fs-3xl:  48px;
  --fs-4xl:  64px;
  --fs-5xl:  84px;
  --fs-6xl:  120px;

  /* Pesos */
  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;

  /* Line-heights */
  --lh-tight:  1.05;
  --lh-snug:   1.25;
  --lh-normal: 1.5;
  --lh-relaxed:1.7;

  /* Tracking */
  --tr-tight:   -0.02em;
  --tr-normal:  0;
  --tr-wide:    0.06em;
  --tr-widest:  0.18em;

  /* ——— ESPAÇAMENTO (escala de 4px) ——— */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-10: 128px;

  /* ——— RAIOS ——— */
  --r-none: 0;
  --r-xs:   2px;
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   16px;
  --r-pill: 999px;

  /* ——— SOMBRAS (sutis) ——— */
  --sh-none: none;
  --sh-soft: 0 1px 2px rgba(31,29,24,0.04), 0 4px 12px rgba(31,29,24,0.04);
  --sh-card: 0 2px 4px rgba(31,29,24,0.05), 0 12px 32px rgba(31,29,24,0.06);
  --sh-lift: 0 8px 24px rgba(31,29,24,0.10), 0 24px 64px rgba(31,29,24,0.08);

  /* ——— GRID ——— */
  --grid-max:    1280px;
  --grid-gutter: 32px;
  --grid-cols:   12;

  /* ——— TRANSITIONS ——— */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:   cubic-bezier(0.4, 0, 1, 1);
  --t-fast:    180ms;
  --t-base:    320ms;
  --t-slow:    600ms;
}

/* RESET LEVE */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--ifm-font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--ifm-ink);
  background: var(--ifm-bone);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }