/* ============================================================
   BRUNA SARTURI — Design Tokens
   Fonte única de verdade. Light + Dark.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Forum&family=Italiana&family=Fraunces:ital,opsz,wght@0,9..144,300..900;1,9..144,300..900&family=Outfit:wght@200;300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* === Local font slots — drop your Sailors / Nourd Light files in /fonts/ === */
@font-face {
  font-family: 'Sailors';
  src: local('Sailors'),
       url('fonts/Sailors.woff2') format('woff2'),
       url('fonts/Sailors.otf') format('opentype'),
       url('fonts/Sailors.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Nourd';
  src: local('Nourd Light'), local('Nourd-Light'),
       url('fonts/NourdLight.woff2') format('woff2'),
       url('fonts/NourdLight.otf') format('opentype'),
       url('fonts/NourdLight.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* ----------  CORE TOKENS (light é o default) ---------- */
:root {
  /* — Cores da marca (constantes) — */
  --bs-terracota:        #b24816;
  --bs-terracota-deep:   #842f0a;
  --bs-terracota-soft:   #c96935;
  --bs-pessego:          #ffb585;
  --bs-pessego-pale:     #ffd6b8;
  --bs-creme:            #fff3dd;
  --bs-creme-warm:       #f7e6c4;
  --bs-laranja:          #d9591f;   /* derivado, mais saturado */
  --bs-cacau:            #2a1810;   /* preto quente */
  --bs-cacau-deep:       #1a0d07;
  --bs-branco:           #ffffff;

  /* alphas do terracota */
  --bs-terracota-04:     rgba(178,72,22,.04);
  --bs-terracota-08:     rgba(178,72,22,.08);
  --bs-terracota-12:     rgba(178,72,22,.12);
  --bs-terracota-20:     rgba(178,72,22,.20);
  --bs-terracota-30:     rgba(178,72,22,.30);
  --bs-terracota-50:     rgba(178,72,22,.50);

  /* — Semânticas LIGHT — */
  --bs-bg:               var(--bs-creme);
  --bs-bg-2:             #faead0;
  --bs-bg-3:             #f3dfbf;
  --bs-surface:          var(--bs-branco);
  --bs-surface-2:        #fffaf0;
  --bs-overlay:          rgba(42,24,16,.06);

  --bs-ink:              var(--bs-cacau);
  --bs-ink-2:            #4a2e1f;
  --bs-ink-soft:         rgba(42,24,16,.72);
  --bs-ink-muted:        rgba(42,24,16,.48);
  --bs-ink-dim:          rgba(42,24,16,.28);

  --bs-accent:           var(--bs-terracota);
  --bs-accent-hover:     var(--bs-terracota-deep);
  --bs-accent-soft:      var(--bs-pessego);
  --bs-accent-glow:      rgba(178,72,22,.18);

  --bs-border:           rgba(178,72,22,.20);
  --bs-border-soft:      rgba(178,72,22,.10);
  --bs-border-strong:    rgba(178,72,22,.40);

  --bs-shadow-sm:        0 1px 2px rgba(132, 47, 10, .06);
  --bs-shadow-md:        0 8px 24px -8px rgba(132, 47, 10, .18);
  --bs-shadow-lg:        0 24px 60px -20px rgba(132, 47, 10, .22);
  --bs-shadow-inset:     inset 0 1px 0 rgba(255,255,255,.4);

  /* — Tipografia — */
  --bs-font-display:     'Sailors', 'Forum', 'Italiana', Georgia, serif;
  --bs-font-serif:       'Fraunces', 'Sailors', Georgia, serif;
  --bs-font-sans:        'Outfit', 'Nourd', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --bs-font-mono:        'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* Escala — tipo editorial premium, baseada em 1.25 */
  --bs-fs-micro:         11px;
  --bs-fs-xs:            12px;
  --bs-fs-sm:            14px;
  --bs-fs-body:          16px;
  --bs-fs-lg:            18px;
  --bs-fs-xl:            22px;
  --bs-fs-h6:            16px;
  --bs-fs-h5:            20px;
  --bs-fs-h4:            28px;
  --bs-fs-h3:            40px;
  --bs-fs-h2:            56px;
  --bs-fs-h1:            88px;
  --bs-fs-display:       144px;

  --bs-lh-tight:         1.05;
  --bs-lh-heading:       1.15;
  --bs-lh-body:          1.55;
  --bs-lh-loose:         1.75;

  --bs-track-tight:      -0.03em;
  --bs-track-snug:       -0.01em;
  --bs-track-normal:     0;
  --bs-track-wide:       .12em;
  --bs-track-widest:     .28em;

  /* — Spacing (4-base) — */
  --bs-s-1:              4px;
  --bs-s-2:              8px;
  --bs-s-3:              12px;
  --bs-s-4:              16px;
  --bs-s-5:              20px;
  --bs-s-6:              24px;
  --bs-s-7:              32px;
  --bs-s-8:              40px;
  --bs-s-9:              48px;
  --bs-s-10:             64px;
  --bs-s-11:             80px;
  --bs-s-12:             96px;
  --bs-s-13:             128px;
  --bs-s-14:             160px;

  --bs-container:        1240px;
  --bs-container-text:   720px;
  --bs-section-py:       128px;
  --bs-section-px:       40px;

  /* — Radius — */
  --bs-r-sm:             6px;
  --bs-r-md:             10px;
  --bs-r-lg:             16px;
  --bs-r-xl:             24px;
  --bs-r-2xl:            36px;
  --bs-r-pill:           999px;

  /* — Motion — */
  --bs-ease-soft:        cubic-bezier(.22, 1, .36, 1);
  --bs-ease-reveal:      cubic-bezier(.16, 1, .30, 1);
  --bs-ease-out:         cubic-bezier(.25, .46, .45, .94);
  --bs-dur-fast:         180ms;
  --bs-dur-normal:       320ms;
  --bs-dur-slow:         520ms;
  --bs-dur-reveal:       780ms;
}

/* ----------  DARK MODE  ---------- */
[data-theme="dark"] {
  --bs-bg:               var(--bs-cacau-deep);
  --bs-bg-2:             var(--bs-cacau);
  --bs-bg-3:             #34201a;
  --bs-surface:          #221410;
  --bs-surface-2:        #2e1d15;
  --bs-overlay:          rgba(255,243,221,.04);

  --bs-ink:              var(--bs-creme);
  --bs-ink-2:            #f0dcb8;
  --bs-ink-soft:         rgba(255,243,221,.78);
  --bs-ink-muted:        rgba(255,243,221,.48);
  --bs-ink-dim:          rgba(255,243,221,.24);

  --bs-accent:           var(--bs-pessego);
  --bs-accent-hover:     var(--bs-pessego-pale);
  --bs-accent-soft:      var(--bs-terracota-soft);
  --bs-accent-glow:      rgba(255,181,133,.20);

  --bs-border:           rgba(255,181,133,.18);
  --bs-border-soft:      rgba(255,181,133,.08);
  --bs-border-strong:    rgba(255,181,133,.36);

  --bs-shadow-sm:        0 1px 2px rgba(0,0,0,.4);
  --bs-shadow-md:        0 8px 24px -8px rgba(0,0,0,.6);
  --bs-shadow-lg:        0 24px 60px -20px rgba(0,0,0,.7);
  --bs-shadow-inset:     inset 0 1px 0 rgba(255,255,255,.04);
}

/* ----------  RESET LEVE  ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bs-bg);
  color: var(--bs-ink);
  font-family: var(--bs-font-sans);
  font-size: var(--bs-fs-body);
  line-height: var(--bs-lh-body);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background var(--bs-dur-normal) var(--bs-ease-soft),
              color var(--bs-dur-normal) var(--bs-ease-soft);
}

::selection {
  background: var(--bs-accent);
  color: var(--bs-creme);
}

/* ---------- UTILITIES ---------- */
.bs-kicker {
  font-family: var(--bs-font-sans);
  font-size: var(--bs-fs-micro);
  font-weight: 500;
  letter-spacing: var(--bs-track-widest);
  text-transform: uppercase;
  color: var(--bs-accent);
}
.bs-display {
  font-family: var(--bs-font-display);
  font-weight: 400;
  letter-spacing: var(--bs-track-tight);
  line-height: var(--bs-lh-tight);
}
.bs-editorial {
  font-family: var(--bs-font-serif);
  font-style: italic;
  font-weight: 400;
  font-variation-settings: 'opsz' 144, 'SOFT' 50;
  letter-spacing: var(--bs-track-snug);
}
.bs-mono {
  font-family: var(--bs-font-mono);
  font-size: var(--bs-fs-xs);
  letter-spacing: 0;
}

.bs-container { max-width: var(--bs-container); margin: 0 auto; padding: 0 var(--bs-section-px); }
.bs-text-container { max-width: var(--bs-container-text); margin: 0 auto; }

/* ---------- SCROLLBAR ---------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bs-border); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--bs-border-strong); }