/* ============================================================
   IMPERMAIS Impermeabilizações — Design Tokens
   Colors + Typography foundations
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Archive";
  src: url("fonts/Archive.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archive";
  src: url("fonts/ArchiveBold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archive";
  src: url("fonts/ArchiveItalic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Archivo Black";
  src: url("fonts/ArchivoBlack-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Brand palette (from Manual de Marca) ---------- */
  --imp-yellow:        #fec700;  /* Amarelo — energia, destaque, atenção  */
  --imp-yellow-deep:   #e8b500;  /* pressed / hover-darker yellow          */
  --imp-yellow-tint:   #fff3c4;  /* faint yellow wash for surfaces         */
  --imp-black:         #000000;  /* Preto — solidez, força, profissionalismo */
  --imp-white:         #ffffff;  /* Branco — clareza, transparência        */

  /* ---------- Neutral / ink ramp (derived, warm-cool neutral grays) ---- */
  --imp-ink-900:       #0a0a0a;  /* near-black surface (matte black vibe)  */
  --imp-ink-800:       #161616;  /* raised dark surface                    */
  --imp-ink-700:       #242424;  /* dark card / hairline on black          */
  --imp-ink-500:       #4d4d4d;  /* secondary text on light                */
  --imp-ink-400:       #767676;  /* tertiary / captions                    */
  --imp-ink-300:       #b3b3b3;  /* disabled / dividers on dark            */
  --imp-ink-200:       #d9d9d9;  /* borders on light                       */
  --imp-ink-100:       #f0f0f0;  /* subtle fill                            */
  --imp-ink-50:        #f7f7f7;  /* page wash                              */

  /* ---------- Semantic surface / text ---------- */
  --fg1:               #0a0a0a;  /* primary text on light                  */
  --fg2:               #4d4d4d;  /* secondary text                         */
  --fg3:               #767676;  /* tertiary text / captions               */
  --fg-on-dark:        #ffffff;  /* primary text on black                  */
  --fg-on-dark-2:      #b3b3b3;  /* secondary text on black                */
  --fg-on-yellow:      #000000;  /* text on yellow is always black         */
  --fg-accent:         #fec700;  /* accent text / links on dark            */

  --bg1:               #ffffff;  /* primary page surface                   */
  --bg2:               #f7f7f7;  /* secondary surface                      */
  --bg3:               #f0f0f0;  /* tertiary fill                          */
  --bg-dark:           #0a0a0a;  /* inverted/dark sections                 */
  --bg-accent:         #fec700;  /* attention / CTA blocks                 */

  --border1:           #d9d9d9;  /* default border on light                */
  --border2:           #ebebeb;  /* faint divider on light                 */
  --border-dark:       #242424;  /* hairline on dark surfaces              */
  --border-strong:     #000000;  /* heavy framing rules                    */

  /* ---------- Status (kept minimal, technical) ---------- */
  --status-success:    #2f9e44;
  --status-warning:    #fec700;  /* reuse brand yellow                     */
  --status-danger:     #d6342c;
  --status-info:       #1f6feb;

  /* ---------- Type families ---------- */
  --font-display:  "Archive", "Archivo Black", Arial, sans-serif;        /* institutional — titles, identity */
  --font-heavy:    "Archivo Black", "Archive", Arial, sans-serif;        /* heaviest weight — wordmark, big numerals */
  --font-body:     "Archive", Arial, Helvetica, sans-serif;             /* running text */
  --font-mono:     "Archive", ui-monospace, "SF Mono", Menlo, monospace; /* technical specs (Archive used tracked) */

  /* ---------- Type scale (1.250 major-third-ish, tuned) ---------- */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   22px;
  --text-xl:   28px;
  --text-2xl:  36px;
  --text-3xl:  48px;
  --text-4xl:  64px;
  --text-5xl:  84px;
  --text-6xl:  112px;

  --leading-tight:  1.04;
  --leading-snug:   1.15;
  --leading-normal: 1.5;
  --leading-relax:  1.65;

  /* tracking — Archive display & labels are set WIDE per brand */
  --track-mega:   -0.01em;  /* very large display, slight negative */
  --track-tight:  0em;
  --track-label:  0.14em;   /* tracked-out caps labels (wordmark style) */
  --track-wide:   0.22em;   /* "IMPERMEABILIZAÇÕES" descriptor spacing */

  /* ---------- Radii ---------- */
  --radius-none: 0px;
  --radius-sm:   4px;
  --radius-md:   8px;     /* the brand mark's rounded square ≈ this ratio */
  --radius-lg:   14px;
  --radius-pill: 999px;

  /* ---------- Spacing (4px base) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* ---------- Elevation (low, functional — brand is robust/flat) ---- */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.10);
  --shadow-md: 0 4px 14px rgba(0,0,0,0.10);
  --shadow-lg: 0 14px 40px rgba(0,0,0,0.16);
  --shadow-yellow: 0 8px 24px rgba(254,199,0,0.35); /* CTA glow, used sparingly */
}

/* ============================================================
   Semantic element styles — apply as utility classes
   ============================================================ */
.imp-display {
  font-family: var(--font-heavy);
  font-weight: 400;
  font-size: var(--text-5xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--track-mega);
  text-transform: uppercase;
  color: var(--fg1);
}
.imp-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: var(--fg1);
}
.imp-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  text-transform: uppercase;
  color: var(--fg1);
}
.imp-h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  color: var(--fg1);
}
.imp-eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-sm);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--fg2);
}
.imp-lead {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-md);
  line-height: var(--leading-relax);
  color: var(--fg2);
}
.imp-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--fg1);
}
.imp-caption {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-xs);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--fg3);
}