/* ============================================================
   DesiPass — Colors & Type
   Source of truth: tailwind.config.js + src/styles/* in
   the desipass-webapp-testing codebase.
   ============================================================ */

/* ---------- Web Fonts ----------
   Fraunces  — display / event titles (Google Fonts)
   DM Sans — body / UI text (Google Fonts)
   JetBrains Mono — breadcrumbs, dates, ticket codes, captions (Google Fonts)
   Montserrat / Poppins kept locally as fallbacks for legacy code paths.
*/
@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700;9..144,800;9..144,900&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=JetBrains+Mono:wght@400;500;600;700&display=swap");

@font-face {
  font-family: "Montserrat";
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url("./fonts/MontserratLight.ttf") format("truetype");
}
@font-face {
  font-family: "Montserrat";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("./fonts/MontserratRegular.ttf") format("truetype");
}
@font-face {
  font-family: "Montserrat";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("./fonts/MontserratSemiBold.ttf") format("truetype");
}
@font-face {
  font-family: "Montserrat";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("./fonts/MontserratBold.ttf") format("truetype");
}
@font-face {
  font-family: "Montserrat";
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  src: url("./fonts/MontserratExtraBold.ttf") format("truetype");
}
@font-face {
  font-family: "Poppins";
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url("./fonts/PoppinsExtraLight.ttf") format("truetype");
}
@font-face {
  font-family: "Poppins";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("./fonts/PoppinsRegular.ttf") format("truetype");
}
@font-face {
  font-family: "Poppins";
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  src: url("./fonts/PoppinsExtraBold.ttf") format("truetype");
}

