/*
 * Proticket design tokens, design system 2.0.
 *
 * Source: design handoff README ("Design tokens") and 01 Design System.
 * The only place a colour, type size, space, radius or shadow is written as
 * a literal. Everything else uses these variables. New CSS uses only the
 * tokens in the first block of each group; the "Retired" block keeps older
 * names working until the screens that use them are rebuilt, and must not be
 * used in new code.
 */

/* Self-hosted Latin subsets, SIL Open Font License (see fonts/*-OFL.txt). */
@font-face {
  font-family: "Proticket Anton";
  src: url("fonts/anton.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Proticket Lilita";
  src: url("fonts/lilita-one.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  /* Grounds. */
  --pt-paper: #fbf5eb;        /* page background · ink 13.9:1 */
  --pt-surface: #fffaf2;      /* cards, panels, rails · ink 14.3:1 */
  --pt-white: #ffffff;        /* fields, tables, tickets · ink 15.0:1 */
  --pt-sand: #f3eddf;         /* footer, hover, empty states, table header · muted 5.4:1 */

  /* Lines and text. */
  --pt-line: #dfd3c5;         /* dividers, card borders · decorative only */
  --pt-line-strong: #93806f;  /* field and secondary-button borders · 3.6:1 on white */
  --pt-ink: #34221f;          /* text · 13.9:1 */
  --pt-muted: #735a50;        /* meta, hints · 5.9:1 */

  /* Brand greens and accent. */
  --pt-ticket-ink: #06774a;   /* green text: links, eyebrows · 5.2:1 */
  --pt-ticket: #078653;       /* logo only, never text · 4.3:1 */
  --pt-forest: #274f3d;       /* primary buttons, current tab, focus on light · white 9.2:1 */
  --pt-forest-deep: #173b32;  /* hover, dark bands, door app ground · paper 11.6:1 */
  --pt-clay: #a94635;         /* headline accent, date month · 5.4:1 */

  /* Public site only: grounds, never text, never in operate screens. */
  --pt-coral: #e66d50;        /* bands, art fallbacks · ink 4.8:1 */
  --pt-lime: #e3edaa;         /* sticker, primary on dark, focus on dark · forest-deep 9.6:1 */

  /* Status: ink on its own ground. Colour is never the only signal. */
  --pt-success-ink: #2f5d33;  /* 6.6:1 · valid, admitted, paid, published */
  --pt-success-bg: #e8f0dc;
  --pt-warning-ink: #7a4b0d;  /* 7.1:1 · pending, held, in review, frozen, unknown outcome */
  --pt-warning-bg: #fff3d9;
  --pt-danger-ink: #9b3328;   /* 6.4:1 · refused, refunded, failed */
  --pt-danger-bg: #fdebe5;
  --pt-danger-deep: #7a2a21;  /* danger button hover and pressed only */

  /* Type families. Anton: page titles and section headlines only. Lilita:
     the homepage hero phrase and sticker only. Never display type in forms,
     tables, prices, checkout or the scanner. */
  --pt-font-display: "Proticket Anton", "Arial Narrow", "Roboto Condensed", sans-serif;
  --pt-font-expression: "Proticket Lilita", "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
  --pt-font-body: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --pt-font-mono: ui-monospace, Menlo, monospace;

  /* Type roles (desktop; phone values below). */
  --pt-display-l: 64px;       /* Anton, uppercase */
  --pt-display-m: 44px;
  --pt-display-s: 32px;
  --pt-title: 28px;           /* 700 */
  --pt-heading: 20px;         /* 700 */
  --pt-lead: 17px;            /* 400 */
  --pt-body: 16px;            /* 400 */
  --pt-small: 14px;           /* 400 */
  --pt-label: 12px;           /* 700, uppercase, .14em: the floor size */
  --pt-label-tracking: 0.14em;

  /* Space: these five steps only. */
  --pt-space-1: 4px;          /* icon to label, badge padding */
  --pt-space-2: 8px;          /* label to field, related items */
  --pt-space-4: 16px;         /* between fields, card padding on phone */
  --pt-space-6: 24px;         /* card padding, between cards */
  --pt-space-12: 48px;        /* between sections, page gutter */

  /* Shape: three radii. The homepage arch is the only exception. */
  --pt-radius-s: 8px;         /* fields */
  --pt-radius-m: 16px;        /* cards */
  --pt-radius-pill: 999px;    /* buttons, tabs, badges */
  --pt-radius-arch: 190px 190px 14px 14px;

  /* Elevation: popovers and sheets only. */
  --pt-shadow-pop: 0 12px 32px rgb(52 34 31 / 16%);

  /* Focus: 3px ring, 3px offset. Forest on light grounds, lime on dark. */
  --pt-focus: var(--pt-forest);
  --pt-focus-on-dark: var(--pt-lime);
  --pt-focus-width: 3px;
  --pt-focus-offset: 3px;

  /* Size. Every control is at least 48px tall. */
  --pt-control-height: 48px;

  /* Motion. */
  --pt-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --pt-duration-fast: 150ms;
  --pt-duration-base: 250ms;

  /* Layout. */
  --pt-container: 1320px;
  --pt-gutter: 48px;

  /* Retired: aliases kept until the screens that use them are rebuilt.
     Colour replacements follow "Retired tokens" in 01 Design System. */
  --pt-ink-soft: var(--pt-muted);
  --pt-plum: var(--pt-forest-deep);
  --pt-pink: var(--pt-sand);
  --pt-rose: var(--pt-lime);
  --pt-gold: var(--pt-clay);
  --pt-gold-soft: var(--pt-warning-bg);
  --pt-coral-soft: var(--pt-sand);
  --pt-sage: var(--pt-sand);
  --pt-sand-strong: var(--pt-sand);
  --pt-on-dark: var(--pt-paper);
  --pt-on-dark-soft: var(--pt-paper);
  --pt-success-line: var(--pt-success-ink);
  --pt-warning-line: var(--pt-warning-ink);
  --pt-danger-line: var(--pt-danger-ink);
  --pt-text-xs: var(--pt-label);
  --pt-text-sm: var(--pt-small);
  --pt-text-md: var(--pt-body);
  --pt-text-lg: var(--pt-lead);
  --pt-text-xl: var(--pt-heading);
  --pt-title-s: 24px;
  --pt-title-m: var(--pt-title);
  --pt-display-xl: clamp(46px, 5.6vw, 82px);
  --pt-eyebrow-size: var(--pt-label);
  --pt-eyebrow-tracking: var(--pt-label-tracking);
  --pt-space-3: 12px;
  --pt-space-5: 20px;
  --pt-space-8: 32px;
  --pt-space-10: 40px;
  --pt-space-16: 64px;
  --pt-space-20: 80px;
  --pt-radius-l: var(--pt-radius-m);
  --pt-radius-xl: var(--pt-radius-m);
  --pt-shadow-sticker: none;
}

/* Tablet (public 768 and below): narrower gutter. */
@media (max-width: 1050px) {
  :root {
    --pt-gutter: 24px;
  }
}

/* Phone: the second size of each pair, 16px gutter. */
@media (max-width: 760px) {
  :root {
    --pt-display-l: 40px;
    --pt-display-m: 32px;
    --pt-display-s: 28px;
    --pt-title: 24px;
    --pt-gutter: 16px;
  }
}