/* =============================================================
   BUTTONS.CSS — Button Design System
   Source: Figma mBLBkESolaG5Vtqb00OW0s / node 42:196
   =============================================================

   HTML Usage (single element):
     <button class="btn btn--primary">Label</button>
     <a class="btn btn--cyan" href="#">Label</a>

   Modifiers:
     Appearance  → btn--primary | btn--warning | btn--dangerous |
                   btn--positive | btn--cyan | btn--text |
                   btn--tonal | btn--outline | btn--breadcrumbs
     Size        → btn--sm
     Icon only   → btn--icon-only

   States are handled via CSS pseudo-classes:
     :hover, :active, :focus-visible, :disabled / [disabled]
   ============================================================= */

/* ─── TOKENS ─────────────────────────────────────────────── */
:root {
  --btn-radius-outer:  18px;
  --btn-radius-inner:  16px;
  --btn-ring-gap:       2px;

  /* typography */
  --btn-font:          'Istok Web', sans-serif;
  --btn-font-size:     20px;
  --btn-line-height:   1.2;
  --btn-tracking:      -0.6px;

  /* default (primary) fill */
  --btn-bg-primary:    rgba(255, 255, 255, 0.10);
  --btn-text-light:    #f1f5f9;
  --btn-text-dark:     #0f172a;

  /* appearance fills */
  --btn-bg-warning:    #f3f30c;
  --btn-bg-dangerous:  #f30f0f;
  --btn-bg-positive:   #1ad472;
  --btn-bg-cyan:       #6ee9fe;
  --btn-bg-tonal:      rgba(235, 225, 252, 0.80);

  /* disabled */
  --btn-bg-disabled:   #c2c2c2;
  --btn-text-disabled: #707070;

  /* transition */
  --btn-transition:    background 0.18s ease, box-shadow 0.18s ease,
                       color 0.18s ease, outline-color 0.18s ease,
                       backdrop-filter 0.18s ease;
}


/* ─── BASE ────────────────────────────────────────────────── */
.btn {
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  gap:              12px;

  /* sizing */
  min-width:        234px;
  min-height:       60px;
  padding:          0 24px;

  /* shape — inner radius; outer ring effect via outline/shadow */
  border-radius:    var(--btn-radius-inner);
  border:           none;

  /* typography */
  font-family:      var(--btn-font);
  font-size:        var(--btn-font-size);
  font-weight:      400;
  font-style:       normal;
  line-height:      var(--btn-line-height);
  letter-spacing:   var(--btn-tracking);
  text-align:       center;
  text-decoration:  none;
  white-space:      nowrap;

  cursor:           pointer;
  transition:       var(--btn-transition);
  -webkit-font-smoothing: antialiased;

  /* focus ring — simulates the outer layer border */
  outline:          2px solid transparent;
  outline-offset:   var(--btn-ring-gap);

  /* prevent text selection on double-click */
  user-select:      none;
  -webkit-user-select: none;
}

/* Remove default browser focus ring on non-keyboard navigation */
.btn:focus:not(:focus-visible) {
  outline: none;
}


/* ─── DISABLED (global) ───────────────────────────────────── */
.btn:disabled,
.btn[disabled],
.btn[aria-disabled="true"] {
  background:       var(--btn-bg-disabled) !important;
  color:            var(--btn-text-disabled) !important;
  box-shadow:       none !important;
  outline:          none !important;
  backdrop-filter:  none !important;
  cursor:           not-allowed;
  pointer-events:   none;
}


/* ============================================================
   APPEARANCE VARIANTS
   ============================================================ */

/* ─── PRIMARY ─────────────────────────────────────────────── */
/*   Glass / frosted-glass fill, light text                   */
.btn--primary {
  background:  var(--btn-bg-primary);
  color:       var(--btn-text-light);
}

.btn--primary:hover {
  background:       rgba(255, 255, 255, 0.14);
  backdrop-filter:  blur(2px);
  box-shadow:       0 0 0 3px rgba(255, 255, 255, 0.12);
}

.btn--primary:active {
  background:       rgba(255, 255, 255, 0.06);
  backdrop-filter:  none;
  box-shadow:       none;
}

