/*
 * Proticket design tokens, v1.0.
 *
 * The single source of colour, type, space, shape and motion for the theme,
 * the platform plugin, wp-admin screens, the scanner, the sign-in page and
 * embedded widgets. Components must use these variables, never literal values.
 * Documentation: docs/DESIGN.md. Change a value here, not in a component.
 */

/* 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 {
  /* Brand greens. --pt-ticket is the logo stub: large accents only, never
     small text (4.3:1 on paper). Small green text uses --pt-ticket-ink. */
  --pt-ticket: #078653;
  --pt-ticket-ink: #06774a;
  --pt-forest: #274f3d;
  --pt-forest-deep: #173b32;

  /* Text, on light grounds. All pass 4.5:1 on paper, surface and sand. */
  --pt-ink: #34221f;
  --pt-ink-soft: #6a5149;
  --pt-muted: #735a50;
  --pt-clay: #a94635;

  /* Culture accents: grounds and large shapes, not small text colours. */
  --pt-coral: #e66d50;
  --pt-plum: #4d2040;
  --pt-pink: #f1c3d0;
  --pt-rose: #efb8c7;
  --pt-lime: #e3edaa;
  --pt-gold: #f3bd55;
  --pt-gold-soft: #f7dfb1;
  --pt-coral-soft: #f5d5ca;
  --pt-sage: #e7edcf;

  /* Neutrals. */
  --pt-paper: #fbf5eb;
  --pt-surface: #fffaf2;
  --pt-white: #ffffff;
  --pt-sand: #f3eddf;
  --pt-sand-strong: #f0e8db;
  --pt-line: #dfd3c5;
  --pt-line-strong: #93806f; /* form control borders, 3.6:1 on white */

  /* Text on dark grounds (forest, forest-deep, plum). */
  --pt-on-dark: #fff9e7;
  --pt-on-dark-soft: #e7cfd9;

  /* Status. Each ink passes 6:1 on its own background. */
  --pt-success-ink: #2f5d33;
  --pt-success-bg: #e8f0dc;
  --pt-success-line: #9cc08d;
  --pt-warning-ink: #7a4b0d;
  --pt-warning-bg: #fff3d9;
  --pt-warning-line: #e2b866;
  --pt-danger-ink: #9b3328;
  --pt-danger-bg: #fdebe5;
  --pt-danger-line: #e3a597;

  /* Type families. Display and expression are for headlines only, never
     for forms, tables, prices or anything a person has to read twice. */
  --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, "SFMono-Regular", Menlo, Consolas, monospace;

  /* Type scale. Nothing a visitor reads is smaller than --pt-text-xs. */
  --pt-text-xs: 12px;
  --pt-text-sm: 13px;
  --pt-text-md: 15px;
  --pt-text-lg: 17px;
  --pt-text-xl: 20px;
  --pt-title-s: 22px;
  --pt-title-m: 28px;
  --pt-display-s: clamp(34px, 4vw, 48px);
  --pt-display-m: clamp(38px, 4.6vw, 56px);
  --pt-display-l: clamp(44px, 5.2vw, 68px);
  --pt-display-xl: clamp(46px, 5.6vw, 82px);
  --pt-eyebrow-size: 11px;
  --pt-eyebrow-tracking: 0.14em;

  /* Space, on a 4px base. */
  --pt-space-1: 4px;
  --pt-space-2: 8px;
  --pt-space-3: 12px;
  --pt-space-4: 16px;
  --pt-space-5: 20px;
  --pt-space-6: 24px;
  --pt-space-8: 32px;
  --pt-space-10: 40px;
  --pt-space-12: 48px;
  --pt-space-16: 64px;
  --pt-space-20: 80px;

  /* Shape. The arch and the ticket notch are the two signature shapes. */
  --pt-radius-s: 10px;
  --pt-radius-m: 14px;
  --pt-radius-l: 20px;
  --pt-radius-xl: 28px;
  --pt-radius-pill: 999px;
  --pt-radius-arch: 190px 190px 14px 14px;

  /* Elevation. Flat by default; stickers get a hard offset, popovers a soft lift. */
  --pt-shadow-sticker: 3px 8px 0 rgb(52 34 31 / 8%);
  --pt-shadow-pop: 0 12px 32px rgb(52 34 31 / 16%);

  /* Focus. */
  --pt-focus: var(--pt-forest);
  --pt-focus-on-dark: var(--pt-lime);
  --pt-focus-width: 3px;

  /* 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;
  --pt-control-height: 48px;
}

@media (max-width: 1050px) {
  :root {
    --pt-gutter: 28px;
  }
}
@media (max-width: 700px) {
  :root {
    --pt-gutter: 18px;
  }
}