/* ---------- Tokens ---------- */
:root {
  /* Brand — primary magenta-red and deep purple */
  --dp-red:        #E54558;   /* primary brand red (CTAs, accent) */
  --dp-red-alt:    #E54457;   /* alt code-side spelling, treat identical */
  --dp-red-soft:   #FAEDEF;   /* tint behind active chips, checkbox bg */
  --dp-red-tint:   #FFF4F6;   /* page wash / soft surface */
  --dp-red-glow:   rgba(229, 69, 88, 0.30); /* shadow accent */

  --dp-purple:        #3B2E4D;   /* deep brand purple (text on light, header bg on mobile) */
  --dp-purple-deep:   #1D0D31;   /* deeper variant */
  --dp-purple-soft:   #ECD9FF;   /* dividers, soft borders */
  --dp-purple-tint:   #EBD8FF;   /* checkbox idle, soft chip bg */

  /* Neutral text/surface */
  --dp-fg:           #000000;          /* primary text */
  --dp-fg-strong:    #1D0D31;          /* headlines on light */
  --dp-fg-muted:     #333333;          /* body secondary */
  --dp-fg-subtle:    #808080;          /* captions, footer links */
  --dp-fg-placeholder: rgba(51,51,51,0.52); /* #33333385 placeholder */
  --dp-fg-disabled:  #B0B0B0;
  --dp-fg-on-dark:   #FFFFFF;
  --dp-fg-on-dark-muted: rgba(255,255,255,0.55); /* #ffffff8c */

  --dp-bg:           #FFFFFF;
  --dp-bg-alt:       #FFF4F6;          /* tinted page wash */
  --dp-bg-mobile-header: #3B2E4D;      /* mobile nav background */
  --dp-divider:      #ECD9FF;
  --dp-divider-soft: #FAEDEF;
  --dp-border:       rgba(59,46,77,0.10);  /* #3B2E4D1A */

  /* Semantic state */
  --dp-success:      #2DEE63;          /* green check / radio */
  --dp-success-fg:   #10B981;          /* "Free" label text */
  --dp-warn-bg:      #FDEDE4;
  --dp-warn-fg:      #EA580C;          /* default ticket status */
  --dp-price:        #FD2E00;          /* price red */
  --dp-link:         #009DFF;          /* in-content links */
  --dp-soldout-bg:   #F3F4F6;
  --dp-soldout-fg:   rgba(0,0,0,0.71); /* #000000b5 */

  /* Brand gradient */
  --dp-gradient: linear-gradient(266deg, #3B2E4D 0%, #E54558 100%); /* @kind color */
  --dp-gradient-pill: linear-gradient(90deg, #E54558 0%, #3B2E4D 100%); /* @kind color */

  /* Elevation / shadow */
  --dp-shadow-xs: 0px 18px 24px 0px rgba(111, 29, 27, 0.30); /* #6f1d1b4c — warm red drop */
  --dp-shadow-sm: 16px 16px 32px 0px rgba(0, 0, 0, 0.10);    /* offset card shadow */
  --dp-shadow-card: 0 2px 4px 0 rgba(184,184,184,0.50);
  --dp-shadow-popover: 0px 2px 10px 0px rgba(0,0,0,0.16);
  --dp-text-shadow: 4px 4px 16px rgba(0,0,0,0.60);

  /* Radius */
  --dp-radius-xs: 6px;
  --dp-radius-sm: 10px;        /* event card images, list thumbs */
  --dp-radius-md: 13px;        /* inputs, square buttons */
  --dp-radius-lg: 16px;
  --dp-radius-pill: 26px;      /* CTA pills, location chip */
  --dp-radius-full: 9999px;    /* avatars, full-round chips */

  /* Spacing scale (4px base) */
  --dp-space-1: 4px;
  --dp-space-2: 8px;
  --dp-space-3: 12px;
  --dp-space-4: 16px;
  --dp-space-5: 20px;
  --dp-space-6: 24px;
  --dp-space-8: 32px;
  --dp-space-10: 40px;
  --dp-space-12: 48px;
  --dp-space-16: 64px;

  /* Typography — families
     Fraunces      → event titles, hero headlines, section heads (warm, expressive serif w/ optical sizing)
     General Sans  → body, UI labels, buttons, form text (clean neutral sans)
     JetBrains Mono→ breadcrumbs, dates/times, ticket IDs, eyebrow tags, fine print
     Montserrat / Poppins kept as fallbacks; do not introduce new usage.            */
  --dp-font-display: "Fraunces", "Georgia", "Times New Roman", serif;
  --dp-font-body:    "DM Sans", "General Sans", "Inter", "Helvetica Neue", Arial, sans-serif;
  --dp-font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --dp-font-poppins: "Poppins", "General Sans", Arial, sans-serif; /* legacy */

  /* Typography — sizes lifted from Heading / Text components */
  --dp-h-4xl: 84px;   /* hero — Heading "4xl" */
  --dp-h-3xl: 64px;   /* page title — "3xl" */
  --dp-h-2xl: 44px;   /* section title — "2xl" */
  --dp-h-xl:  36px;   /* sub-section — "xl" */
  --dp-h-lg:  24px;   /* card title — "lg" */
  --dp-h-md:  20px;   /* in-card label — "md" */
  --dp-h-s:   16px;   /* dense title — "s" */
  --dp-h-xs:  14px;   /* eyebrow — "xs", weight 800 */

  --dp-t-lg:  32px;   /* lead body — Text "lg" */
  --dp-t-md:  26px;   /* lead alt — Text "md" */
  --dp-t-s:   14px;   /* default body — Text "s" */
  --dp-t-xs:  13px;   /* small / fine print — Text "xs" */

  --dp-leading-tight:  1.15;
  --dp-leading-snug:   1.25;
  --dp-leading-normal: 1.5;
  --dp-leading-loose:  1.7;

  /* Container widths from styles/index.css */
  --dp-container-sm: 800px;
  --dp-container-md: 960px;
  --dp-container-lg: 1120px;
  --dp-container-xl: 1320px;
  --dp-container-xxl: 1680px;

  /* Animation */
  --dp-ease: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --dp-dur-fast: 150ms; /* @kind other */
  --dp-dur-base: 200ms; /* @kind other */
  --dp-dur-slow: 300ms; /* @kind other */
}

/* ---------- Semantic element styles ---------- */
html, body {
  font-family: var(--dp-font-body);
  color: var(--dp-fg);
  background: var(--dp-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, .dp-h1 {
  font-family: var(--dp-font-display);
  font-weight: 700;
  font-size: var(--dp-h-3xl);
  line-height: var(--dp-leading-tight);
  color: var(--dp-fg-strong);
  letter-spacing: -0.01em;
}
h2, .dp-h2 {
  font-family: var(--dp-font-display);
  font-weight: 700;
  font-size: var(--dp-h-2xl);
  line-height: var(--dp-leading-tight);
  color: var(--dp-fg-strong);
}
h3, .dp-h3 {
  font-family: var(--dp-font-display);
  font-weight: 700;
  font-size: var(--dp-h-xl);
  line-height: var(--dp-leading-snug);
  color: var(--dp-fg-strong);
}
h4, .dp-h4 {
  font-family: var(--dp-font-display);
  font-weight: 700;
  font-size: var(--dp-h-lg);
  line-height: var(--dp-leading-snug);
  color: var(--dp-fg-strong);
}
h5, .dp-h5 {
  font-family: var(--dp-font-display);
  font-weight: 700;
  font-size: var(--dp-h-md);
  line-height: var(--dp-leading-snug);
  color: var(--dp-fg-strong);
}
h6, .dp-h6 {
  font-family: var(--dp-font-display);
  font-weight: 800;
  font-size: var(--dp-h-xs);
  line-height: var(--dp-leading-snug);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--dp-red);
}

p, .dp-body {
  font-family: var(--dp-font-body);
  font-weight: 400;
  font-size: var(--dp-t-s);
  line-height: var(--dp-leading-normal);
  color: var(--dp-fg-muted);
}
.dp-body-lg {
  font-size: var(--dp-t-md);
  line-height: var(--dp-leading-snug);
}
.dp-caption {
  font-family: var(--dp-font-body);
  font-size: var(--dp-t-xs);
  font-weight: 500;
  color: var(--dp-fg-subtle);
}
.dp-eyebrow {
  font-family: var(--dp-font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--dp-red);
}
.dp-breadcrumb, .dp-meta-mono {
  font-family: var(--dp-font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--dp-fg-subtle);
}
.dp-price {
  font-family: var(--dp-font-display);
  font-weight: 700;
  color: var(--dp-price);
}
.dp-free {
  font-family: var(--dp-font-display);
  font-weight: 700;
  color: var(--dp-success-fg);
}

a, .dp-link {
  color: var(--dp-link);
  text-decoration: none;
  transition: opacity var(--dp-dur-fast) var(--dp-ease);
}
a:hover, .dp-link:hover { opacity: 0.85; }

code, .dp-mono {
  font-family: var(--dp-font-mono);
  font-size: 0.9em;
  background: var(--dp-bg-alt);
  border-radius: var(--dp-radius-xs);
  padding: 2px 6px;
}