.btn--primary:focus-visible {
  background:       var(--btn-bg-primary);
  backdrop-filter:  blur(6px);
  outline:          2px solid #ffffff;
  outline-offset:   var(--btn-ring-gap);
}


/* ─── WARNING ─────────────────────────────────────────────── */
/*   High-visibility yellow, dark text                        */
.btn--warning {
  background:  var(--btn-bg-warning);
  color:       var(--btn-text-dark);
}

.btn--warning:hover {
  background:  #f7f74a;
  box-shadow:  0 0 20px rgba(243, 243, 12, 0.50);
}

.btn--warning:active {
  background:  #d9d90a;
  box-shadow:  none;
}

.btn--warning:focus-visible {
  background:  var(--btn-bg-warning);
  outline:     2px solid #f3f30c;
  outline-offset: var(--btn-ring-gap);
  box-shadow:  0 0 0 4px rgba(243, 243, 12, 0.30);
}


/* ─── DANGEROUS ───────────────────────────────────────────── */
/*   Red fill, light text                                     */
.btn--dangerous {
  background:  var(--btn-bg-dangerous);
  color:       var(--btn-text-light);
}

.btn--dangerous:hover {
  background:  #f73535;
  box-shadow:  0 0 20px rgba(243, 15, 15, 0.55);
}

.btn--dangerous:active {
  background:  #cc0d0d;
  box-shadow:  none;
}

.btn--dangerous:focus-visible {
  background:  var(--btn-bg-dangerous);
  outline:     2px solid #f30f0f;
  outline-offset: var(--btn-ring-gap);
  box-shadow:  0 0 0 4px rgba(243, 15, 15, 0.30);
}


/* ─── POSITIVE ────────────────────────────────────────────── */
/*   Green fill, white text                                   */
.btn--positive {
  background:  var(--btn-bg-positive);
  color:       #ffffff;
}

.btn--positive:hover {
  background:  #40e088;
  box-shadow:  0 0 20px rgba(26, 212, 114, 0.50);
}

.btn--positive:active {
  background:  #15b860;
  box-shadow:  none;
}

.btn--positive:focus-visible {
  background:  var(--btn-bg-positive);
  outline:     2px solid #1ad472;
  outline-offset: var(--btn-ring-gap);
  box-shadow:  0 0 0 4px rgba(26, 212, 114, 0.30);
}


/* ─── CYAN ────────────────────────────────────────────────── */
/*   Cyan fill + backdrop blur, dark text                     */
.btn--cyan {
  background:       var(--btn-bg-cyan);
  color:            var(--btn-text-dark);
  backdrop-filter:  blur(6px);
}

.btn--cyan:hover {
  background:       #a5f3fd;
  box-shadow:       0 0 24px rgba(110, 233, 254, 0.55);
}

.btn--cyan:active {
  background:       #4dd4e8;
  backdrop-filter:  none;
  box-shadow:       none;
}

.btn--cyan:focus-visible {
  background:       var(--btn-bg-cyan);
  backdrop-filter:  blur(6px);
  outline:          2px solid #6ee9fe;
  outline-offset:   var(--btn-ring-gap);
  box-shadow:       0 0 0 4px rgba(110, 233, 254, 0.30);
}


/* ─── TEXT ────────────────────────────────────────────────── */
/*   No background, minimal padding, light text              */
.btn--text {
  background:  transparent;
  color:       var(--btn-text-light);
  min-width:   unset;
  padding:     0 12px;
}

.btn--text:hover {
  background:  rgba(255, 255, 255, 0.08);
}

.btn--text:active {
  background:  rgba(255, 255, 255, 0.04);
}

.btn--text:focus-visible {
  outline:     2px solid rgba(255, 255, 255, 0.60);
  outline-offset: var(--btn-ring-gap);
}


/* ─── TONAL ───────────────────────────────────────────────── */
/*   Soft lavender fill, dark text, slight opacity            */
.btn--tonal {
  background:  var(--btn-bg-tonal);
  color:       var(--btn-text-dark);
  opacity:     0.90;
}

.btn--tonal:hover {
  background:  rgba(235, 225, 252, 0.95);
  opacity:     1;
  box-shadow:  0 0 16px rgba(235, 225, 252, 0.30);
}

