/* ============================================================
   PROTEVO — colors_and_type.css
   Tokens for the Protevo brand identity. Import this and use
   the semantic vars (--p-h1, --p-bg, --p-fg, --p-accent, etc.)
   anywhere you need to honor the brand.

   The brand uses the full Roboto super-family:
   - Roboto                (5 widths × many weights) — body
   - Roboto SemiCondensed                            — display / editorial
   - Roboto Condensed                                — chips · OOH · labels
   Plus JetBrains Mono for the bracketed UI chrome.
   ============================================================ */

/* ---- Self-hosted Roboto super-family ----------------------- */
/* We register one weight per slot. Italic axis is registered
   alongside the upright (font-style: italic). */

@font-face { font-family: 'Roboto'; font-weight: 100; font-style: normal; font-display: swap; src: url('fonts/Roboto-Thin.ttf') format('truetype'); }
@font-face { font-family: 'Roboto'; font-weight: 100; font-style: italic; font-display: swap; src: url('fonts/Roboto-ThinItalic.ttf') format('truetype'); }
@font-face { font-family: 'Roboto'; font-weight: 200; font-style: normal; font-display: swap; src: url('fonts/Roboto-ExtraLight.ttf') format('truetype'); }
@font-face { font-family: 'Roboto'; font-weight: 200; font-style: italic; font-display: swap; src: url('fonts/Roboto-ExtraLightItalic.ttf') format('truetype'); }
@font-face { font-family: 'Roboto'; font-weight: 300; font-style: normal; font-display: swap; src: url('fonts/Roboto-Light.ttf') format('truetype'); }
@font-face { font-family: 'Roboto'; font-weight: 300; font-style: italic; font-display: swap; src: url('fonts/Roboto-LightItalic.ttf') format('truetype'); }
@font-face { font-family: 'Roboto'; font-weight: 400; font-style: normal; font-display: swap; src: url('fonts/Roboto-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Roboto'; font-weight: 400; font-style: italic; font-display: swap; src: url('fonts/Roboto-Italic.ttf') format('truetype'); }
@font-face { font-family: 'Roboto'; font-weight: 500; font-style: normal; font-display: swap; src: url('fonts/Roboto-Medium.ttf') format('truetype'); }
@font-face { font-family: 'Roboto'; font-weight: 500; font-style: italic; font-display: swap; src: url('fonts/Roboto-MediumItalic.ttf') format('truetype'); }
@font-face { font-family: 'Roboto'; font-weight: 600; font-style: normal; font-display: swap; src: url('fonts/Roboto-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'Roboto'; font-weight: 600; font-style: italic; font-display: swap; src: url('fonts/Roboto-SemiBoldItalic.ttf') format('truetype'); }
@font-face { font-family: 'Roboto'; font-weight: 700; font-style: normal; font-display: swap; src: url('fonts/Roboto-Bold.ttf') format('truetype'); }
@font-face { font-family: 'Roboto'; font-weight: 700; font-style: italic; font-display: swap; src: url('fonts/Roboto-BoldItalic.ttf') format('truetype'); }
@font-face { font-family: 'Roboto'; font-weight: 800; font-style: normal; font-display: swap; src: url('fonts/Roboto-ExtraBold.ttf') format('truetype'); }
@font-face { font-family: 'Roboto'; font-weight: 800; font-style: italic; font-display: swap; src: url('fonts/Roboto-ExtraBoldItalic.ttf') format('truetype'); }
@font-face { font-family: 'Roboto'; font-weight: 900; font-style: normal; font-display: swap; src: url('fonts/Roboto-Black.ttf') format('truetype'); }
@font-face { font-family: 'Roboto'; font-weight: 900; font-style: italic; font-display: swap; src: url('fonts/Roboto-BlackItalic.ttf') format('truetype'); }

@font-face { font-family: 'Roboto SemiCondensed'; font-weight: 400; font-style: normal; font-display: swap; src: url('fonts/Roboto_SemiCondensed-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Roboto SemiCondensed'; font-weight: 400; font-style: italic; font-display: swap; src: url('fonts/Roboto_SemiCondensed-Italic.ttf') format('truetype'); }
@font-face { font-family: 'Roboto SemiCondensed'; font-weight: 500; font-style: normal; font-display: swap; src: url('fonts/Roboto_SemiCondensed-Medium.ttf') format('truetype'); }
@font-face { font-family: 'Roboto SemiCondensed'; font-weight: 500; font-style: italic; font-display: swap; src: url('fonts/Roboto_SemiCondensed-MediumItalic.ttf') format('truetype'); }
@font-face { font-family: 'Roboto SemiCondensed'; font-weight: 700; font-style: normal; font-display: swap; src: url('fonts/Roboto_SemiCondensed-Bold.ttf') format('truetype'); }
@font-face { font-family: 'Roboto SemiCondensed'; font-weight: 700; font-style: italic; font-display: swap; src: url('fonts/Roboto_SemiCondensed-BoldItalic.ttf') format('truetype'); }
@font-face { font-family: 'Roboto SemiCondensed'; font-weight: 800; font-style: normal; font-display: swap; src: url('fonts/Roboto_SemiCondensed-ExtraBold.ttf') format('truetype'); }
@font-face { font-family: 'Roboto SemiCondensed'; font-weight: 800; font-style: italic; font-display: swap; src: url('fonts/Roboto_SemiCondensed-ExtraBoldItalic.ttf') format('truetype'); }
@font-face { font-family: 'Roboto SemiCondensed'; font-weight: 900; font-style: normal; font-display: swap; src: url('fonts/Roboto_SemiCondensed-Black.ttf') format('truetype'); }
@font-face { font-family: 'Roboto SemiCondensed'; font-weight: 900; font-style: italic; font-display: swap; src: url('fonts/Roboto_SemiCondensed-BlackItalic.ttf') format('truetype'); }

@font-face { font-family: 'Roboto Condensed'; font-weight: 400; font-style: normal; font-display: swap; src: url('fonts/Roboto_Condensed-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Roboto Condensed'; font-weight: 400; font-style: italic; font-display: swap; src: url('fonts/Roboto_Condensed-Italic.ttf') format('truetype'); }
@font-face { font-family: 'Roboto Condensed'; font-weight: 500; font-style: normal; font-display: swap; src: url('fonts/Roboto_Condensed-Medium.ttf') format('truetype'); }
@font-face { font-family: 'Roboto Condensed'; font-weight: 500; font-style: italic; font-display: swap; src: url('fonts/Roboto_Condensed-MediumItalic.ttf') format('truetype'); }
@font-face { font-family: 'Roboto Condensed'; font-weight: 700; font-style: normal; font-display: swap; src: url('fonts/Roboto_Condensed-Bold.ttf') format('truetype'); }
@font-face { font-family: 'Roboto Condensed'; font-weight: 700; font-style: italic; font-display: swap; src: url('fonts/Roboto_Condensed-BoldItalic.ttf') format('truetype'); }
@font-face { font-family: 'Roboto Condensed'; font-weight: 900; font-style: normal; font-display: swap; src: url('fonts/Roboto_Condensed-Black.ttf') format('truetype'); }
@font-face { font-family: 'Roboto Condensed'; font-weight: 900; font-style: italic; font-display: swap; src: url('fonts/Roboto_Condensed-BlackItalic.ttf') format('truetype'); }

/* JetBrains Mono — Google-Fonts hosted; brand mono for UI chrome */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* ---- Brand palette (raw) -------------------------------- */
  --p-orange:        #FF4202;
  --p-orange-700:    #C73000;
  --p-orange-100:    #FFE4D9;

  --p-black:         #131313;
  --p-black-soft:    #1E1E1E;
  --p-graphite:      #2A2A2A;

  --p-cream:         #F0F2F1;
  --p-cream-200:     #E4E7E6;
  --p-white:         #FFFFFF;  /* utility only — never a primary surface */

  /* Secondary slide grounds (per brand) */
  --p-lime:          #B9CC30;
  --p-wine:          #350616;
  --p-electric-blue: #0558F2;
  --p-navy:          #153A55;
  --p-olive:         #28301B;
  --p-beige:         #EBD8B6;
  --p-sand:          #9B8C7E;

  /* ---- Semantic surface tokens ---------------------------- */
  --p-bg:            var(--p-cream);
  --p-bg-ink:        var(--p-black);
  --p-fg:            var(--p-black);
  --p-fg-muted:      #5A5A5A;
  --p-fg-inverse:    var(--p-cream);
  --p-accent:        var(--p-orange);
  --p-rule:          var(--p-black);
  --p-rule-soft:     rgba(19, 19, 19, 0.18);
  --p-rule-inverse:  rgba(240, 242, 241, 0.30);

  /* ---- Type families (canonical) -------------------------- */
  /* Display = the editorial Roboto. SemiCondensed at 900/Italic
     is the brand's headline DNA — long, sharp, slightly leaned. */
  --p-font-display:   'Roboto SemiCondensed', 'Roboto Condensed', 'Roboto', system-ui, sans-serif;
  --p-font-condensed: 'Roboto Condensed', 'Roboto', system-ui, sans-serif;
  --p-font-sans:      'Roboto', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --p-font-brand:     'Roboto', system-ui, sans-serif;          /* wordmark */
  --p-font-mono:      'JetBrains Mono', 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Legacy alias — anywhere old `--p-font-serif` is referenced. */
  --p-font-serif:     var(--p-font-display);

  /* ---- Type sizes (slide-scale; 1920 grid) ---------------- */
  --p-fs-hero:    7.5rem;
  --p-fs-display: 4.5rem;
  --p-fs-h1:      3.5rem;
  --p-fs-h2:      2.5rem;
  --p-fs-h3:      1.75rem;
  --p-fs-h4:      1.25rem;
  --p-fs-body:    1.0625rem;
  --p-fs-caption: 0.875rem;
  --p-fs-eyebrow: 0.75rem;

  /* ---- Spacing & radius ---------------------------------- */
  --p-radius-chip: 4px;
  --p-radius-card: 8px;
  --p-radius-pill: 999px;
  --p-rule-w: 1px;
  --p-rule-w-bold: 2px;
}

/* ===== Semantic element styles ============================= */

.p-hero,
.p-h1 {
  font-family: var(--p-font-display);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(2.75rem, 6vw, var(--p-fs-hero));
  line-height: 0.92;
  letter-spacing: -0.02em;
  color: var(--p-fg);
  text-wrap: balance;
}

.p-display {
  font-family: var(--p-font-display);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(2rem, 4.5vw, var(--p-fs-display));
  line-height: 0.95;
  letter-spacing: -0.015em;
}

.p-h2 {
  font-family: var(--p-font-display);
  font-weight: 800;
  font-size: var(--p-fs-h2);
  line-height: 1.0;
  letter-spacing: -0.01em;
}

.p-h3 {
  font-family: var(--p-font-display);
  font-weight: 700;
  font-size: var(--p-fs-h3);
  line-height: 1.1;
  letter-spacing: -0.005em;
}

/* Inline emphasis — sharp underline on Roboto italic */
.p-em {
  font-family: var(--p-font-display);
  font-style: italic;
  font-weight: 900;
  border-bottom: var(--p-rule-w-bold) solid currentColor;
  padding-bottom: 0.05em;
}

.p-body {
  font-family: var(--p-font-sans);
  font-weight: 400;
  font-size: var(--p-fs-body);
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--p-fg);
}

.p-body-mono {
  font-family: var(--p-font-mono);
  font-weight: 400;
  font-size: var(--p-fs-body);
  line-height: 1.45;
  letter-spacing: -0.01em;
}

.p-chip,
.p-mono {
  font-family: var(--p-font-mono);
  font-weight: 400;
  font-size: var(--p-fs-caption);
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--p-fg);
}

.p-eyebrow {
  font-family: var(--p-font-mono);
  font-weight: 500;
  font-size: var(--p-fs-eyebrow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--p-fg-muted);
}

.p-footer-tagline {
  font-family: var(--p-font-mono);
  font-size: var(--p-fs-caption);
  letter-spacing: 0.01em;
  color: currentColor;
}
.p-footer-tagline .promise  { font-weight: 400; }
.p-footer-tagline .delivery { font-weight: 700; }