/* ============================================================
   Infomaniak Events — Colors & Type
   Minimalist ticketing design system
   ============================================================ */

/* ---------- Fonts ----------
   Primary: Suisse Int'l (Book / Regular / Medium / Semibold / Bold)
   Display: After (40px display use; e.g. hero / event titles)

   NOTE: The provided Suisse Int'l .otf files were not present on the
   filesystem at build time. We fall back to "Inter" (Google Fonts) as
   the closest neo-grotesque substitute. Replace the @font-face block
   below when valid Suisse Int'l files are available.
*/

@font-face {
  font-family: "After";
  src: url("./fonts/After-Regular.woff2") format("woff2"),
       url("./fonts/After-Regular.woff") format("woff"),
       url("./fonts/After-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* If the real Suisse files arrive, replace this @import with @font-face blocks */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap");

:root {
  /* ---------- Responsive : cartes produit (image / gap / titre) ---------- */
  --card-img: 180px;
  --card-gap: 32px;
  --card-title: 20px;
  /* Indentation des sections sous leur en-tête à icône (page événement) */
  --sec-indent: 40px;

  /* ---------- Type families ---------- */
  --font-sans: "Suisse Int'l", "Inter", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "After", "Suisse Int'l", "Inter", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menos, Monaco, Consolas, monospace;

  /* ---------- Brand: Ticketing red scale ---------- */
  --color-ticketing-100: #ffe1e3;
  --color-ticketing-200: #ffbec4;
  --color-ticketing-300: #ff9da7;
  --color-ticketing-400: #ff7485;
  --color-ticketing-500: #ff3e60;  /* primary CTA */
  --color-ticketing-600: #da0040;  /* hover */
  --color-ticketing-700: #a8002f;
  --color-ticketing-800: #74001d;
  --color-ticketing-900: #48000f;

  /* ---------- Neutrals ---------- */
  --color-white: #ffffff;
  --color-neutral-100: #fafafa;  /* clickable block bg */
  --color-neutral-200: #f5f5f5;  /* hover */
  --color-neutral-300: #f1f1f1;  /* secondary button bg */
  --color-neutral-400: #e0e0e0;  /* border */
  --color-neutral-500: #9f9f9f;  /* disabled */
  --color-neutral-600: #666666;  /* body text */
  --color-neutral-700: #333333;  /* titles / labels */
  --color-neutral-800: #1a1a1a;  /* near-black */
  --color-black: #000000;

  /* ---------- Semantic aliases ---------- */
  --bg: var(--color-white);
  --bg-subtle: var(--color-neutral-100);
  --bg-hover: var(--color-neutral-200);
  --bg-secondary: var(--color-neutral-300);
  --border: var(--color-neutral-400);
  --border-strong: var(--color-neutral-500);
  --fg: var(--color-neutral-700);          /* default text */
  --fg-strong: var(--color-neutral-800);   /* titles */
  --fg-muted: var(--color-neutral-600);    /* secondary text */
  --fg-subtle: var(--color-neutral-500);   /* tertiary / disabled */
  --fg-on-primary: var(--color-white);

  --primary: var(--color-ticketing-500);
  --primary-hover: var(--color-ticketing-600);
  --primary-press: var(--color-ticketing-700);
  --primary-soft: var(--color-ticketing-100);

  /* ---------- Type scale (from Figma) ---------- */
  --text-display: 40px;       /* After Regular */
  --text-h1: 24px;            /* Suisse Bold */
  --text-h2: 18px;            /* Suisse Bold */
  --text-base: 16px;          /* body */
  --text-sm: 14px;            /* secondary */
  --text-xs: 12px;            /* meta */
  --text-xxs: 10px;           /* uppercase eyebrows */

  --leading-display: 1.1;
  --leading-h1: 1.5;          /* 36/24 */
  --leading-h2: 1.5;
  --leading-base: 1.5;        /* 24/16 */
  --leading-sm: 1.43;         /* 20/14 */
  --leading-xs: 1.33;         /* 16/12 */

  --weight-book: 400;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ---------- Radii ---------- */
  --radius-xs: 4px;
  --radius-sm: 5px;          /* small surface containers */
  --radius-md: 8px;          /* color chips / cards */
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 60px;       /* ALL primary buttons */
  --radius-full: 9999px;

  /* ---------- Spacing scale ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* ---------- Shadow / elevation (used sparingly) ---------- */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.10);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 120ms;
  --duration-base: 180ms;
  --duration-slow: 280ms;
}

