/* ============================================================
   CETERR — Cursos Técnicos · Colors & Type foundations
   Young, dynamic visual identity for vocational education.
   ============================================================ */

/* ---- Fonts ---------------------------------------------------
   Workhorse sans: Barlow family (Google Fonts) — full Latin /
   Portuguese diacritic support. Barlow Black = the logo wordmark.
   Decorative accent: "Barlow Solid" (uploaded, self-hosted) — a
   hand-drawn marker display face for short punch words only.
   NOTE: Barlow Solid has weak diacritic coverage; never set long
   Portuguese copy in it.
--------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,600;1,700;1,800;1,900&family=Barlow+Semi+Condensed:ital,wght@0,500;0,600;0,700;0,800;0,900;1,700;1,800;1,900&family=Barlow+Condensed:ital,wght@0,500;0,600;0,700;0,800;1,600;1,700&display=swap');

@font-face {
  font-family: 'Barlow Solid';
  src: url('fonts/Barlow_solid.ttf') format('truetype');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Brand core palette ---------------------------------- */
  --green-700: #1e7e34;   /* deep green — wordmark "CETE", primary on light */
  --green-600: #2d8a3e;   /* primary green — dominant backgrounds          */
  --green-500: #38a04a;   /* brighter green — hovers / accents             */
  --green-400: #57b86a;   /* light green — tints, illustration             */

  --orange-600: #e85d04;  /* deep orange — pressed / strong CTA            */
  --orange-500: #f48c06;  /* primary orange — wordmark "RR", CTAs          */
  --orange-400: #f9a23a;  /* light orange — hovers                         */
  --gold-500:  #f5a623;   /* gold accent — highlights, stars               */

  --ink:       #1a1a1a;   /* near-black — text, sticker outlines           */
  --ink-soft:  #3a3a3a;   /* secondary dark text                           */
  --white:     #ffffff;

  /* ---- Neutrals (derived, cool-warm balanced) -------------- */
  --n-950: #141414;
  --n-900: #1f1f1f;
  --n-800: #2e2e2e;
  --n-600: #5c5c5c;
  --n-400: #9a9a9a;
  --n-300: #c7c7c7;
  --n-200: #e3e3e3;
  --n-100: #f1f1ef;
  --n-050: #f8f8f6;

  /* ---- Semantic surfaces ----------------------------------- */
  --bg:           var(--white);
  --bg-muted:     var(--n-050);
  --surface:      var(--white);
  --surface-alt:  var(--n-100);
  --bg-brand:     var(--green-600);   /* dominant green hero bg            */
  --bg-brand-alt: var(--orange-500);  /* dominant orange hero bg           */
  --bg-ink:       var(--ink);

  /* ---- Semantic foreground --------------------------------- */
  --fg:        var(--ink);            /* primary text on light            */
  --fg-2:      var(--n-600);          /* secondary text                   */
  --fg-3:      var(--n-400);          /* tertiary / captions              */
  --fg-on-brand: var(--white);        /* text on green / orange           */
  --fg-on-ink:   var(--white);

  /* ---- Accents / actions ----------------------------------- */
  --accent:        var(--orange-500);
  --accent-hover:  var(--orange-400);
  --accent-press:  var(--orange-600);
  --brand:         var(--green-600);
  --brand-hover:   var(--green-500);
  --brand-press:   var(--green-700);

  /* ---- Lines & dividers ------------------------------------ */
  --border:        var(--n-200);
  --border-strong: var(--ink);        /* sticker-style heavy outline      */
  --divider:       var(--n-100);

  /* ---- Status ---------------------------------------------- */
  --success: var(--green-600);
  --warning: var(--gold-500);
  --danger:  #d62828;
  --info:    #2a6fdb;

  /* ============================================================
     TYPE — families, weights, scale
     ============================================================ */
  --font-display: 'Barlow Solid', 'Barlow Semi Condensed', system-ui, sans-serif;
  --font-head:    'Barlow Semi Condensed', 'Barlow', system-ui, sans-serif;
  --font-body:    'Barlow', system-ui, -apple-system, sans-serif;
  --font-cond:    'Barlow Condensed', 'Barlow', system-ui, sans-serif;

  --w-regular: 400;
  --w-medium:  500;
  --w-semi:    600;
  --w-bold:    700;
  --w-xbold:   800;
  --w-black:   900;

  /* Fluid display scale (impactful, jovem) */
  --fs-display: clamp(3rem, 8vw, 6rem);   /* hero punch words */
  --fs-h1: clamp(2.25rem, 4.5vw, 3.5rem);
  --fs-h2: clamp(1.75rem, 3vw, 2.5rem);
  --fs-h3: clamp(1.375rem, 2vw, 1.75rem);
  --fs-subtitle: 1.125rem;
  --fs-lead: 1.25rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-caption: 0.75rem;

  --lh-tight: 0.92;
  --lh-snug: 1.08;
  --lh-head: 1.15;
  --lh-body: 1.55;

  --tracking-tight: -0.01em;
  --tracking-caps: 0.04em;
  --tracking-label: 0.08em;

  /* ============================================================
     RADII · SHADOW · SPACING · MOTION
     ============================================================ */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 32px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(26,26,26,.08), 0 1px 3px rgba(26,26,26,.06);
  --shadow-md: 0 4px 10px rgba(26,26,26,.10), 0 2px 4px rgba(26,26,26,.06);
  --shadow-lg: 0 14px 30px rgba(26,26,26,.14), 0 6px 12px rgba(26,26,26,.08);
  --shadow-brand: 0 10px 24px rgba(30,126,52,.28);
  --shadow-accent: 0 10px 24px rgba(244,140,6,.32);
  /* sticker outline — the hard offset "recorte branco" effect */
  --sticker: 0 0 0 6px var(--white), 6px 6px 0 6px var(--ink);

  --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;

  --ease-out: cubic-bezier(.22,.61,.36,1);
  --ease-snap: cubic-bezier(.34,1.56,.64,1); /* youthful overshoot */
  --dur-fast: 120ms;
  --dur: 200ms;
  --dur-slow: 360ms;
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   ============================================================ */
.ds-display {
  font-family: var(--font-display);
  font-weight: var(--w-black);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  color: var(--fg);
}
.ds-h1 {
  font-family: var(--font-head);
  font-weight: var(--w-black);
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  color: var(--fg);
}
.ds-h2 {
  font-family: var(--font-head);
  font-weight: var(--w-xbold);
  font-size: var(--fs-h2);
  line-height: var(--lh-head);
  text-transform: uppercase;
  color: var(--fg);
}
.ds-h3 {
  font-family: var(--font-head);
  font-weight: var(--w-bold);
  font-size: var(--fs-h3);
  line-height: var(--lh-head);
  color: var(--fg);
}
.ds-subtitle {
  font-family: var(--font-head);
  font-weight: var(--w-bold);
  font-style: italic;
  font-size: var(--fs-subtitle);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--accent);
}
.ds-lead {
  font-family: var(--font-body);
  font-weight: var(--w-medium);
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  color: var(--fg-2);
}
.ds-body {
  font-family: var(--font-body);
  font-weight: var(--w-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg);
}
.ds-label {
  font-family: var(--font-cond);
  font-weight: var(--w-bold);
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--fg);
}
.ds-caption {
  font-family: var(--font-body);
  font-weight: var(--w-medium);
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking-caps);
  color: var(--fg-3);
}

