/*
 * Tagiy brand layer (Brand Identity Guide v1.0).
 *
 * Colours are not set here: they come from Admin > Theme Settings as CSS
 * variables (--bs-*, --tagiy-*). This file only adds what the theme stylesheet
 * has no variable for: brand fonts, the Coral accent button, tap feedback,
 * motion, sheets on phones and Arabic line height.
 */

/* Type: Darker Grotesque for marketing headlines only, IBM Plex Mono for numbers, links and @handles. */
.font-display {
  font-family: var(--tagiy-font-display);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.05;
}

.font-mono,
.tagiy-num {
  font-family: var(--tagiy-font-mono);
  font-feature-settings: "tnum" 1;
}

/* Arabic: same sizes, +13 % line height, Western numerals. */
html[lang="ar"] body {
  line-height: 1.55;
}

/* Coral accent: one per screen, with Ink Navy text (e.g. "Order an NFC card"). */
.btn-accent {
  --bs-btn-color: var(--tagiy-accent-contrast);
  --bs-btn-bg: var(--tagiy-accent);
  --bs-btn-border-color: var(--tagiy-accent);
  --bs-btn-hover-color: var(--tagiy-accent-contrast);
  --bs-btn-hover-bg: color-mix(in sRGB, #000 8%, var(--tagiy-accent));
  --bs-btn-hover-border-color: var(--bs-btn-hover-bg);
  --bs-btn-active-color: var(--tagiy-accent-contrast);
  --bs-btn-active-bg: color-mix(in sRGB, #000 12%, var(--tagiy-accent));
  --bs-btn-active-border-color: var(--bs-btn-active-bg);
  --bs-btn-focus-shadow-rgb: var(--tagiy-accent-rgb);
  --bs-btn-disabled-color: var(--tagiy-accent-contrast);
  --bs-btn-disabled-bg: var(--tagiy-accent);
  --bs-btn-disabled-border-color: var(--tagiy-accent);
}

/* Tap feedback: 1 → 0.97 → 1 in 90 ms. */
.btn {
  transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform 90ms ease;
}

.btn:active:not(:disabled):not(.disabled) {
  transform: scale(.97);
}

/* Motion: standard 240 ms, enter 200 ms, exit 160 ms, no bounce. Sheets and pop-ups: 20 px corners. */
.modal {
  --bs-modal-border-radius: 1.25rem;
  --bs-modal-inner-border-radius: 1.25rem;
}

.modal.fade .modal-dialog {
  transition: transform 200ms cubic-bezier(.2, 0, 0, 1), opacity 200ms ease;
}

.modal.fade:not(.show) .modal-dialog {
  transition-duration: 160ms;
}

.modal-backdrop {
  --bs-backdrop-bg: #0F0F2D;
  --bs-backdrop-opacity: .4;
}

/* Phones: dialogs open as a bottom sheet. */
@media (max-width: 575.98px) {
  .modal .modal-dialog:not([class*="modal-fullscreen"]) {
    position: fixed;
    inset: auto 0 0 0;
    max-width: none;
    margin: 0;
  }

  .modal .modal-dialog:not([class*="modal-fullscreen"]) .modal-content {
    max-height: 92vh;
    overflow-y: auto;
    border-radius: 1.25rem 1.25rem 0 0;
  }

  .modal.fade .modal-dialog:not([class*="modal-fullscreen"]) {
    transform: translateY(100%);
  }

  .modal.show .modal-dialog:not([class*="modal-fullscreen"]) {
    transform: none;
  }

  /* The close button sits inside the sheet, not outside the dialog corner. */
  .modal .modal-dialog:not([class*="modal-fullscreen"]) .btn-close {
    position: absolute;
    inset-block-start: .75rem;
    inset-inline-end: .75rem;
    transform: none !important;
    z-index: 2;
  }
}

/* Empty states: one 40 px icon above a short line. */
.tagiy-empty-icon {
  font-size: 40px;
  line-height: 1;
  color: var(--bs-secondary-color);
}

/* Public profile: default cover is the brand gradient (Signal Blue → Brand Blue → Ink Navy). */
.tagiy-cover-gradient {
  background: linear-gradient(135deg, #006EF5 0%, #2130AE 55%, #0F0F2D 100%);
}

/* Home hero: canvas background, Ink Navy headline in Darker Grotesque, second line in Signal Blue. */
.landing-hero {
  --bs-hero-bg: var(--bs-body-bg);
}

.landing-hero .hero-title {
  animation: none;
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--bs-heading-color);
  font-family: var(--tagiy-font-display);
  font-size: clamp(2.5rem, 1.6rem + 3.6vw, 4.25rem);
  font-weight: 800;
  line-height: 1.02;
}

.landing-hero .hero-title .hero-title-accent {
  color: var(--bs-link-color);
}

.landing-hero .hero-sub-title {
  color: var(--bs-body-color);
}
[data-bs-theme="dark"] .landing-hero {
  --bs-hero-bg: var(--bs-body-bg);
}

/* Logo in both colour modes: show the one that matches the theme on screen. */
.tagiy-logo-dark {
  display: none !important;
}

[data-bs-theme="dark"] .tagiy-logo-light {
  display: none !important;
}

[data-bs-theme="dark"] .tagiy-logo-dark {
  display: inline-block !important;
}
[data-bs-theme="dark"] .tagiy-logo-dark.d-block {
  display: block !important;
}