/* Panetteria — tokens da marca (cores, tipografia, espaçamento) para publicação */

/* ==========================================================================
   PANETTERIA — Color tokens
   A warm, earthy, appetite-driven palette sampled from the Manual de IDV.
   No greys, no purple, no gratuitous gradients. Text is warm near-black.
   ========================================================================== */

:root {
  /* ---- BRAND CORE -------------------------------------------------------- */
  --chianti:        #6C3E35; /* "Castanho Chianti" — primary wordmark brown   */
  --chianti-deep:   #4E2B25; /* darker pressed/hover state of chianti          */
  --oliva:          #A39D59; /* "Verde Oliva" — display type & secondary brand */
  --oliva-deep:     #80793F; /* readable olive for smaller type                */
  --oliva-soft:     #C8C58A; /* muted olive for tonal motifs / large monogram  */
  --trigo:          #F2E0A6; /* "Trigo Claro" — light wheat, surfaces & avatar */
  --trigo-deep:     #E3C97A; /* wheat in shadow / borders on cream             */
  --preto:          #000000; /* "Preto"                                        */
  --branco:         #FFFFFF; /* "Branco"                                       */

  /* ---- ACCENT ------------------------------------------------------------ */
  --forno:          #AC1818; /* "vermelho forno" — campaign / CTA red, used    */
                             /* sparingly: pills, like states, sale flags      */
  --forno-deep:     #8E1212;

  /* ---- WARM NEUTRALS (cream / paper field) ------------------------------- */
  --cream:          #F7F1E3; /* default page background — warm paper           */
  --cream-2:        #EFE6D2; /* alt section surface                            */
  --areia:          #E2D6BE; /* "areia" sand — deeper warm panel               */
  --linen-line:     #E0D4B8; /* hairline rules on cream                        */

  /* ---- INK (warm near-blacks, never pure grey) --------------------------- */
  --ink-1:          #221C17; /* primary text on light                          */
  --ink-2:          #5A4F45; /* secondary text / captions                      */
  --ink-3:          #8C8073; /* tertiary / placeholders / meta                 */
  --on-dark-1:      #FBF6EA; /* primary text on chianti / dark photo overlays  */
  --on-dark-2:      #D8C7A8; /* secondary text on dark                         */

  /* ---- SEMANTIC ALIASES -------------------------------------------------- */
  --surface-page:    var(--cream);
  --surface-alt:     var(--cream-2);
  --surface-panel:   var(--areia);
  --surface-card:    var(--branco);
  --surface-invert:  var(--chianti);

  --text-strong:     var(--ink-1);
  --text-body:       var(--ink-2);
  --text-muted:      var(--ink-3);
  --text-on-invert:  var(--on-dark-1);

  --brand-primary:   var(--chianti);
  --brand-secondary: var(--oliva);
  --brand-accent:    var(--forno);

  --border-hairline: var(--linen-line);
  --focus-ring:      rgba(163,157,89,.35); /* olive focus glow */
}


/* ==========================================================================
   PANETTERIA — Typography tokens
   Two families only: Erstoria (display serif, the wordmark face) carries all
   emotion; Montserrat (body/UI — substitute, confirm with client) handles
   paragraphs and the wide-tracked uppercase labels.
   Pair Montserrat from Google Fonts in consuming files:
   <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300..800;1,300..600&display=swap" rel="stylesheet">
   ========================================================================== */

@font-face {
  font-family: "Erstoria";
  src: url("../fonts/Erstoria.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- FAMILIES ---------------------------------------------------------- */
  --font-display: "Erstoria", "Playfair Display", Georgia, serif; /* logo serif */
  --font-sans: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* ---- WEIGHTS ----------------------------------------------------------- */
  --w-light: 300;    /* @kind font */
  --w-regular: 400;  /* @kind font */
  --w-medium: 500;   /* @kind font */
  --w-semibold: 600; /* @kind font */
  --w-bold: 700;     /* @kind font */

  /* ---- SEMANTIC ALIASES -------------------------------------------------- */
  --text-display-family: var(--font-display);
  --text-body-family:    var(--font-sans);
  --tracking-eyebrow:    0.28em; /* wide-tracked uppercase labels */
}

/* ==========================================================================
   SEMANTIC TYPE CLASSES
   Display = Erstoria (editorial, warm). Body/UI = Montserrat.
   Eyebrows / labels = Montserrat, uppercase, wide tracking.
   ========================================================================== */

.t-display {              /* hero / poster headlines */
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3rem, 7vw, 6.5rem);
  line-height: .98;
  letter-spacing: -0.01em;
  color: var(--chianti);
  text-wrap: balance;
}

.t-h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.4rem, 4.5vw, 4rem);
  line-height: 1.04;
  letter-spacing: -0.005em;
  color: var(--chianti);
  text-wrap: balance;
}

.t-h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  line-height: 1.1;
  color: var(--oliva-deep);
}

.t-h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.25;
  letter-spacing: 0;
  color: var(--ink-1);
}

.t-eyebrow {              /* "MAIS QUE PADARIA" style label */
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--oliva-deep);
}

.t-lead {                 /* intro paragraph */
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--ink-2);
}

.t-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink-2);
}

.t-small {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--ink-3);
}

/* Editorial accent: mix uppercase sans w/ lowercase serif,
   as seen in "SABOR, ALMA & elegância." */
.t-script {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: normal;
  color: var(--oliva);
}


/* ==========================================================================
   PANETTERIA — Spacing, radii, shadows & motion tokens
   4pt base scale. Soft, generous radii (the full pill is a signature shape).
   Shadows are warm-tinted (brown-based, never grey/blue). Motion is calm.
   ========================================================================== */

:root {
  /* ---- RADII (soft, generous — pills + rounded cards) -------------------- */
  --r-xs: 6px; --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 36px; --r-pill: 999px;

  /* ---- SHADOWS (warm-tinted, soft; brand favors light elevation) --------- */
  --shadow-sm: 0 1px 2px rgba(58,40,28,.06), 0 1px 3px rgba(58,40,28,.08);
  --shadow-md: 0 4px 14px rgba(58,40,28,.10), 0 2px 6px rgba(58,40,28,.06);
  --shadow-lg: 0 18px 48px rgba(58,40,28,.16), 0 6px 16px rgba(58,40,28,.08);
  --shadow-img: 0 24px 60px rgba(46,28,20,.22); /* lifted photography */

  /* ---- SPACING SCALE (4pt base) ------------------------------------------ */
  --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;

  /* ---- MOTION ------------------------------------------------------------ */
  --ease: cubic-bezier(.22,.61,.36,1);   /* @kind other */ /* gentle ease-out, no bounce */
  --dur: 320ms;                          /* @kind other */
}