/* ============================================================
   UI-KIT · DESIGN TOKENS
   Витягнуто зі стилів booking-consult та performance.
   Одна зелена дизайн-мова, дві теми: .theme-sharp / .theme-soft
   ============================================================ */

:root {
  /* ---- Brand · Green scale ---------------------------------- */
  --c-green:        #41AF64;   /* основний бренд (performance)   */
  --c-green-hover:  #38A05A;   /* hover для зелених кнопок        */
  --c-green-mid:    #3D9450;
  --c-green-bg:     #2D7D4A;   /* заливка секцій                  */
  --c-green-dark:   #1E5E38;   /* текст/акценти на світлому       */
  --c-green-deep:   #1A4A2E;   /* темна секція (speakers)         */
  --c-green-forest: #16331F;   /* sidebar / найтемніша            */
  --c-green-light:  #EAF1D4;   /* світла плашка / icon-чіп        */
  --c-green-tint:   #E8F5EB;   /* альтернативна світла плашка     */
  --c-green-pale:   #F3FAF4;   /* ледь-зелений фон інпутів        */

  /* ---- Accent ----------------------------------------------- */
  --c-gold:         #E8C46A;   /* золотий акцент (ролі, бейджі)   */
  --c-gold-soft:    #FBF2D8;

  /* ---- Neutrals --------------------------------------------- */
  --c-ink:          #0C0903;   /* майже-чорний заголовок          */
  --c-text:         #1A1A1A;   /* основний текст                  */
  --c-muted:        #6B7280;   /* приглушений текст               */
  --c-faint:        #9CA3AF;   /* підписи, плейсхолдери           */
  --c-white:        #FFFFFF;
  --c-cream:        #FBFBFB;   /* теплий фон сторінки             */
  --c-bg:           #F8FBF8;   /* холодний зеленуватий фон        */
  --c-bg-admin:     #F3F5F4;

  /* ---- Lines ------------------------------------------------ */
  --c-border:        #E5E7EB;             /* нейтральний бордюр    */
  --c-border-green:  rgba(65,175,100,0.18);/* зеленуватий бордюр   */
  --c-border-soft:   #E0EBE2;

  /* ---- Status ----------------------------------------------- */
  --c-danger:       #DC2626;
  --c-danger-bg:    #FDECEC;
  --c-warn:         #E65C00;
  --c-warn-bg:      #FFF4ED;
  --c-success:      var(--c-green);

  /* ---- Typography ------------------------------------------- */
  --font-sans:    'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-display: 'Raleway', 'Inter', sans-serif;  /* для тем soft */
  --font-body:    'Nunito', 'Inter', sans-serif;   /* для тем soft */

  --fs-xs:   11px;
  --fs-sm:   13px;
  --fs-base: 14px;
  --fs-md:   16px;
  --fs-lg:   18px;
  --fs-xl:   22px;
  --fs-2xl:  28px;
  --fs-h2:   clamp(24px, 3vw, 38px);
  --fs-h1:   clamp(30px, 5vw, 64px);
  --fs-hero: clamp(48px, 6.5vw, 88px);

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-extra:   800;
  --fw-black:   900;

  --lh-tight:  1.15;
  --lh-snug:   1.4;
  --lh-base:   1.6;
  --lh-loose:  1.75;

  --tracking-tight: -0.5px;   /* великі заголовки sharp           */
  --tracking-wide:  2px;      /* uppercase лейбли                 */

  /* ---- Spacing scale ---------------------------------------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-22: 88px;            /* вертикальні відступи секцій         */

  /* ---- Radius ----------------------------------------------- */
  --r-sm:   9px;
  --r:      10px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   20px;
  --r-2xl:  24px;
  --r-pill: 999px;

  /* ---- Shadows ---------------------------------------------- */
  --sh-xs:    0 4px 16px rgba(65,175,100,0.30);   /* зелена кнопка   */
  --sh-sm:    0 8px 24px rgba(65,175,100,0.38);
  --sh-card:  0 8px 32px rgba(30,94,56,0.10);     /* hover картки    */
  --sh-soft:  0 4px 32px rgba(45,122,62,0.07);    /* форма           */
  --sh-lift:  0 20px 40px rgba(34,197,121,0.16), 0 8px 18px rgba(0,0,0,0.10);
  --sh-modal: 0 24px 64px rgba(0,0,0,0.25);
  --sh-dialog:0 24px 80px rgba(26,26,26,0.22);
  --sh-ink:   0 4px 20px rgba(12,9,3,0.15);       /* темна кнопка    */

  /* ---- Motion ----------------------------------------------- */
  --t-fast:  0.15s;
  --t-base:  0.2s;
  --t-slow:  0.35s;
  --t-photo: 0.6s;
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);    /* плавний вихід  */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* легкий пружок  */
  --ease-pop:    cubic-bezier(0.18, 0.89, 0.32, 1.28);

  /* ---- Layout ----------------------------------------------- */
  --container: 1160px;
  --container-narrow: 600px;
}

/* ============================================================
   ТЕМИ — додай клас на <body>
   ============================================================ */

/* SHARP (performance): Inter, гострі заголовки, золотий акцент,
   радіуси 10–16px. Це дефолт — нічого міняти не треба. */
.theme-sharp {
  --font-heading: var(--font-sans);
  --r-btn: var(--r-md);
}

/* SOFT (booking-consult): Raleway+Nunito, заокруглено, pill-кнопки,
   приглушений зелений. */
.theme-soft {
  --c-green:       #2D7A3E;
  --c-green-hover: #1F5C2E;
  --c-green-light: #E8F5EB;
  --c-green-pale:  #F3FAF4;
  --c-bg:          #F8FBF8;
  --font-sans:     var(--font-body);
  --font-heading:  var(--font-display);
  --r-btn:         var(--r-pill);
}