/* =========================================================================
   Prumo Performance — Core tokens
   Colors + Typography for design system + UI kits
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700;800&family=Onest:wght@300;400;500;600;700&display=swap');

/* ============================================================
   Carbona — fonte de display da Prumo (Pangram Pangram).
   Quando os .woff2 forem disponibilizados, coloque em /fonts/
   com os nomes abaixo e tudo passará a renderizar em Carbona
   automaticamente. Até lá, Geist serve como fallback visual.
   ============================================================ */
@font-face {
  font-family: 'Carbona';
  src: url('fonts/Carbona-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Carbona';
  src: url('fonts/Carbona-Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Carbona';
  src: url('fonts/Carbona-Semibold.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Carbona';
  src: url('fonts/Carbona-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

:root {
  /* ---------- Brand palette (the four pastels) ---------- */
  --prumo-lavanda: #B0AFFF;     /* primary accent */
  --prumo-menta:   #B4F3E3;     /* growth, success, secondary */
  --prumo-pessego: #FBD5B0;     /* warmth, tertiary */
  --prumo-azul:    #AEDFFF;     /* info, links, data viz */

  /* Legacy rosa — kept for backwards-compat; no longer in the core 4. */
  --prumo-rosa:    #FFCDF3;

  /* Tinted halves for surfaces */
  --prumo-lavanda-50:  #F2F2FF;
  --prumo-lavanda-100: #E5E5FF;
  --prumo-lavanda-200: #C9C9FF;
  --prumo-lavanda-300: #B0AFFF;
  --prumo-lavanda-400: #8A89FF;
  --prumo-lavanda-500: #6F6EF2;
  --prumo-lavanda-600: #4F4ED4;
  --prumo-lavanda-700: #38379E;

  --prumo-menta-50:  #EEFBF7;
  --prumo-menta-100: #DAF8EE;
  --prumo-menta-200: #B4F3E3;
  --prumo-menta-300: #7DE6CC;
  --prumo-menta-500: #2BB89A;
  --prumo-menta-700: #15735F;

  --prumo-pessego-50:  #FFF8F0;
  --prumo-pessego-100: #FEEBD6;
  --prumo-pessego-200: #FBD5B0;
  --prumo-pessego-300: #F4B883;
  --prumo-pessego-500: #D88A4B;
  --prumo-pessego-700: #8A4F1F;

  --prumo-rosa-50:  #FFF4FC;
  --prumo-rosa-100: #FFE6F9;
  --prumo-rosa-200: #FFCDF3;
  --prumo-rosa-300: #F89FE0;
  --prumo-rosa-500: #C95FA5;
  --prumo-rosa-700: #7E2E66;

  --prumo-azul-50:  #F0F8FF;
  --prumo-azul-100: #DDEEFF;
  --prumo-azul-200: #AEDFFF;
  --prumo-azul-300: #7CC4FA;
  --prumo-azul-500: #2D8FE0;
  --prumo-azul-700: #195C9C;

  /* ---------- Neutrals (ink + paper) ---------- */
  --ink-0:   #0A0A14;          /* deepest — near-black with violet bias */
  --ink-900: #14141F;
  --ink-800: #1F1F2E;
  --ink-700: #2D2D3F;
  --ink-600: #4A4A60;
  --ink-500: #6B6B82;
  --ink-400: #8E8EA3;
  --ink-300: #B5B5C6;
  --ink-200: #D6D6E0;
  --ink-100: #E8E8EE;
  --ink-50:  #F4F4F7;
  --ink-25:  #FAFAFC;
  --paper:   #FFFFFF;

  /* ---------- Semantic foreground ---------- */
  --fg-1: var(--ink-900);       /* primary text */
  --fg-2: var(--ink-700);       /* body */
  --fg-3: var(--ink-500);       /* muted */
  --fg-4: var(--ink-400);       /* placeholder, captions */
  --fg-inverse: var(--paper);

  /* ---------- Semantic backgrounds ---------- */
  --bg-canvas:   var(--paper);
  --bg-subtle:   var(--ink-25);
  --bg-muted:    var(--ink-50);
  --bg-elevated: var(--paper);
  --bg-code:     #FAFAFC;
  --bg-inverse:  var(--ink-0);

  /* ---------- Semantic borders ---------- */
  --border-subtle:  var(--ink-100);
  --border-default: var(--ink-200);
  --border-strong:  var(--ink-300);

  /* ---------- Semantic accents ---------- */
  --accent:           var(--prumo-lavanda);
  --accent-strong:    var(--prumo-lavanda-500);
  --accent-soft:      var(--prumo-lavanda-50);
  --accent-fg-on:     var(--ink-900);   /* text on lavender (pastel needs dark) */

  --success:          var(--prumo-menta-500);
  --success-soft:     var(--prumo-menta-50);
  --warning:          var(--prumo-pessego-500);
  --warning-soft:     var(--prumo-pessego-50);
  --info:             var(--prumo-lavanda-500);
  --info-soft:        var(--prumo-lavanda-50);

  /* ---------- Typography families ---------- */
  --font-display: 'Carbona', 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* Carbona também serve para números/tabelas via font-variant-numeric: tabular-nums */
  --font-mono:    'Carbona', 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ---------- Type scale (T-shirt → semantic) ---------- */
  --text-3xs:  10px;
  --text-2xs:  11px;
  --text-xs:   12px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   16px;
  --text-lg:   18px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  30px;
  --text-4xl:  38px;
  --text-5xl:  48px;
  --text-6xl:  64px;
  --text-7xl:  80px;

  /* ---------- Line heights ---------- */
  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  /* ---------- Letter spacing ---------- */
  --tracking-tighter: -0.03em;
  --tracking-tight:   -0.015em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.08em;

  /* ---------- Spacing scale (4px base) ---------- */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;
  --space-9:  48px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 96px;
  --space-13: 128px;

  /* ---------- Radii ---------- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-pill: 999px;

  /* ---------- Shadows ---------- */
  --shadow-xs: 0 1px 2px rgba(20, 20, 31, 0.05);
  --shadow-sm: 0 1px 3px rgba(20, 20, 31, 0.07), 0 1px 2px rgba(20, 20, 31, 0.04);
  --shadow-md: 0 4px 12px rgba(20, 20, 31, 0.06), 0 2px 4px rgba(20, 20, 31, 0.04);
  --shadow-lg: 0 12px 32px rgba(20, 20, 31, 0.08), 0 4px 8px rgba(20, 20, 31, 0.04);
  --shadow-xl: 0 24px 64px rgba(20, 20, 31, 0.10), 0 8px 16px rgba(20, 20, 31, 0.06);

  /* Tinted glow (used sparingly for hero / CTA halos) */
  --glow-lavanda: 0 0 0 1px rgba(176, 175, 255, 0.22), 0 6px 18px rgba(176, 175, 255, 0.14);
  --glow-menta:   0 0 0 1px rgba(180, 243, 227, 0.25), 0 6px 18px rgba(180, 243, 227, 0.16);

  /* Focus ring */
  --ring: 0 0 0 3px rgba(176, 175, 255, 0.45);

  /* ---------- Motion ---------- */
  --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   400ms;
}

/* =========================================================================
   Semantic type primitives — apply directly with .prumo-h1, .prumo-body, etc.
   Or use `:where()` selectors below for ambient styling.
   ========================================================================= */

.prumo-display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-6xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tighter);
  color: var(--fg-1);
}

.prumo-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-5xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

.prumo-h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-3xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

.prumo-h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

.prumo-h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-lg);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.prumo-eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-xs);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--accent-strong);
}

.prumo-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}

.prumo-body-lg {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-lg);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}

.prumo-body-sm {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-sm);
  line-height: var(--lh-normal);
  color: var(--fg-3);
}

.prumo-caption {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-xs);
  line-height: var(--lh-normal);
  color: var(--fg-4);
}

.prumo-code {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.92em;
  font-weight: 500;
  color: var(--fg-1);
  background: var(--bg-code);
  padding: 0.12em 0.4em;
  border-radius: var(--radius-xs);
  border: 1px solid var(--border-subtle);
}

.prumo-link {
  color: var(--accent-strong);
  text-decoration: none;
  border-bottom: 1px solid var(--prumo-lavanda-200);
  transition: border-color var(--dur-base) var(--ease-out-soft);
}
.prumo-link:hover {
  border-bottom-color: var(--accent-strong);
}

/* ========== Base, when applied to entire docs ========== */
html, body {
  background: var(--bg-canvas);
  color: var(--fg-2);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}