/* ============================================================
   PromTechGroup — Colors & Type Foundation
   Palette derived directly from the brand mark (orange gerbera).
   - Display:  Bricolage Grotesque (brand font, self-hosted) for
               LATIN — wordmark, numerals, loanwords. NOTE: it has
               NO Cyrillic, so Unbounded is kept as the per-glyph
               fallback that carries all Russian display headlines.
   - Text/UI:  Golos Text  (neutral Russian grotesque workhorse, CDN)
   - Mono:     JetBrains Mono (AI / prompt / code accents, CDN)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@400;500;600;700;800&family=Golos+Text:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

/* Brand display font (user-uploaded, self-hosted). Variable: opsz/wdth/wght. */
@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('fonts/BricolageGrotesque-VariableFont_opsz_wdth_wght.ttf') format('truetype');
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-display: swap;
}

:root {
  /* ---------- BRAND / PRIMARY (from the gerbera petals) ---------- */
  --orange:        #EE6A1B;  /* hero / primary action */
  --orange-bright: #FF7E2E;  /* lit petal, highlights, gradients */
  --orange-deep:   #C9531A;  /* hover / pressed primary */
  --orange-ember:  #E1452A;  /* petal-to-core transition, warm accent */

  /* ---------- ACCENT (from the crimson inner ring) ---------- */
  --crimson:       #C2151A;  /* secondary accent, alerts of energy */
  --crimson-deep:  #8E0F12;  /* deepest ring */

  /* ---------- INK (from the dark core) ---------- */
  --ink:           #1C1310;  /* primary text, warm near-black */
  --ink-2:         #4A3B33;  /* secondary text */
  --ink-3:         #8A776C;  /* tertiary text, captions */
  --ink-4:         #B9A89C;  /* disabled, hairline-on-cream */

  /* ---------- SURFACES (warm cream paper) ---------- */
  --cream:         #FBF5EC;  /* page background */
  --cream-2:       #F4EADb;  /* alt section / sunken */
  --paper:         #FFFFFF;  /* cards, raised surfaces */
  --peach:         #FDEAD9;  /* orange-tint wash / soft chips */
  --peach-2:       #FBDABF;  /* stronger tint, progress tracks */

  /* ---------- INK-MODE SURFACES (dark sections) ---------- */
  --ink-bg:        #1A1310;  /* dark section background */
  --ink-bg-2:      #271C16;  /* raised on dark */
  --ink-line:      #3A2C24;  /* hairline on dark */
  --on-ink:        #FBF5EC;  /* text on dark */
  --on-ink-2:      #C8B6A8;  /* secondary text on dark */

  /* ---------- SEMANTIC ---------- */
  --success:       #2E7D4F;
  --success-soft:  #DDF0E4;
  --warning:       #C98A12;
  --warning-soft:  #FBEFCF;
  --danger:        #C2151A;
  --danger-soft:   #FBDCDA;
  --info:          #2A6FB0;
  --info-soft:     #DCEAF6;

  /* ---------- HAIRLINES / BORDERS ---------- */
  --line:          #E9DCC9;  /* default border on cream */
  --line-strong:   #D8C6AE;  /* stronger border / dividers */
  --line-ink:      rgba(28,19,16,0.12);

  /* ---------- TYPE FAMILIES ---------- */
  /* Latin glyphs render in Bricolage Grotesque; Cyrillic falls through to
     Unbounded automatically (Bricolage has no Cyrillic coverage). */
  --font-display: 'Bricolage Grotesque', 'Unbounded', system-ui, sans-serif;
  --font-display-cyr: 'Unbounded', system-ui, sans-serif;
  --font-text:    'Golos Text', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  /* ---------- TYPE SCALE (fluid, 1.25 major-third-ish) ---------- */
  --fs-display:   clamp(3rem, 6vw, 5.5rem);   /* hero numerals/headlines */
  --fs-h1:        clamp(2.25rem, 4vw, 3.5rem);
  --fs-h2:        clamp(1.75rem, 3vw, 2.5rem);
  --fs-h3:        clamp(1.375rem, 2vw, 1.75rem);
  --fs-h4:        1.25rem;
  --fs-lead:      1.25rem;   /* intro paragraphs */
  --fs-body:      1.0625rem; /* 17px base reading */
  --fs-sm:        0.9375rem;
  --fs-xs:        0.8125rem;
  --fs-overline:  0.75rem;

  /* ---------- RADII ---------- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* ---------- SPACING (8px base) ---------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --s-9: 96px; --s-10: 128px;

  /* ---------- SHADOWS (warm-tinted, never blue-grey) ---------- */
  --shadow-xs: 0 1px 2px rgba(46,22,8,0.06);
  --shadow-sm: 0 2px 6px rgba(46,22,8,0.08);
  --shadow-md: 0 8px 24px rgba(46,22,8,0.10);
  --shadow-lg: 0 20px 48px rgba(46,22,8,0.14);
  --shadow-orange: 0 10px 28px rgba(238,106,27,0.30);

  /* ---------- MOTION ---------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 140ms;
  --dur: 240ms;
  --dur-slow: 420ms;
}

/* ============================================================
   SEMANTIC ELEMENT DEFAULTS
   ============================================================ */
.pt-body, body.pt {
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.pt h1, .pt h2, .pt h3, .pt-display {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.04;
  color: var(--ink);
  text-wrap: balance;
}

.pt-display  { font-size: var(--fs-display); font-weight: 800; }
.pt h1, .h1  { font-size: var(--fs-h1); }
.pt h2, .h2  { font-size: var(--fs-h2); }
.pt h3, .h3  { font-family: var(--font-text); font-weight: 700; font-size: var(--fs-h3); letter-spacing:-0.01em; line-height:1.15; }
.h4          { font-family: var(--font-text); font-weight: 700; font-size: var(--fs-h4); }

.lead   { font-size: var(--fs-lead); line-height: 1.5; color: var(--ink-2); }
.small  { font-size: var(--fs-sm); }
.xs     { font-size: var(--fs-xs); }

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

.mono { font-family: var(--font-mono); font-feature-settings: "calt" 1; }

a.pt-link { color: var(--orange-deep); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px; }
a.pt-link:hover { color: var(--orange); }

/* numeric / stat display */
.stat-num { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.03em; line-height: 1; color: var(--orange); }