/* =========================================================================
   PECS Design System — Colors & Typography Tokens
   Source of truth: PECS_Manual_Identidade_Visual_v3.pdf (v1.0, 2025)
   "Preto + Dourado" — Authority, Prestige, Excellence
   ========================================================================= */

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

:root {
  /* -----------------------------------------------------------------------
     NEUTRAL SCALE — 8 official steps (warm-cast)
     ----------------------------------------------------------------------- */
  --pecs-preto:       #111111;   /* Preto Profundo — dark mode bg / dark logo bg */
  --pecs-grafite:     #1E1E1E;   /* Grafite Escuro — premium dark cards & surfaces */
  --pecs-carvao:      #3D3D3D;   /* Cinza Carvão — body text on light bg, icons */
  --pecs-medio:       #8A8A8A;   /* Cinza Médio — secondary text, placeholders */
  --pecs-nevoa:       #BEBDBA;   /* Cinza Névoa — soft borders, dividers */
  --pecs-areia:       #DDD9D2;   /* Cinza Areia — card bg, alternating sections */
  --pecs-marfim:      #F5F3EE;   /* Marfim — primary light bg, papelaria */
  --pecs-branco:      #FFFFFF;   /* Branco Puro — digital bg, breathing room */

  /* -----------------------------------------------------------------------
     GOLD SCALE — 5 official steps + an amarelo-giz highlight
     ----------------------------------------------------------------------- */
  --pecs-ouro-sombra:    #A07830;   /* Outline, taglines, secondary detail */
  --pecs-ouro-classico:  #C9A84C;   /* PRIMARY — logo, icons, structural */
  --pecs-ouro-brilhante: #F5D77E;   /* Text on dark, highlights */
  --pecs-ouro-perola:    #FAE8A0;   /* Light reflex, icon hot-spots */
  --pecs-amarelo-giz:    #FDF5D0;   /* Maximum brightness, premium text */

  /* Gradient ribbon — the manual's "demonstração escala dourada completa" */
  --gold-gradient: linear-gradient(90deg,
    var(--pecs-ouro-sombra)    0%,
    var(--pecs-ouro-classico) 25%,
    var(--pecs-ouro-brilhante) 50%,
    var(--pecs-ouro-perola)   75%,
    var(--pecs-amarelo-giz)  100%);

  /* Semantic feedback (engineered to fit the warm-neutral system) */
  --pecs-success: #4F8A52;
  --pecs-warning: #C9A84C;       /* uses Ouro Clássico */
  --pecs-danger:  #A8392E;
  --pecs-info:    #4B6B82;

  /* -----------------------------------------------------------------------
     SEMANTIC TOKENS — use these in components
     ----------------------------------------------------------------------- */

  /* Surfaces */
  --bg-canvas:        var(--pecs-branco);
  --bg-paper:         var(--pecs-marfim);          /* warm-paper alternative bg */
  --bg-subtle:        var(--pecs-areia);           /* alternating section */
  --bg-muted:         #EFECE5;                     /* between marfim and areia */
  --bg-inverse:       var(--pecs-preto);
  --bg-inverse-2:     var(--pecs-grafite);
  --bg-card:          var(--pecs-branco);
  --bg-card-paper:    var(--pecs-marfim);
  --bg-card-dark:     var(--pecs-grafite);

  /* Ink */
  --fg-primary:       var(--pecs-preto);
  --fg-body:          var(--pecs-carvao);
  --fg-secondary:     var(--pecs-medio);
  --fg-muted:         var(--pecs-nevoa);
  --fg-on-dark:       var(--pecs-marfim);
  --fg-on-dark-2:     var(--pecs-areia);
  --fg-accent:        var(--pecs-ouro-classico);
  --fg-accent-dark:   var(--pecs-ouro-sombra);
  --fg-accent-bright: var(--pecs-ouro-brilhante);

  /* Borders & dividers */
  --border-subtle:    var(--pecs-areia);
  --border-default:   var(--pecs-nevoa);
  --border-strong:    var(--pecs-carvao);
  --border-accent:    var(--pecs-ouro-classico);
  --border-on-dark:   rgba(245, 215, 126, 0.18);   /* subtle gold on black */

  /* Interactive */
  --action-primary:        var(--pecs-ouro-classico);
  --action-primary-hover:  var(--pecs-ouro-brilhante);
  --action-primary-press:  var(--pecs-ouro-sombra);
  --action-primary-fg:     var(--pecs-preto);

  --action-inverse:        var(--pecs-preto);
  --action-inverse-hover:  var(--pecs-grafite);
  --action-inverse-fg:     var(--pecs-marfim);

  /* -----------------------------------------------------------------------
     TYPOGRAPHY — FAMILIES
     Lora (serif, humanist) — authority, tradition, elegance
     Lato (sans, humanist) — clarity, modernity, interface
     ----------------------------------------------------------------------- */
  --font-serif: 'Lora', 'Garamond', Georgia, 'Times New Roman', serif;
  --font-sans:  'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono:  'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Type scale — calibrated to the manual's reference sizes
     (Lora 32/22/16/13 · Lato 14/12/11/10)
     translated to a digital scale with consistent ratios. */
  --fs-10:  0.625rem;     /* 10px — micro / metadata */
  --fs-11:  0.6875rem;    /* 11px — body small */
  --fs-12:  0.75rem;      /* 12px — body fine */
  --fs-13:  0.8125rem;    /* 13px — italic quote (Lora) */
  --fs-14:  0.875rem;     /* 14px — labels (Lato Bold) */
  --fs-16:  1rem;         /* 16px — Lora subtitle / large body */
  --fs-18:  1.125rem;     /* 18px — lead body */
  --fs-22:  1.375rem;     /* 22px — Lora section title */
  --fs-28:  1.75rem;      /* 28px — H2 */
  --fs-32:  2rem;         /* 32px — Lora display (manual ref) */
  --fs-44:  2.75rem;      /* 44px — H1 large */
  --fs-56:  3.5rem;       /* 56px — Hero display */
  --fs-72:  4.5rem;       /* 72px — mega numeric */

  /* Weights — anchored to the families actually loaded */
  --fw-light:     300;    /* Lato Light */
  --fw-regular:   400;    /* Lato Regular · Lora Regular */
  --fw-medium:    500;    /* Lora Medium */
  --fw-semibold:  600;    /* Lora SemiBold */
  --fw-bold:      700;    /* Lato Bold · Lora Bold */
  --fw-black:     900;    /* Lato Black — sparing use */

  /* Line heights */
  --lh-tight:    1.1;
  --lh-snug:     1.25;
  --lh-base:     1.5;
  --lh-relaxed:  1.65;
  --lh-loose:    1.85;

  /* Letter spacing */
  --ls-tighter: -0.02em;
  --ls-tight:   -0.01em;
  --ls-normal:   0;
  --ls-wide:     0.04em;
  --ls-wider:    0.12em;
  --ls-widest:   0.22em;   /* eyebrow caps, Lato Bold */

  /* -----------------------------------------------------------------------
     SPACING — 4px base grid
     ----------------------------------------------------------------------- */
  --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;

  /* -----------------------------------------------------------------------
     RADII — print-card discipline, restrained
     ----------------------------------------------------------------------- */
  --radius-none: 0;
  --radius-sm:   2px;       /* fields, badges */
  --radius-md:   4px;       /* buttons, cards */
  --radius-lg:   8px;       /* large cards / modal */
  --radius-xl:  16px;
  --radius-pill: 999px;

  /* -----------------------------------------------------------------------
     ELEVATION — black-tinted shadows (we're a black brand)
     ----------------------------------------------------------------------- */
  --shadow-xs:   0 1px 2px rgba(17, 17, 17, 0.05);
  --shadow-sm:   0 2px 4px rgba(17, 17, 17, 0.06), 0 1px 2px rgba(17, 17, 17, 0.04);
  --shadow-md:   0 6px 14px rgba(17, 17, 17, 0.08), 0 2px 4px rgba(17, 17, 17, 0.05);
  --shadow-lg:   0 14px 30px rgba(17, 17, 17, 0.10), 0 4px 8px rgba(17, 17, 17, 0.04);
  --shadow-xl:   0 24px 50px rgba(17, 17, 17, 0.14), 0 8px 16px rgba(17, 17, 17, 0.06);
  --shadow-gold: 0 10px 28px rgba(201, 168, 76, 0.30);

  /* -----------------------------------------------------------------------
     MOTION — elegant, never bouncy
     ----------------------------------------------------------------------- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 150ms;
  --duration-base: 240ms;
  --duration-slow: 420ms;
}

/* =========================================================================
   BASE
   ========================================================================= */

body {
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--fg-body);
  background: var(--bg-canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* =========================================================================
   TYPE — semantic classes
   Lora for display / serif voice. Lato for sans / interface.
   ========================================================================= */

/* Hero display — Lora Bold, the headline above the fold */
.t-display {
  font-family: var(--font-serif);
  font-weight: var(--fw-bold);
  font-size: var(--fs-56);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tighter);
  color: var(--fg-primary);
}

/* H1 — major page title (manual ref: Lora 32pt Bold Display) */
.t-h1, h1 {
  font-family: var(--font-serif);
  font-weight: var(--fw-bold);
  font-size: var(--fs-44);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tighter);
  color: var(--fg-primary);
}

