/* ============================================
   MaP Tactile Button Component
   ============================================

   A physical "push button" effect where:
   - Resting: Button floats elevated above the surface
   - Hover: Button depresses slightly (anticipation)
   - Active/Click: Button fully depresses (commitment)

   All buttons use white background with colored outline.
   Color variants affect: outline, text, and shadow (all same color).

   Uses Flexoki palette and MaP brand system.

   ============================================ */

/* Base tactile button */
.btn-tactile {
  /* Layout */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;

  /* Typography */
  font-family: var(--font-ui, 'GT-Pressura-Standard-Bold', system-ui, sans-serif);
  font-size: var(--wb-p3);  /* step -1: 17px */
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  letter-spacing: 0.01em;
  white-space: nowrap;

  /* Sizing */
  padding: 0.875em 1.5em;
  min-height: 48px;
  border: none;
  border-radius: 6px;

  /* Colors (default: brand red) */
  --btn-bg: #FFFFFF;
  --btn-accent: var(--fx-red-600, #AF3029);
  --btn-border-width: 2px;

  background-color: var(--btn-bg);
  color: var(--btn-accent);

  /* Elevation */
  --btn-elevation: 6px;

  /* Shadow uses SAME color as accent */
  box-shadow:
    inset 0 0 0 var(--btn-border-width) var(--btn-accent),
    0 var(--btn-elevation) 0 0 var(--btn-accent);

  transform: translateY(0);

  transition:
    transform 0.12s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    box-shadow 0.12s cubic-bezier(0.25, 0.46, 0.45, 0.94);

  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  position: relative;
}

/* Prevent base link styles from overriding button color */
a.btn-tactile,
a.btn-tactile:hover,
a.btn-tactile:active,
a.btn-tactile:visited {
  color: var(--btn-accent);
  text-decoration: none;
}

/* Hover: subtle depress (just a hint) */
.btn-tactile:hover {
  transform: translateY(calc(var(--btn-elevation) * 0.25));
  box-shadow:
    inset 0 0 0 var(--btn-border-width) var(--btn-accent),
    0 calc(var(--btn-elevation) * 0.75) 0 0 var(--btn-accent);
}

/* Active/Click: full depress */
.btn-tactile:active {
  transform: translateY(var(--btn-elevation));
  box-shadow:
    inset 0 0 0 var(--btn-border-width) var(--btn-accent),
    0 0 0 0 var(--btn-accent);
  transition-duration: 0.06s;
}

/* Focus state */
.btn-tactile:focus-visible {
  outline: 3px solid var(--fx-blue-400, #4385BE);
  outline-offset: 3px;
}

/* Disabled state */
.btn-tactile:disabled,
.btn-tactile[aria-disabled="true"] {
  --btn-accent: var(--fx-base-400, #9F9D96);
  cursor: not-allowed;
  opacity: 0.6;
}

.btn-tactile:disabled:hover,
.btn-tactile:disabled:active,
.btn-tactile[aria-disabled="true"]:hover,
.btn-tactile[aria-disabled="true"]:active {
  transform: translateY(0);
  box-shadow:
    inset 0 0 0 var(--btn-border-width) var(--btn-accent),
    0 var(--btn-elevation) 0 0 var(--btn-accent);
}


/* ============================================
   Color Variants (Flexoki palette)
   ============================================ */

/* Red (default) - Brand signature */
/* .btn-tactile uses Red-600 by default */

/* Blue - For links, calendar, contextual actions */
.btn-tactile--blue {
  --btn-accent: var(--fx-blue-600, #205EA6);
}

/* Ink - Secondary/neutral actions */
.btn-tactile--ink {
  --btn-accent: var(--fx-base-950, #1C1B1A);
}

/* Green - Navigation, selected states */
.btn-tactile--green {
  --btn-accent: var(--fx-green-600, #66800B);
}


/* ============================================
   Size Variants
   ============================================ */

.btn-tactile--sm {
  font-size: var(--badge-size);  /* step -2: ~14px */
  padding: 0.625em 1.125em;
  min-height: 36px;
  border-radius: 5px;
  --btn-elevation: 3px;
  --btn-border-width: 1.5px;
}

.btn-tactile--lg {
  font-size: var(--wb-p1);  /* step +1: 24px */
  padding: 1em 2em;
  min-height: 56px;
  border-radius: 8px;
  --btn-elevation: 8px;
  --btn-border-width: 2.5px;
}


/* ============================================
   Dark Mode
   ============================================ */

html.dark .btn-tactile {
  --btn-bg: var(--fx-base-900, #282726);
  --btn-accent: var(--fx-red-400, #D14D41);
}

html.dark .btn-tactile--blue {
  --btn-accent: var(--fx-blue-400, #4385BE);
}

html.dark .btn-tactile--ink {
  --btn-accent: var(--fx-base-200, #CECDC3);
}

html.dark .btn-tactile--green {
  --btn-accent: var(--fx-green-400, #879A39);
}


/* ============================================
   Button Group
   ============================================ */

.btn-tactile-group {
  display: inline-flex;
  gap: 12px;
  flex-wrap: wrap;
}

.btn-tactile-group--vertical {
  flex-direction: column;
  align-items: stretch;
}

.btn-tactile-group--vertical .btn-tactile {
  width: 100%;
}