/* =====================================================================
   Coptas Design System — colors & typography tokens
   Pra quem pensa primeiro.
   ---------------------------------------------------------------------
   The system is strictly monochromatic: preto, branco, e uma escala de
   cinzas para hierarquia. O único acento é o amarelo-âmbar #EBB60F,
   usado com parcimônia em CTAs, destaques e grifos editoriais.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap');

:root {
  /* ------------------------------------------------------------------
     CORE MONOCHROME
     The entire brand sits on this 11-step grayscale. Treat these as
     your whole palette — do not introduce additional neutrals.
     ------------------------------------------------------------------ */
  --ink-000: #FFFFFF;   /* pure white — page bg, reverse type */
  --ink-050: #F6F6F6;   /* off-white — subtle surfaces, cards on white */
  --ink-100: #ECECEC;   /* hairlines, dividers on white */
  --ink-200: #D9D9D9;   /* borders, disabled */
  --ink-300: #B8B8B8;   /* muted metadata */
  --ink-400: #8A8A8A;   /* secondary text on white */
  --ink-500: #5E5E5E;   /* tertiary text, captions */
  --ink-600: #3D3D3D;   /* body on dark, dark surface tone */
  --ink-700: #242424;   /* dark panels (Coptas "preto editorial") */
  --ink-800: #121212;   /* headers, black bars */
  --ink-900: #000000;   /* pure black — logo, primary ink */

  /* ------------------------------------------------------------------
     ACCENT — single amber-yellow, used with restraint
     Only for: primary CTAs, active nav, live/breaking badges,
     inline marker-pen highlights on headlines. Never for body copy.
     ------------------------------------------------------------------ */
  --amber: #EBB60F;          /* signature Coptas yellow-amber */
  --amber-ink: #0A0A0A;      /* foreground color to use ON amber */
  --amber-dim: #C69705;      /* hover/press */
  --amber-wash: #FBE9B3;     /* tint wash for highlight backgrounds */

  /* ------------------------------------------------------------------
     SEMANTIC SURFACES
     ------------------------------------------------------------------ */
  --bg-page:      var(--ink-000);
  --bg-elevated:  var(--ink-050);
  --bg-inverse:   var(--ink-900);
  --bg-inverse-2: var(--ink-700);

  --fg-primary:   var(--ink-900);
  --fg-secondary: var(--ink-500);
  --fg-muted:     var(--ink-400);
  --fg-on-dark:   var(--ink-000);
  --fg-on-dark-2: var(--ink-200);

  --border:       var(--ink-200);
  --border-strong:var(--ink-900);
  --rule:         var(--ink-100);   /* thin editorial rules */

  /* ------------------------------------------------------------------
     TYPE — two families, editorial hierarchy
     Display / UI: Inter (neo-grotesque, authoritative)
     Body / long-form: Lora (serif, readable, credible)
     ------------------------------------------------------------------ */
  --font-display: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-ui:      'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-serif:   'Lora', 'Georgia', 'Times New Roman', serif;
  --font-mono:    ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  /* weights — Inter only goes as heavy as 900; logo uses ~800 */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;
  --fw-black:   800;
  --fw-ultra:   900;

  /* letter-spacing */
  --tracking-tight:   -0.02em;   /* display headlines, logo-like */
  --tracking-snug:    -0.01em;   /* large body, leads */
  --tracking-normal:  0;
  --tracking-wide:     0.04em;   /* eyebrows, labels */
  --tracking-ultra:    0.14em;   /* kicker labels: NOTÍCIAS */

  /* line-height */
  --lh-display: 0.98;
  --lh-tight:   1.08;
  --lh-snug:    1.2;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  /* ------------------------------------------------------------------
     SPACING — 4px base grid
     ------------------------------------------------------------------ */
  --sp-0: 0;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10:40px;
  --sp-12:48px;
  --sp-16:64px;
  --sp-20:80px;
  --sp-24:96px;
  --sp-32:128px;

  /* ------------------------------------------------------------------
     RADII — mostly square. Coptas is editorial & geometric.
     ------------------------------------------------------------------ */
  --radius-0: 0;      /* cards, images, hero containers */
  --radius-1: 2px;    /* inputs, small chips */
  --radius-2: 4px;    /* buttons */
  --radius-pill: 999px; /* tag pills, avatars */

  /* ------------------------------------------------------------------
     ELEVATION — used sparingly. The brand prefers rules + solid blocks.
     ------------------------------------------------------------------ */
  --shadow-0: none;
  --shadow-1: 0 1px 0 0 var(--ink-100);                    /* hairline drop */
  --shadow-2: 0 1px 2px rgba(0,0,0,0.06), 0 1px 1px rgba(0,0,0,0.04);
  --shadow-3: 0 8px 24px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-ink: 6px 6px 0 0 var(--ink-900);                /* editorial offset */

  /* ------------------------------------------------------------------
     MOTION
     ------------------------------------------------------------------ */
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;
  --ease-standard: cubic-bezier(.2,.7,.2,1);
  --ease-entry:    cubic-bezier(.16,.84,.32,1);

  /* ------------------------------------------------------------------
     LAYOUT
     ------------------------------------------------------------------ */
  --container-narrow: 720px;   /* long-form article column */
  --container:        1120px;  /* standard content */
  --container-wide:   1360px;  /* homepage */
}

