/* =========================================================
   POSTIFYER — DESIGN TOKENS
   Brand: a Telegram bot that turns forwarded posts and voice
   memos into publication-ready posts. Visual system is
   intentionally minimal: one gradient, one blue, two neutrals.
   ========================================================= */

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

/* Jacobs Sans is still available as an optional brand font; uncomment to use.
   Note: TTF files are ~250 KB each — prefer Manrope/Inter for web.
@font-face { font-family: 'Jacobs Sans'; font-weight: 400; src: url('fonts/JACOBSSANS-REGULAR.TTF') format('truetype'); }
@font-face { font-family: 'Jacobs Sans'; font-weight: 500; src: url('fonts/JACOBSSANS-MEDIUM.TTF') format('truetype'); }
@font-face { font-family: 'Jacobs Sans'; font-weight: 600; src: url('fonts/JACOBSSANS-SEMIBOLD.TTF') format('truetype'); }
@font-face { font-family: 'Jacobs Sans'; font-weight: 700; src: url('fonts/JACOBSSANS-BOLD.TTF') format('truetype'); }
@font-face { font-family: 'Jacobs Sans Condensed'; font-weight: 700; src: url('fonts/JACOBSSANSCONDENSED-BOLD.TTF') format('truetype'); }
*/

:root {
  /* ---------- BRAND ---------- */
  --pf-brand-blue:        #3E77F9;   /* gradient start, vivid azure */
  --pf-brand-indigo:      #735DF3;   /* gradient end, indigo-violet */
  --pf-brand-gradient:    linear-gradient(135deg, #3E77F9 0%, #735DF3 100%);
  --pf-brand-gradient-soft: linear-gradient(135deg, rgba(62,119,249,.10) 0%, rgba(115,93,243,.10) 100%);

  /* ---------- PRIMARY (action) ---------- */
  --pf-primary:           #5C7FFA;   /* mid-blue, the action color */
  --pf-primary-hover:     #4D71F2;
  --pf-primary-press:     #3F63E5;
  --pf-primary-soft:      #E8EEFE;   /* tint for selected rows */
  --pf-on-primary:        #FFFFFF;

  --pf-accent:            #735DF3;   /* indigo, second-tier accent */
  --pf-accent-soft:       #ECE8FE;

  /* ---------- NEUTRALS (light) ---------- */
  --pf-ink:               #0E1116;   /* primary text */
  --pf-ink-2:             #3A4150;   /* secondary text */
  --pf-ink-3:             #6B7280;   /* tertiary / metadata */
  --pf-ink-4:             #A0A6B2;   /* hint / placeholder */

  --pf-paper:             #FFFFFF;   /* card / bubble surface */
  --pf-mist:              #F4F5F8;   /* chat background */
  --pf-mist-2:            #ECEEF3;   /* hovered row, divider band */
  --pf-line:              #E6E8EE;   /* hairline border */
  --pf-line-2:            #D5D9E1;   /* stronger border, e.g. focus tracks */

  /* ---------- SEMANTIC STATES ---------- */
  --pf-success:           #3FB68B;
  --pf-success-soft:      #E1F5EC;
  --pf-warning:           #E0A93C;
  --pf-warning-soft:      #FBF1DD;
  --pf-danger:            #E5484D;
  --pf-danger-soft:       #FBE3E4;

  /* ---------- TELEGRAM-NATIVE (used inside the chat frame) ---------- */
  --tg-light-bg:          #F4F5F8;
  --tg-light-bubble-in:   #FFFFFF;
  --tg-light-bubble-out:  #E1FFC7;   /* not used by bot, reference only */
  --tg-light-link:        #168ACD;
  --tg-light-tail-shadow: 0 1px 1px rgba(14,17,22,.06);

  --tg-dark-bg:           #17212B;
  --tg-dark-bubble-in:    #182533;
  --tg-dark-bubble-out:   #2B5278;
  --tg-dark-text:         #F5F5F5;
  --tg-dark-text-2:       #708499;

  /* ---------- RADII ---------- */
  --pf-r-xs:    6px;     /* chips, badges */
  --pf-r-sm:    12px;    /* inline buttons, inputs */
  --pf-r-md:    18px;    /* bubbles, post-card */
  --pf-r-lg:    24px;    /* sheets, modals */
  --pf-r-pill:  999px;

  /* corner-touching-tail (Telegram bubble convention) */
  --pf-bubble-in:  18px 18px 18px 4px;
  --pf-bubble-out: 18px 18px 4px 18px;

  /* ---------- SPACING (4-px scale) ---------- */
  --pf-s-1:  4px;
  --pf-s-2:  8px;
  --pf-s-3:  12px;
  --pf-s-4:  16px;
  --pf-s-5:  20px;
  --pf-s-6:  24px;
  --pf-s-8:  32px;
  --pf-s-10: 40px;
  --pf-s-14: 56px;
  --pf-s-18: 72px;

  /* ---------- SHADOWS / ELEVATION ---------- */
  --pf-elev-0: none;
  --pf-elev-1: 0 1px 2px rgba(14,17,22,.06), 0 1px 1px rgba(14,17,22,.04);
  --pf-elev-2: 0 8px 24px rgba(14,17,22,.10), 0 2px 6px rgba(14,17,22,.06);
  --pf-elev-modal: 0 24px 48px rgba(14,17,22,.18), 0 4px 12px rgba(14,17,22,.08);

  /* ---------- MOTION ---------- */
  --pf-ease:           cubic-bezier(0.2, 0.7, 0.2, 1);
  --pf-dur-fast:       120ms;
  --pf-dur:            160ms;
  --pf-dur-slow:       220ms;

  /* ---------- TYPE FAMILIES ---------- */
  --pf-font-display: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --pf-font-ui:      'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --pf-font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --pf-font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ---------- TYPE TOKENS (size / line-height / weight / tracking) ---------- */
  /* Display — only for marketing & splash, not used inside the chat */
  --pf-display-1-size: 56px;  --pf-display-1-lh: 1.04; --pf-display-1-w: 800; --pf-display-1-ls: -0.02em;
  --pf-display-2-size: 40px;  --pf-display-2-lh: 1.08; --pf-display-2-w: 800; --pf-display-2-ls: -0.018em;

  /* H */
  --pf-h1-size: 28px; --pf-h1-lh: 1.18; --pf-h1-w: 700; --pf-h1-ls: -0.012em;
  --pf-h2-size: 22px; --pf-h2-lh: 1.22; --pf-h2-w: 700; --pf-h2-ls: -0.008em;
  --pf-h3-size: 18px; --pf-h3-lh: 1.28; --pf-h3-w: 700; --pf-h3-ls: -0.004em;

  /* UI / body */
  --pf-body-size:    15px; --pf-body-lh:    1.45; --pf-body-w:    400;
  --pf-body-em-w:    600;
  --pf-ui-size:      14px; --pf-ui-lh:      1.4;  --pf-ui-w:      500;
  --pf-button-size:  15px; --pf-button-lh:  1.2;  --pf-button-w:  600;
  --pf-caption-size: 12px; --pf-caption-lh: 1.34; --pf-caption-w: 500; --pf-caption-ls: 0.01em;
  --pf-mono-size:    13px; --pf-mono-lh:    1.5;  --pf-mono-w:    400;
}

/* =========================================================
   SEMANTIC ELEMENT STYLES
   Use these classes (or copy the rules) anywhere a heading,
   body paragraph, button label, or caption is needed.
   ========================================================= */

.pf-display-1 {
  font-family: var(--pf-font-display);
  font-size: var(--pf-display-1-size); line-height: var(--pf-display-1-lh);
  font-weight: var(--pf-display-1-w); letter-spacing: var(--pf-display-1-ls);
  color: var(--pf-ink);
}
.pf-display-2 {
  font-family: var(--pf-font-display);
  font-size: var(--pf-display-2-size); line-height: var(--pf-display-2-lh);
  font-weight: var(--pf-display-2-w); letter-spacing: var(--pf-display-2-ls);
  color: var(--pf-ink);
}
.pf-h1 {
  font-family: var(--pf-font-ui);
  font-size: var(--pf-h1-size); line-height: var(--pf-h1-lh);
  font-weight: var(--pf-h1-w); letter-spacing: var(--pf-h1-ls); color: var(--pf-ink);
}
.pf-h2 {
  font-family: var(--pf-font-ui);
  font-size: var(--pf-h2-size); line-height: var(--pf-h2-lh);
  font-weight: var(--pf-h2-w); letter-spacing: var(--pf-h2-ls); color: var(--pf-ink);
}
.pf-h3 {
  font-family: var(--pf-font-ui);
  font-size: var(--pf-h3-size); line-height: var(--pf-h3-lh);
  font-weight: var(--pf-h3-w); letter-spacing: var(--pf-h3-ls); color: var(--pf-ink);
}
.pf-body {
  font-family: var(--pf-font-body);
  font-size: var(--pf-body-size); line-height: var(--pf-body-lh);
  font-weight: var(--pf-body-w); color: var(--pf-ink);
}
.pf-body strong, .pf-body b { font-weight: var(--pf-body-em-w); }
.pf-ui {
  font-family: var(--pf-font-ui);
  font-size: var(--pf-ui-size); line-height: var(--pf-ui-lh);
  font-weight: var(--pf-ui-w); color: var(--pf-ink);
}
.pf-button {
  font-family: var(--pf-font-ui);
  font-size: var(--pf-button-size); line-height: var(--pf-button-lh);
  font-weight: var(--pf-button-w); color: var(--pf-ink);
}
.pf-caption {
  font-family: var(--pf-font-ui);
  font-size: var(--pf-caption-size); line-height: var(--pf-caption-lh);
  font-weight: var(--pf-caption-w); letter-spacing: var(--pf-caption-ls); color: var(--pf-ink-3);
}
.pf-mono {
  font-family: var(--pf-font-mono);
  font-size: var(--pf-mono-size); line-height: var(--pf-mono-lh);
  font-weight: var(--pf-mono-w); color: var(--pf-ink);
}

/* =========================================================
   PRIMITIVES
   ========================================================= */

.pf-surface { background: var(--pf-paper); border-radius: var(--pf-r-md); }
.pf-bubble-in {
  background: var(--pf-paper); border-radius: var(--pf-bubble-in);
  box-shadow: var(--pf-elev-1);
}
.pf-bubble-out {
  background: var(--tg-light-bubble-out); border-radius: var(--pf-bubble-out);
}

/* Inline keyboard button (Telegram-style) */
.pf-inline-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 12px; border-radius: var(--pf-r-sm);
  background: var(--pf-paper); border: 1px solid var(--pf-line);
  font-family: var(--pf-font-ui); font-size: 14px; font-weight: 600;
  color: var(--pf-primary); cursor: pointer;
  transition: background var(--pf-dur) var(--pf-ease), transform 80ms var(--pf-ease);
}
.pf-inline-btn:hover { background: var(--pf-mist); }
.pf-inline-btn:active { background: var(--pf-mist-2); transform: scale(0.98); }
.pf-inline-btn[data-variant="primary"] {
  background: var(--pf-primary); color: var(--pf-on-primary); border-color: transparent;
}
.pf-inline-btn[data-variant="primary"]:hover { background: var(--pf-primary-hover); }
.pf-inline-btn[data-variant="primary"]:active { background: var(--pf-primary-press); }