/* ============================================================
   PAME · Programa Ads Manager Estratégico
   Colors + Type tokens — confirmed against brand manual
   ============================================================ */

@font-face {
  font-family: "Bohemian Soul";
  src: url("./fonts/BohemianSoul-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400..800&family=Yeseva+One&display=swap');

:root {
  /* ============================================================
     BRAND COLORS — official, with Pantone references
     ============================================================ */

  /* PRIMARY · Blue */
  --pame-blue:        #006A9E;   /* PANTONE P 113-16 C · RGB 0-106-158 · CMYK 90-51-17-3 */
  --pame-blue-90:    #1979AB;
  --pame-blue-80:    #338AB6;
  --pame-blue-70:    #4D9BC1;
  --pame-blue-60:    #66ACCB;
  --pame-blue-50:    #80B5D0;
  --pame-blue-40:    #99C2D9;
  --pame-blue-30:    #B3D2E2;
  --pame-blue-20:    #CCE1EB;
  --pame-blue-10:    #E6F1F5;

  /* ACCENT · Orange */
  --pame-orange:      #FB8907;   /* PANTONE P 24-8 C · RGB 251-137-7 · CMYK 0-55-95-0 */
  --pame-orange-90:   #FC9520;
  --pame-orange-80:   #FCA13B;
  --pame-orange-70:   #FDB05C;
  --pame-orange-60:   #FDBC78;
  --pame-orange-50:   #FDC894;
  --pame-orange-40:   #FED5AF;
  --pame-orange-30:   #FEE0C6;
  --pame-orange-20:   #FFECD9;
  --pame-orange-10:   #FFF6EC;

  /* PRIMARY · Teal */
  --pame-teal:        #00A8C1;   /* PANTONE P 121-7 C · RGB 0-168-193 · CMYK 76-9-23-0 */
  --pame-teal-90:     #19B0C7;
  --pame-teal-80:     #33B9CD;
  --pame-teal-70:     #4DC2D4;
  --pame-teal-60:     #66CBDA;
  --pame-teal-50:     #80D4E0;
  --pame-teal-40:     #99DDE6;
  --pame-teal-30:     #B3E5EC;
  --pame-teal-20:     #CCEEF3;
  --pame-teal-10:     #E6F7F9;

  /* Aliases for darker / lighter shades used semantically */
  --pame-blue-900:    #02334D;   /* Deep brand ink — for dark surfaces */
  --pame-teal-700:    #00768A;   /* Darker teal for hover/press */
  --pame-orange-600:  #DE7600;
  --pame-blue-700:    #004E76;

  /* ---- Neutrals ---- */
  --pame-ink:         #02334D;
  --pame-ink-2:       #335A75;
  --pame-ink-3:       #6E8898;
  --pame-line:        #D9E3EA;
  --pame-bg:          #FFFFFF;
  --pame-bg-soft:     #F4F8FA;
  --pame-bg-cream:    #FFF9F1;

  --pame-success:     #2E9A6B;
  --pame-warning:     var(--pame-orange);
  --pame-danger:      #D04A3B;

  /* ---- Foreground/background semantic ---- */
  --fg-1: var(--pame-ink);
  --fg-2: var(--pame-ink-2);
  --fg-3: var(--pame-ink-3);
  --fg-on-brand: #FFFFFF;
  --bg-1: var(--pame-bg);
  --bg-2: var(--pame-bg-soft);
  --bg-3: var(--pame-blue-900);

  /* ============================================================
     TYPOGRAPHY — Bohemian Soul (display) + Montserrat (UI)
     ============================================================ */

  --font-display: "Bohemian Soul", "Yeseva One", "Playfair Display", Georgia, serif;
  --font-sans:    "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, "Menlo", "Consolas", monospace;

  /* ---- Type scale ---- */
  --fs-12: 12px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-32: 32px;
  --fs-40: 40px;
  --fs-56: 56px;
  --fs-72: 72px;

  --lh-tight:  1.1;
  --lh-snug:   1.25;
  --lh-normal: 1.5;
  --lh-loose:  1.7;

  /* ---- Spacing (4-pt baseline) ---- */
  --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;

  /* ---- Radii ---- */
  --r-xs:  4px;
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  20px;
  --r-xl:  28px;
  --r-pill: 999px;

  /* ---- Shadows (blue-tinted) ---- */
  --shadow-xs: 0 1px 2px rgba(2, 51, 77, 0.06);
  --shadow-sm: 0 2px 6px rgba(2, 51, 77, 0.08);
  --shadow-md: 0 6px 16px rgba(2, 51, 77, 0.10);
  --shadow-lg: 0 18px 40px -12px rgba(2, 51, 77, 0.18);
  --shadow-brand: 0 12px 28px -10px rgba(0, 168, 193, 0.45);

  /* ---- Motion ---- */
  --ease-out:    cubic-bezier(.2, .8, .2, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --t-fast: 120ms;
  --t-base: 200ms;
  --t-slow: 320ms;
}

/* ============================================================
   Semantic typography roles
   ============================================================ */

.pame-display, h1.pame {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-72);
  line-height: var(--lh-tight);
  letter-spacing: 0;
  color: var(--pame-blue);
}
.pame-display em { font-style: italic; color: var(--pame-teal); }

h1 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-40);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
  color: var(--fg-1);
}
h2 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-32);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-20);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.eyebrow {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-12);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pame-orange);
}

p, .body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}
.lead {
  font-size: var(--fs-20);
  line-height: var(--lh-normal);
  color: var(--fg-1);
}
.small, small {
  font-size: var(--fs-14);
  color: var(--fg-3);
}
.caption {
  font-size: var(--fs-12);
  letter-spacing: 0.04em;
  color: var(--fg-3);
}

code, kbd, .mono {
  font-family: var(--font-mono);
  font-size: 0.95em;
}

/* Pill tag */
.pame-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-12);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--pame-teal-20);
  color: var(--pame-teal-700);
}
.pame-tag--orange { background: var(--pame-orange-20); color: var(--pame-orange-600); }
.pame-tag--blue   { background: var(--pame-blue-20);   color: var(--pame-blue-700);   }
.pame-tag--dark   { background: var(--pame-blue-900);  color: #FFFFFF; }