/* ============================================================
   REAL-BRAND COMPONENTS — added 2026-07-01 from Instagram Stories
   reference (see referencia-stories-reais.md). Use these for new
   pieces; the 5 legacy templates in posts/ predate this correction.
   ============================================================ */

/* "Etiqueta" stacked badge headline — e.g. "CURSOS" (black) + "TÉCNICOS" (white) */
.ds-badge-stack { display: inline-flex; flex-direction: column; align-items: flex-start; }
.ds-badge {
  font-family: var(--font-head);
  font-weight: var(--w-black);
  text-transform: uppercase;
  font-size: var(--fs-h1);
  line-height: 1;
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-xs);
}
.ds-badge-dark { background: var(--ink); color: var(--green-600); }
.ds-badge-light { background: var(--white); color: var(--green-700); margin-top: -4px; margin-left: var(--sp-5); }

/* Photo card with brand-color tint — used when a real cut-out photo isn't
   available yet and a licensed/stock reference photo is used instead. */
.ds-photo-card { position: relative; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.ds-photo-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ds-photo-card .ds-photo-tint {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(45,138,62,.08) 0%, rgba(20,70,30,.55) 100%);
}
.ds-photo-card .ds-photo-credit {
  position: absolute; bottom: 10px; right: 14px;
  font-family: var(--font-cond); font-weight: 600; font-size: 14px; color: rgba(255,255,255,.7);
}