.btn--tonal:active {
  background:  rgba(220, 210, 248, 0.90);
  opacity:     1;
  box-shadow:  none;
}

.btn--tonal:focus-visible {
  opacity:        1;
  outline:        2px solid rgba(235, 225, 252, 0.80);
  outline-offset: var(--btn-ring-gap);
}


/* ─── OUTLINE ─────────────────────────────────────────────── */
/*   Transparent fill, white 1px border, light text           */
.btn--outline {
  background:  transparent;
  color:       var(--btn-text-light);
  border:      1px solid #ffffff;
}

.btn--outline:hover {
  background:  rgba(255, 255, 255, 0.10);
  box-shadow:  0 0 16px rgba(255, 255, 255, 0.15);
}

.btn--outline:active {
  background:  rgba(255, 255, 255, 0.05);
  box-shadow:  none;
}

.btn--outline:focus-visible {
  outline:        2px solid #ffffff;
  outline-offset: var(--btn-ring-gap);
  box-shadow:     0 0 0 4px rgba(255, 255, 255, 0.15);
}


/* ─── PURPLE ──────────────────────────────────────────────── */
/*   Violet/purple fill, white text (Expert tier)             */
.btn--purple {
  background:  #8b5cf6;
  color:       #ffffff;
}

.btn--purple:hover {
  background:  #a78bfa;
  box-shadow:  0 0 24px rgba(139, 92, 246, 0.50);
}

.btn--purple:active {
  background:  #7c3aed;
  box-shadow:  none;
}

.btn--purple:focus-visible {
  background:  #8b5cf6;
  outline:     2px solid #8b5cf6;
  outline-offset: var(--btn-ring-gap);
  box-shadow:  0 0 0 4px rgba(139, 92, 246, 0.30);
}


/* ─── BREADCRUMBS ─────────────────────────────────────────── */
/*   Compact text navigation item, muted color                */
.btn--breadcrumbs {
  background:   transparent;
  color:        rgba(241, 245, 249, 0.55);
  min-width:    unset;
  min-height:   unset;
  padding:      4px 8px;
  border-radius: 8px;
  font-size:    14px;
  letter-spacing: -0.2px;
}

.btn--breadcrumbs:hover {
  color:        var(--btn-text-light);
  background:   rgba(255, 255, 255, 0.06);
}

.btn--breadcrumbs:active {
  background:   rgba(255, 255, 255, 0.04);
}

.btn--breadcrumbs:focus-visible {
  outline:      2px solid rgba(255, 255, 255, 0.40);
  outline-offset: 2px;
}


/* ============================================================
   SIZE MODIFIER — small
   ============================================================ */
.btn--sm {
  min-height:    40px;
  min-width:     160px;
  padding:       0 16px;
  border-radius: 12px;
  font-size:     16px;
  letter-spacing: -0.4px;
}

/* Smaller outline border on sm outline variant */
.btn--sm.btn--outline {
  border-width:  1px;
}

/* Focus ring offset consistent with smaller size */
.btn--sm:focus-visible {
  outline-offset: 2px;
}


/* ============================================================
   ICON-ONLY MODIFIER
   ============================================================ */
.btn--icon-only {
  min-width:  60px;
  width:      60px;
  padding:    0;
  gap:        0;
}

.btn--icon-only.btn--sm {
  min-width:  40px;
  width:      40px;
}

/* SVG / img inside icon-only button */
.btn--icon-only svg,
.btn--icon-only img {
  width:   24px;
  height:  24px;
  flex-shrink: 0;
}

.btn--icon-only.btn--sm svg,
.btn--icon-only.btn--sm img {
  width:   18px;
  height:  18px;
}


/* ============================================================
   ICON + LABEL (non-icon-only)
   ============================================================ */
.btn svg,
.btn img.btn-icon {
  width:        24px;
  height:       24px;
  flex-shrink:  0;
  pointer-events: none;
}

.btn--sm svg,
.btn--sm img.btn-icon {
  width:   18px;
  height:  18px;
}


/* ============================================================
   MOBILE FONT SCALE (–20%) — max-width: 900px
   ============================================================ */
@media (max-width: 900px) {
  .btn              { font-size: 16px; }
  .btn--sm          { font-size: 13px; }
  .btn--breadcrumbs { font-size: 11px; }
}