/* H2 — section title (manual ref: Lora 22pt Section Title) */
.t-h2, h2 {
  font-family: var(--font-serif);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-28);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--fg-primary);
}

/* H3 — Lora Subtítulo e Destaques (manual ref: Lora 16pt) */
.t-h3, h3 {
  font-family: var(--font-serif);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-22);
  line-height: var(--lh-snug);
  color: var(--fg-primary);
}

/* H4 — Lato Bold labels and minor titles */
.t-h4, h4 {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-16);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--fg-primary);
}

/* Eyebrow — gold caps, Lato Bold tracked wide */
.t-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-11);
  line-height: var(--lh-base);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--fg-accent);
}

/* Lead — Lato SemiBold / Regular at 18px */
.t-lead {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-18);
  line-height: var(--lh-relaxed);
  color: var(--fg-body);
}

/* Body — Lato Regular (manual ref: Lato 12pt body, scaled for screen) */
.t-body, p {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-16);
  line-height: var(--lh-relaxed);
  color: var(--fg-body);
}

/* Small — Lato Regular caption */
.t-small {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-14);
  line-height: var(--lh-base);
  color: var(--fg-body);
}

/* Meta — Lato Light footnote (manual ref: Lato Light 10pt) */
.t-meta {
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: var(--fs-12);
  line-height: var(--lh-base);
  letter-spacing: var(--ls-wide);
  color: var(--fg-secondary);
}

/* Quote — Lora italic, for citations & destaques */
.t-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: var(--fw-regular);
  font-size: var(--fs-22);
  line-height: var(--lh-relaxed);
  color: var(--fg-primary);
}

/* Stat — big numeric, Lora Bold in Ouro Clássico */
.t-stat {
  font-family: var(--font-serif);
  font-weight: var(--fw-bold);
  font-size: var(--fs-72);
  line-height: 1;
  letter-spacing: var(--ls-tighter);
  color: var(--fg-accent);
}

/* Button label — Lato Bold tracked */
.t-button {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-14);
  line-height: 1;
  letter-spacing: var(--ls-wide);
}

/* Tagline — Lato regular small, for "Consultoria · Negócios · Tecnologia" */
.t-tagline {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-12);
  line-height: var(--lh-base);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--fg-accent-dark);
}