/* ============================================================
   Base typography (semantic)
   ============================================================ */

html {
  font-family: var(--font-sans);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-size: var(--text-base);
  line-height: var(--leading-base);
  font-weight: var(--weight-book);
  color: var(--fg-muted);
  margin: 0;
}

.display, .text-display {
  font-family: var(--font-display);
  font-size: var(--text-display);
  line-height: var(--leading-display);
  font-weight: 400;
  color: var(--fg-strong);
  letter-spacing: -0.01em;
}

h1, .h1, .text-h1 {
  font-family: var(--font-sans);
  font-size: var(--text-h1);
  line-height: var(--leading-h1);
  font-weight: var(--weight-bold);
  color: var(--fg-strong);
  margin: 0;
}

h2, .h2, .text-h2 {
  font-family: var(--font-sans);
  font-size: var(--text-h2);
  line-height: var(--leading-h2);
  font-weight: var(--weight-bold);
  color: var(--fg-strong);
  margin: 0;
}

p, .text-base {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-base);
  color: var(--fg-muted);
  margin: 0;
}

.text-base-bold {
  font-weight: var(--weight-bold);
  color: var(--fg-strong);
}

.text-base-bold-uppercase {
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--fg-strong);
}

.text-sm {
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  color: var(--fg-muted);
}

.text-sm-semibold {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--fg);
}

.text-xs {
  font-size: var(--text-xs);
  line-height: var(--leading-xs);
  color: var(--fg-subtle);
}

.text-xs-semibold {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--fg);
}

.text-xxs-uppercase {
  font-size: var(--text-xxs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg);
}

a {
  color: var(--fg);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
a:hover { color: var(--primary); }

code, pre, .mono {
  font-family: var(--font-mono);
  font-size: 13px;
}

/* ============================================================
   Buttons (canonical primary/secondary/disabled, pill)
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;  justify-content: center;
  gap: var(--space-2);
  height: 48px;
  padding: 0 var(--space-4);
  border: 0;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              opacity var(--duration-fast) var(--ease-out);
  white-space: nowrap;
}

.btn-sm {
  height: 40px;
  font-size: var(--text-xs);
  padding: 0 var(--space-3);
}

.btn-primary {
  background: var(--primary);
  color: var(--fg-on-primary);
}
.btn-primary,
.btn-primary svg { color: var(--fg-on-primary); }
.btn-primary:hover { background: var(--primary-hover); color: #fff; }
.btn-primary:hover svg { color: #fff; }
.btn-primary:active { background: var(--primary-press); color: #fff; }
.btn-primary:active svg { color: #fff; }
.btn-primary:disabled,
.btn-primary[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
}

.btn-white {
  background: var(--color-white);
  color: var(--fg-strong);
  border: 0;
}
.btn-white:hover { background: var(--color-neutral-300); }

.btn-grey {
  background: var(--color-neutral-200);
  color: var(--fg-subtle);
  border: 0;
  cursor: not-allowed;
}

.btn-ghost {
  background: transparent;
  color: var(--fg-strong);
}
.btn-ghost:hover { background: var(--bg-hover); }

.btn-disabled,
.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.btn-primary.btn-disabled,
.btn-primary:disabled {
  background: var(--primary);
  color: var(--fg-on-primary);
  opacity: 0.4;
}

/* ---------- Mobile (≤ 768px) ---------- */
@media (max-width: 768px) {
  :root { --card-img: 96px; --card-gap: 16px; --card-title: 16px; --sec-indent: 0px; }
}