/* ============================================================
   SEMAGÊNCIA — Design Tokens
   Source: Brandbook Semagência v1 (2026)
   ============================================================ */

/* ---- Web Fonts ---- */
@font-face { font-family: 'Inter'; src: url('fonts/Inter_18pt-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('fonts/Inter_18pt-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('fonts/Inter_18pt-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('fonts/Inter_18pt-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('fonts/Inter_18pt-ExtraBold.ttf') format('truetype'); font-weight: 800; font-style: normal; font-display: swap; }

/* Large optical sizes for display use */
@font-face { font-family: 'Inter Display'; src: url('fonts/Inter_28pt-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter Display'; src: url('fonts/Inter_28pt-ExtraBold.ttf') format('truetype'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter Display'; src: url('fonts/Inter_28pt-Black.ttf') format('truetype'); font-weight: 900; font-style: normal; font-display: swap; }

:root {
  /* ---- BASE COLORS ---- */
  --laranja:           #FD490E; /* Laranja Semagência — primary accent, CTAs, links, keywords */
  --laranja-hover:     #E73D00; /* Hover state for buttons and links */
  --laranja-suave:     #FFE9DE; /* Badge backgrounds, soft highlights */
  --grafite:           #1A3446; /* Primary text, headings — NEVER use pure black */
  --grafite-medio:     #2D4A5E; /* Borders on dark backgrounds, secondary text on dark */
  --branco:            #FFFFFF; /* Primary background */
  --cinza-apoio:       #F5F6F7; /* Secondary bg, alternating sections, subtle separation */

  /* ---- SEMANTIC COLORS ---- */
  --color-bg:          var(--branco);
  --color-bg-alt:      var(--cinza-apoio);
  --color-bg-dark:     var(--grafite);
  --color-text:        var(--grafite);
  --color-text-muted:  var(--grafite-medio);
  --color-accent:      var(--laranja);
  --color-accent-hover:var(--laranja-hover);
  --color-accent-soft: var(--laranja-suave);
  --color-border:      #E2E4E6;
  --color-border-dark: var(--grafite-medio);

  /* ---- FONT FAMILIES ---- */
  --font-body:         'Inter', sans-serif;
  --font-display:      'Inter Display', 'Inter', sans-serif;

  /* ---- TYPE SCALE — Desktop ---- */
  --text-hero:         clamp(48px, 5vw, 80px);   /* Headline hero: 64–80px */
  --text-h1:           clamp(40px, 4vw, 56px);   /* H1 section titles: 48–56px */
  --text-h2:           clamp(28px, 3vw, 40px);   /* H2 subtitles: 32–40px */
  --text-h3:           clamp(22px, 2.5vw, 28px); /* H3: 24–28px */
  --text-lead:         clamp(18px, 1.5vw, 22px); /* Lead/intro paragraph */
  --text-body:         16px;                     /* Body copy */
  --text-small:        14px;                     /* Captions, metadata */
  --text-xs:           12px;                     /* Labels, badges */

  /* ---- FONT WEIGHTS ---- */
  --weight-regular:    400;
  --weight-medium:     500;
  --weight-semibold:   600;
  --weight-bold:       700;
  --weight-extrabold:  800;
  --weight-black:      900;

  /* ---- LINE HEIGHTS ---- */
  --lh-heading:        1.2;
  --lh-body:           1.5;

  /* ---- LETTER SPACING ---- */
  --ls-tight:          -0.02em;
  --ls-normal:         0;
  --ls-wide:           0.04em;
  --ls-caps:           0.08em;

  /* ---- SPACING SCALE (4px base) ---- */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32: 128px;

  /* ---- LAYOUT ---- */
  --container-max:     1320px;
  --container-narrow:  860px;
  --container-px:      clamp(16px, 4vw, 64px);

  /* ---- BORDER RADIUS ---- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-pill: 999px;

  /* ---- SHADOWS ---- */
  --shadow-sm:  0 1px 3px rgba(26,52,70,0.08);
  --shadow-md:  0 4px 16px rgba(26,52,70,0.10);
  --shadow-lg:  0 8px 32px rgba(26,52,70,0.12);

  /* ---- TRANSITIONS ---- */
  --ease-default:  cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 350ms;
}

/* ---- SEMANTIC TYPE CLASSES ---- */
.sem-hero {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  font-weight: var(--weight-bold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-tight);
  color: var(--color-text);
}

.sem-h1 {
  font-family: var(--font-display);
  font-size: var(--text-h1);
  font-weight: var(--weight-bold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-tight);
  color: var(--color-text);
}

.sem-h2 {
  font-family: var(--font-body);
  font-size: var(--text-h2);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-heading);
  color: var(--color-text);
}

.sem-h3 {
  font-family: var(--font-body);
  font-size: var(--text-h3);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-heading);
  color: var(--color-text);
}

.sem-lead {
  font-family: var(--font-body);
  font-size: var(--text-lead);
  font-weight: var(--weight-regular);
  line-height: var(--lh-body);
  color: var(--color-text);
}

.sem-body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--lh-body);
  color: var(--color-text);
}

.sem-small {
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: var(--weight-regular);
  line-height: var(--lh-body);
  color: var(--color-text);
}

.sem-label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: 1;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--color-text);
}

/* ---- ACCENT HIGHLIGHT ---- */
.sem-accent { color: var(--laranja); }

/* ---- BUTTONS ---- */
.sem-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  line-height: 1;
  padding: 14px 28px;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  cursor: pointer;
  transition: background var(--duration-base) var(--ease-default),
              color var(--duration-base) var(--ease-default),
              border-color var(--duration-base) var(--ease-default);
  text-decoration: none;
}

.sem-btn-primary {
  background: var(--laranja);
  color: var(--branco);
  border-color: var(--laranja);
}
.sem-btn-primary:hover {
  background: var(--laranja-hover);
  border-color: var(--laranja-hover);
}

.sem-btn-secondary {
  background: transparent;
  color: var(--grafite);
  border-color: var(--grafite);
}
.sem-btn-secondary:hover {
  background: var(--grafite);
  color: var(--branco);
}

.sem-btn-ghost {
  background: transparent;
  color: var(--laranja);
  border-color: transparent;
  padding-left: 0;
  padding-right: 0;
}
.sem-btn-ghost:hover { color: var(--laranja-hover); }

/* ---- BADGE ---- */
.sem-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  background: var(--laranja-suave);
  color: var(--laranja);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

/* ---- CONTAINER ---- */
.sem-container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-px);
}

.sem-container-narrow {
  width: 100%;
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding: 0 var(--container-px);
}