/* Ionic Variables and Color Palette */

:root {
  /* Core brand colors */
  --ion-color-primary: #6d28d9;
  --ion-color-primary-rgb: 109, 40, 217;
  --ion-color-primary-contrast: #ffffff;
  --ion-color-primary-contrast-rgb: 255, 255, 255;
  --ion-color-primary-shade: #6023bf;
  --ion-color-primary-tint: #7b3de1;

  --ion-color-success: #16a34a;
  --ion-color-success-rgb: 22, 163, 74;
  --ion-color-success-contrast: #ffffff;
  --ion-color-success-contrast-rgb: 255, 255, 255;
  --ion-color-success-shade: #138f41;
  --ion-color-success-tint: #2dac5b;

  --ion-color-warning: #f59e0b;
  --ion-color-warning-rgb: 245, 158, 11;
  --ion-color-warning-contrast: #ffffff;
  --ion-color-warning-contrast-rgb: 255, 255, 255;
  --ion-color-warning-shade: #d88b0a;
  --ion-color-warning-tint: #f6a823;

  --ion-color-danger: #dc2626;
  --ion-color-danger-rgb: 220, 38, 38;
  --ion-color-danger-contrast: #ffffff;
  --ion-color-danger-contrast-rgb: 255, 255, 255;
  --ion-color-danger-shade: #c22121;
  --ion-color-danger-tint: #e03c3c;

  --ion-color-dark: #111827;
  --ion-color-dark-rgb: 17, 24, 39;
  --ion-color-dark-contrast: #ffffff;
  --ion-color-dark-contrast-rgb: 255, 255, 255;
  --ion-color-dark-shade: #0f1522;
  --ion-color-dark-tint: #292f3d;

  --ion-color-medium: #6b7280;
  --ion-color-medium-rgb: 107, 114, 128;
  --ion-color-medium-contrast: #ffffff;
  --ion-color-medium-contrast-rgb: 255, 255, 255;
  --ion-color-medium-shade: #5e6470;
  --ion-color-medium-tint: #7a808d;

  --ion-color-light: #fafafa;
  --ion-color-light-rgb: 250, 250, 250;
  --ion-color-light-contrast: #111827;
  --ion-color-light-contrast-rgb: 17, 24, 39;
  --ion-color-light-shade: #dcdcdc;
  --ion-color-light-tint: #fbfbfb;

  /* Typography */
  --ion-font-family:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial,
    sans-serif;

  /* App generic background */
  --ion-background-color: #fafafa;

  /* Utilities */
  --color-brand: #6d28d9;
  --color-success: #16a34a;
  --color-warning: #f59e0b;
  --color-info: #3b82f6;
  --color-bg: #fafafa;
  --color-surface: #ffffff;
  --color-surface-raised: #f4f1fb;
  --color-text-primary: #111827;
  --color-text-secondary: rgba(17, 24, 39, 0.62);
  --color-text-tertiary: rgba(17, 24, 39, 0.38);
  --color-border: #e5e7eb;
}

/* Force light mode globally (no dark mode overrides) */
@media (prefers-color-scheme: dark) {
  :root {
    /* We map dark mode vars back to light to enforce light theme for MVP */
    --ion-background-color: #fafafa;
    --ion-background-color-rgb: 250, 250, 250;
    --ion-text-color: #111827;
    --ion-text-color-rgb: 17, 24, 39;
    --ion-color-step-50: #f4f5f5;
    --ion-color-step-100: #eef0f1;
    --ion-color-step-150: #e8eaec;
    --ion-color-step-200: #e1e5e8;
    --ion-color-step-250: #dbdfe3;
    --ion-color-step-300: #d5d9df;
    --ion-color-step-350: #cfd4da;
    --ion-color-step-400: #c9ced6;
    --ion-color-step-450: #c2c9d1;
    --ion-color-step-500: #bcc3cc;
    --ion-color-step-550: #b6bec8;
    --ion-color-step-600: #b0b8c3;
    --ion-color-step-650: #a9b3bf;
    --ion-color-step-700: #a3adba;
    --ion-color-step-750: #9da8b6;
    --ion-color-step-800: #97a2b1;
    --ion-color-step-850: #919dad;
    --ion-color-step-900: #8a97a8;
    --ion-color-step-950: #8492a4;
  }
}

/* Custom Tab Bar */
.app-tab-bar {
  --background: rgba(255, 255, 255, 0.98);
  --border: none;
  border-top: none;
  box-shadow: 0 -10px 34px rgba(82, 53, 121, 0.06);
  padding: 6px 12px calc(6px + var(--ion-safe-area-bottom, 0px));
}

.app-tab-bar ion-tab-button {
  --color: rgba(21, 22, 36, 0.5);
  --color-selected: #6d28d9;
  min-height: 56px;
  gap: 3px;
}

.app-tab-bar ion-tab-button ion-icon {
  font-size: 28px;
}

.app-tab-bar ion-tab-button ion-label {
  font-size: 15px;
  font-weight: 600;
  margin-top: 2px;
}

.app-send-support-fab {
  position: fixed;
  left: 50%;
  bottom: calc(var(--ion-safe-area-bottom, 0px) + 38px);
  z-index: 10000;
  width: 64px;
  height: 64px;
  border: 6px solid #fafafa;
  border-radius: 999px;
  background: #6d28d9;
  color: #ffffff;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 16px 28px rgba(109, 40, 217, 0.24),
    0 6px 14px rgba(109, 40, 217, 0.12);
}

.app-send-support-fab ion-icon {
  font-size: 28px;
  flex-shrink: 0;
}

.app-send-support-fab:active {
  transform: translateX(-50%) translateY(1px);
}
