/* ==========================================================================
   Tablepulse brand system — fonts, colors, gradients
   Source: TablePulse-Deliverables (Bariol, logo gradient #F05437 → #DD2276)
   ========================================================================== */

@font-face {
  font-family: "Bariol";
  src: url("/assets/bariol/Bariol_Light-9efa3043.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Bariol";
  src: url("/assets/bariol/Bariol_Regular-8f91ee31.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Bariol";
  src: url("/assets/bariol/Bariol_Bold-1880b696.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Logo gradient */
  --tp-coral: #f05437;
  --tp-magenta: #dd2276;
  --tp-gradient: linear-gradient(180deg, #f05437 0%, #dd2276 100%);
  --tp-gradient-h: linear-gradient(90deg, #f05437 0%, #dd2276 100%);

  /* Neutrals — tuned for WCAG AA on white */
  --tp-ink: #414042;
  --tp-ink-soft: #525055;
  --tp-ink-muted: #5c585f;
  --tp-white: #ffffff;
  --tp-bg: #ffffff;
  --tp-bg-soft: #f3f2f4;
  --tp-line: #cfc9d0;
  --tp-placeholder: #5c585f;

  /* Interactive text on light surfaces */
  --tp-magenta-text: #b0185e;
  --tp-magenta-text-hover: #8f1349;

  /* Buttons: darkened logo gradient so white type meets WCAG AA (4.5:1) */
  --tp-coral-deep: #c4452e;
  --tp-magenta-deep: #c41d68;
  --tp-gradient-btn: linear-gradient(90deg, var(--tp-coral-deep) 0%, var(--tp-magenta-deep) 100%);

  /* Text on gradient surfaces */
  --tp-on-gradient: #ffffff;
  --tp-on-gradient-muted: #ffffff;

  /* Accent */
  --tp-success: #50e3c2;
  --tp-success-deep: #1a6b5c;

  /* Typography */
  --tp-font: "Bariol", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Shape */
  --tp-radius: 6px;
  --tp-radius-lg: 12px;
  --tp-shadow: 0 18px 50px -28px rgba(221, 34, 118, 0.45);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}