/* ===== Лексичек — Design Tokens ===== */

:root {
  /* ---- Color ---- */

  /* Brand */
  --brand-primary: #0F1115;
  --brand-primary-hover: #1A1E24;
  --brand-accent: #D8BFFF;
  --brand-accent-hover: #c9a8f0;
  --brand-green: #1B5E4B;
  --brand-strike: #A32D2D;
  --brand-telegram: #2AABEE;
  --brand-telegram-hover: #229ED9;
  --brand-work-online: #024e47;
  --brand-work-offline: #ff6c4a;

  /* Background */
  --bg-page: #ffffeb;
  --bg-surface: #ffffeb;
  --bg-modal: #FFFCF5;
  --bg-dark: #0F1115;
  --bg-footer: #1A1A1A;
  --bg-blockquote: #e5e5d0;
  --bg-table-header: #1A1A1A;
  --bg-blog-hero: #1A1A1A;

  /* Text */
  --text-primary: #1A1A1A;
  --text-primary-faded: #1A1A1A4D;
  --text-body: #1b1a1b;
  --text-muted: #bbbaad;
  --text-inverse: #FFFFFF;
  --text-nav-link: #222222;
  --text-capsule-word: #363A4A;
  --text-error: #e04040;
  --text-success: #2e7d32;

  /* Border */
  --border-navbar: #e5e5d0;
  --border-capsule: #363A4A;
  --border-cta: #252A31;
  --border-mobile-divider: #e5e5d0;
  --border-input: #1A1A1A;
  --border-subtle: #e5e5d0;

  /* Tags */
  --tag-purple: #d9beff;
  --tag-black: #1A1A1A;
  --tag-beige: #e5e5d0;

  /* ---- Components ---- */

  /* Navbar */
  --navbar-bg: #ffffeb;
  --navbar-border: 2.5px solid #e5e5d0;
  --navbar-radius: 10px;
  --navbar-height: 72px;
  --navbar-height-mobile: 56px;

  /* Nav button (accent) */
  --nav-btn-bg: #D8BFFF;
  --nav-btn-border: 2px solid #252A31;
  --nav-btn-radius: 12px;
  --nav-btn-radius-mobile: 10px;

  /* Burger */
  --burger-color: #1A1A1A;
  --burger-line-w: 22px;
  --burger-line-h: 2px;

  /* Mobile menu */
  --mobile-menu-bg: #ffffeb;
  --mobile-menu-border: 2.5px solid #e5e5d0;
  --mobile-menu-radius: 0 0 10px 10px;
  --mobile-menu-padding: 4px 20px 4px;
  --mobile-menu-link-size: 16px;
  --mobile-menu-divider: 1px solid #e5e5d0;

  /* Capsule */
  --capsule-bg: #ffffeb;
  --capsule-border: 2px solid #363A4A;
  --capsule-radius: 50px;
  --capsule-w: 200px;
  --capsule-h: 80px;
  --capsule-w-mobile: 150px;
  --capsule-h-mobile: 60px;
  --capsule-w-small: 130px;
  --capsule-h-small: 52px;
  --capsule-bottom: 12%;
  --capsule-bottom-mobile: 10%;

  /* Badge (suggested word) */
  --badge-bg: #1B5E4B;
  --badge-radius: 50px;
  --badge-padding: 8px 18px;
  --badge-padding-mobile: 6px 14px;
  --badge-gap: 6px;
  --badge-gap-mobile: 5px;
  --badge-font-size: 15px;
  --badge-font-size-mobile: 13px;
  --badge-font-weight: 500;
  --badge-text: #FFFFFF;
  --badge-check-color: #FFFFFF;
  --badge-check-stroke: 3;
  --badge-check-size: 16px;
  --badge-check-size-mobile: 14px;
  --badge-top: -52px;
  --badge-top-mobile: -48px;

  /* CTA Button */
  --cta-bg: #D8BFFF;
  --cta-border: 2px solid #252A31;
  --cta-radius: 12px;
  --cta-padding: 16px 36px;
  --cta-padding-mobile: 18px 32px;
  --cta-font-size: 16px;

  /* Strike */
  --strike-color: #A32D2D;
  --strike-width: 2;

  /* Ribbons — English (light) */
  --ribbon-en-text: #1A1A1A;
  --ribbon-en-opacity: 0.7;
  --ribbon-en-dot-opacity: 0.3;
  --ribbon-en-right: calc(50% - 75px);
  --ribbon-en-right-mobile: calc(50% - 55px);

  /* Ribbons — Russian (dark) */
  --ribbon-ru-bg: #0F1115;
  --ribbon-ru-text: #FFFFFF;
  --ribbon-ru-dot-opacity: 0.4;
  --ribbon-ru-left: calc(50% + 40px);
  --ribbon-ru-left-mobile: calc(50% + 20px);

  /* Ribbon words */
  --ribbon-word-size: 22px;
  --ribbon-word-size-mobile: 18px;

  /* Modal */
  --modal-bg: #FFFCF5;
  --modal-radius: 28px;
  --modal-radius-mobile: 20px;
  --modal-max-width: 640px;
  --modal-padding: 36px 48px 48px;
  --modal-padding-mobile: 28px 20px;
  --modal-overlay: rgba(0, 0, 0, 0.5);
  --modal-title-size: 48px;
  --modal-title-size-mobile: 36px;
  --modal-title-line-height: 52.8px;
  --modal-title-letter-spacing: -1.4px;

  /* Modal Input */
  --input-border: 3px solid #1A1A1A;
  --input-radius: 16px;
  --input-bg: #FFFCF5;
  --input-padding: 16px 20px;
  --input-padding-mobile: 12px 16px;
  --input-font-size: 16px;

  /* Modal Submit */
  --submit-bg: #d9beff;
  --submit-bg-hover: #c9a8f0;
  --submit-border: 2px solid #1A1A1A;
  --submit-radius: 16px;
  --submit-padding: 18px;
  --submit-padding-mobile: 14px;

  /* Telegram Button */
  --tg-btn-bg: #2AABEE;
  --tg-btn-bg-hover: #229ED9;
  --tg-btn-border: 2px solid #1A1A1A;
  --tg-btn-radius: 16px;
  --tg-btn-padding: 18px;
  --tg-btn-color: #FFFFFF;

  /* Work Status Bubble */
  --work-bubble-radius: 100px;
  --work-bubble-padding: 7px 18px 7px 12px;
  --work-bubble-border: 2px solid #1A1A1A;
  --work-bubble-border-top: 0;
  --work-bubble-shadow: 0 1px 0 0 #1A1A1A;
  --work-bubble-font-size: 12px;
  --work-bubble-font-weight: 600;
  --work-bubble-rotate: -3deg;
  --work-bubble-online-bg: #024e47;
  --work-bubble-online-text: #FFFFFF;
  --work-bubble-offline-bg: #ff6c4a;
  --work-bubble-offline-text: #1A1A1A;

  /* Blog Card */
  --blog-card-radius: 20px;
  --blog-card-image-aspect: 4/3;

  /* Blog Tag */
  --blog-tag-radius: 6px;
  --blog-tag-padding: 4px 10px;
  --blog-tag-font-size: 12px;
  --blog-tag-font-weight: 500;

  /* Article */
  --article-max-width: 720px;
  --article-cover-aspect: 21/9;
  --article-divider: 1px solid #e5e5d0;
  --article-link-underline-color: #1A1A1A;
  --article-link-underline-thickness: 1px;
  --article-link-underline-offset: 3px;
  --article-blockquote-bg: #e5e5d0;
  --article-blockquote-radius: 16px;
  --article-blockquote-padding: 32px;
  --article-quote-line-border: 3px solid #1A1A1A;
  --article-quote-line-pl: 24px;
  --article-table-header-bg: #1A1A1A;
  --article-table-header-color: #FFFFFF;
  --article-table-header-radius: 8px 8px 0 0;

  /* Pricing Card */
  --pricing-card-radius: 20px;
  --pricing-card-border: 3px solid #1A1A1A;
  --pricing-card-popular-border: 3px solid #d9beff;
  --pricing-card-padding: 40px 32px;

  /* Footer */
  --footer-bg: #1A1A1A;
  --footer-padding: 80px 24px 48px;
  --footer-logo-color: #d9beff;
  --footer-logo-size: 9vw;
  --footer-logo-size-mobile: 15vw;
  --footer-nav-title-color: #d9beff;
  --footer-link-color: #d3d3c8;
  --footer-copy-color: #999;

  /* Back to Top */
  --btt-bg: #d9beff;
  --btt-border: 2px solid #1A1A1A;
  --btt-radius: 50%;
  --btt-size: 48px;

  /* ---- Animation ---- */
  --anim-ribbon: 25s linear infinite;
  --anim-strike: 0.6s ease-in-out;
  --anim-badge-appear: 0.3s ease-out;
  --anim-checkmark: 0.3s ease;
  --anim-checkmark-delay: 500ms;
  --anim-burger: 0.3s ease;
  --anim-pulse: 2s ease-in-out infinite;

  /* ---- Typography ---- */
  --font-heading: "EB Garamond", Georgia, serif;
  --font-body: "Inter", sans-serif;
  --font-nav: "Figtree", sans-serif;

  /* ---- Breakpoints (reference only) ---- */
  /* tablet: 900px | mobile: 700px | small-mobile: 400px */
}