/* ─────────────────────────────────────────────────────────────
   NOCETTI COMPANY — DESIGN TOKENS
   The complete source of truth. Three colors, two type families,
   strict spacing. Import this in any artifact.
   ───────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&display=swap');

/* ── Brand fonts (local) ── */
@font-face { font-family: "Poppins"; font-weight: 100; font-style: normal; src: url("fonts/Poppins-Thin.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Poppins"; font-weight: 100; font-style: italic; src: url("fonts/Poppins-ThinItalic.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Poppins"; font-weight: 200; font-style: normal; src: url("fonts/Poppins-ExtraLight.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Poppins"; font-weight: 200; font-style: italic; src: url("fonts/Poppins-ExtraLightItalic.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Poppins"; font-weight: 300; font-style: normal; src: url("fonts/Poppins-Light.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Poppins"; font-weight: 300; font-style: italic; src: url("fonts/Poppins-LightItalic.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Poppins"; font-weight: 400; font-style: normal; src: url("fonts/Poppins-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Poppins"; font-weight: 400; font-style: italic; src: url("fonts/Poppins-Italic.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Poppins"; font-weight: 500; font-style: normal; src: url("fonts/Poppins-Medium.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Poppins"; font-weight: 500; font-style: italic; src: url("fonts/Poppins-MediumItalic.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Poppins"; font-weight: 600; font-style: normal; src: url("fonts/Poppins-SemiBold.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Poppins"; font-weight: 600; font-style: italic; src: url("fonts/Poppins-SemiBoldItalic.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Poppins"; font-weight: 700; font-style: normal; src: url("fonts/Poppins-Bold.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Poppins"; font-weight: 700; font-style: italic; src: url("fonts/Poppins-BoldItalic.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Poppins"; font-weight: 800; font-style: normal; src: url("fonts/Poppins-ExtraBold.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Poppins"; font-weight: 800; font-style: italic; src: url("fonts/Poppins-ExtraBoldItalic.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Poppins"; font-weight: 900; font-style: normal; src: url("fonts/Poppins-Black.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Poppins"; font-weight: 900; font-style: italic; src: url("fonts/Poppins-BlackItalic.ttf") format("truetype"); font-display: swap; }

@font-face { font-family: "DM Serif Display"; font-weight: 400; font-style: normal; src: url("fonts/DMSerifDisplay-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "DM Serif Display"; font-weight: 400; font-style: italic; src: url("fonts/DMSerifDisplay-Italic.ttf") format("truetype"); font-display: swap; }

:root {
  /* ── Color — preto / branco / cinza + 1 coringa ──
     Predominância: black 40% · white 50% · grays 8% · cyan 2%.
     A coringa é tempero — nunca background largo.
  */
  --black:     #0A0A0B;   /* primary text + slides escuros */
  --white:     #FAFAFA;   /* default background */
  --gray-900:  #1A1A1C;
  --gray-700:  #3D3D42;
  --gray-500:  #767680;   /* mid neutral */
  --gray-300:  #C9C9CF;
  --gray-100:  #ECECEF;   /* off-white card */
  --gray-50:   #F4F4F6;

  --accent:    #00B8D4;   /* coringa — ciano elétrico */
  --accent-deep: #0193A8;
  --accent-soft: #7BE3F0;

  /* Aliases legacy → mantém artefatos antigos rodando até serem refeitos */
  --gold:      var(--accent);
  --gold-deep: var(--accent-deep);
  --gold-soft: var(--accent-soft);
  --offwhite:  var(--white);
  --charcoal:  var(--black);
  --off-warm:  var(--gray-100);

  /* ── Accessory (use rarely, ≤1 in 10 pieces) ── */
  --whatsapp:  #25D366;
  --stop:      #C8102E;

  /* ── Tonal variants ── */
  --char-70:   rgba(10, 10, 11, 0.70);
  --char-30:   rgba(10, 10, 11, 0.30);
  --char-12:   rgba(10, 10, 11, 0.12);
  --char-06:   rgba(10, 10, 11, 0.06);

  /* ── Type families ──
     Sans: Poppins — default Regular (400). Bold (700) pra ênfase pontual.
     Serif italic: DM Serif Display Italic — carrega a ênfase emocional.
     Mono: Geist Mono — tags / barcodes / labels.
  */
  --font-sans:  "Poppins", "Helvetica Neue", Arial, sans-serif;
  --font-serif: "DM Serif Display", Georgia, "Times New Roman", serif;
  --font-mono:  "Geist Mono", ui-monospace, "SF Mono", monospace;
  --font-body:  "Poppins", "Geist", "Inter", system-ui, sans-serif;

  /* ── Weight tokens (Poppins) ──
     Só dois pesos. Bold/ExtraBold/Black são proibidos.
  */
  --w-body:     400;   /* default — inclui headline */
  --w-emph:     600;   /* ênfase pontual — SemiBold */

  /* ── Type scale (1080×1350 reference; scale fluidly with em) ── */
  --t-cover:    96px;   /* 72–96 cover headline */
  --t-list:     80px;   /* 56–80 list keyword */
  --t-h1:       64px;
  --t-h2:       48px;
  --t-h3:       32px;
  --t-sub:      28px;   /* slide subtitle */
  --t-body:     20px;
  --t-small:    16px;
  --t-tag:      14px;   /* all-caps header tag */
  --t-pill:     16px;   /* logo pill */
  --t-page:     14px;   /* 1/8 indicator */
  --t-bar:      10px;   /* barcode label */

  /* ── Letterspacing ── */
  --tr-headline: -0.022em;   /* −2 to −2.5% */
  --tr-tag:       0.20em;    /* +18 to +22% */
  --tr-mono:      0.04em;

  /* ── Line-height ── */
  --lh-headline: 0.98;
  --lh-body:     1.5;

  /* ── Border radius ── */
  --r-pill:     999px;
  --r-card:     28px;
  --r-window:   12px;
  --r-bubble:   24px;
  --r-btn:      8px;
  --r-pdf:      4px;

  /* ── Spacing (8pt baseline) ── */
  --s-2:   8px;
  --s-3:   12px;
  --s-4:   16px;
  --s-5:   24px;
  --s-6:   32px;
  --s-7:   48px;
  --s-8:   64px;
  --s-9:   80px;    /* default slide padding */
  --s-10:  120px;
  --safe:  60px;    /* margin de segurança */

  /* ── Shadow (used minimally — Nocetti avoids drop shadows) ── */
  --shadow-mockup: 0 30px 60px -20px rgba(31, 27, 26, 0.35),
                   0 10px 24px -10px rgba(31, 27, 26, 0.25);
  --shadow-pill:   inset 0 0 0 1px var(--charcoal);

  /* ── Grain noise ── */
  --grain-url: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0   0 0 0 0 0   0 0 0 0 0   0 0 0 0.18 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ── Base resets so artifacts inherit clean ── */
.nc {
  font-family: var(--font-body);
  color: var(--charcoal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.nc-headline {
  font-family: var(--font-sans);
  font-weight: 900;
  letter-spacing: var(--tr-headline);
  line-height: var(--lh-headline);
  text-wrap: balance;
}

.nc-headline em,
.nc-italic {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
}

.nc-tag {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--t-tag);
  letter-spacing: var(--tr-tag);
  text-transform: uppercase;
}

.nc-mono {
  font-family: var(--font-mono);
  letter-spacing: var(--tr-mono);
}

/* Subtle film grain overlay you can compose on photos */
.nc-grain::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grain-url);
  opacity: 0.5;
  mix-blend-mode: overlay;
  pointer-events: none;
}