/* =====================================================================
   SEMANTIC TYPE — ready-to-use editorial hierarchy
   Apply classes directly, or use as a reference for your own components.
   ===================================================================== */

.t-kicker,
.t-eyebrow {
  font-family: var(--font-ui);
  font-weight: var(--fw-bold);
  font-size: 11px;
  line-height: 1;
  letter-spacing: var(--tracking-ultra);
  text-transform: uppercase;
  color: var(--fg-primary);
}

.t-display {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: clamp(48px, 6vw, 88px);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-primary);
}

.t-h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: clamp(36px, 4.2vw, 56px);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}

.t-h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(28px, 2.6vw, 36px);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-snug);
}

.t-h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: var(--tracking-snug);
}

.t-h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: 18px;
  line-height: 1.25;
}

/* Lead paragraph — serif, introduces a story */
.t-lead {
  font-family: var(--font-serif);
  font-weight: var(--fw-regular);
  font-size: 20px;
  line-height: var(--lh-relaxed);
  color: var(--fg-primary);
}

/* Body — long-form article paragraphs */
.t-body {
  font-family: var(--font-serif);
  font-weight: var(--fw-regular);
  font-size: 18px;
  line-height: var(--lh-relaxed);
  color: var(--fg-primary);
}

/* UI body — sans, for app chrome, nav, forms */
.t-ui {
  font-family: var(--font-ui);
  font-weight: var(--fw-regular);
  font-size: 15px;
  line-height: var(--lh-normal);
  color: var(--fg-primary);
}

.t-caption {
  font-family: var(--font-ui);
  font-weight: var(--fw-regular);
  font-size: 13px;
  line-height: 1.4;
  color: var(--fg-secondary);
}

.t-meta {
  font-family: var(--font-ui);
  font-weight: var(--fw-medium);
  font-size: 12px;
  line-height: 1;
  letter-spacing: var(--tracking-wide);
  color: var(--fg-secondary);
  text-transform: uppercase;
}

.t-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: var(--fw-medium);
  font-size: 28px;
  line-height: 1.3;
  letter-spacing: var(--tracking-snug);
  color: var(--fg-primary);
}

/* Inline amber highlight — like a marker pen under a word */
.t-highlight {
  background: linear-gradient(180deg, transparent 58%, var(--amber) 58%, var(--amber) 92%, transparent 92%);
  padding: 0 0.05em;
}

/* Drop-cap for long-form editorial */
.t-dropcap::first-letter {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: 5.2em;
  line-height: 0.85;
  float: left;
  margin: 0.06em 0.08em 0 -0.04em;
  color: var(--fg-primary);
}