/**
 * Hora Inno - Design Tokens (InnoDays 2026 design system, see CLAUDE.md → Design tokens)
 *
 * Tier A: Bridge variables — only values Hora Events → Settings controls (--hora-*), DS fallbacks.
 * Tier B: Dark-theme semantic tokens — DS literals.
 * Tier C: Utility tokens — transitions, layout dimensions.
 */

@font-face { font-family: "Tabular"; src: url("../fonts/Tabular-Light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Tabular"; src: url("../fonts/Tabular-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Tabular"; src: url("../fonts/Tabular-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Tabular"; src: url("../fonts/Tabular-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Tabular"; src: url("../fonts/Tabular-Semibold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Tabular"; src: url("../fonts/Tabular-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  /* ===== Tier A: Bridge to Hora Settings ===== */

  --hora-inno-color-primary: var(--hora-color-primary, #0057b7);
  --hora-inno-color-on-primary: var(--hora-color-on-primary, #ffffff);

  --hora-inno-radius: var(--hora-radius, 9px);

  /* ===== Tier B: Dark-theme tokens ===== */

  /* PeaceBlue is 2.7:1 as text on the canvas; the DS sets text on black in the bright variant */
  --hora-inno-color-primary-text: #1e70eb;

  /* Not bridged: the base's error/success are static light-theme values that no Setting controls */
  --hora-inno-color-error: #d90429;
  --hora-inno-color-success: #2a9d8f;

  /* Backgrounds */
  --hora-inno-color-bg: #111111;
  --hora-inno-color-surface: #111111;
  --hora-inno-color-surface-raised: #161616;
  --hora-inno-color-surface-overlay: #242424;

  /* Panels (legacy glass names) — opaque because the DS allows no textures; #000 is its inset tile */
  --hora-inno-glass: #000000;
  --hora-inno-glass-light: #3a3a3a;
  --hora-inno-glass-subtle: #161616;
  --hora-inno-glass-hover: #242424;

  /* Dark overlays — .72 is the DS scrim; overlay-light only draws dividers on primary fills */
  --hora-inno-overlay: rgba(0, 0, 0, 0.72);
  --hora-inno-overlay-heavy: rgba(0, 0, 0, 0.72);
  --hora-inno-overlay-light: rgba(0, 0, 0, 0.2);

  /* Text on dark */
  --hora-inno-color-text: #ffffff;
  --hora-inno-color-text-body: #f2f2f2;
  --hora-inno-color-text-muted: #bdbdbd;
  --hora-inno-color-text-disabled: #8a8a8a;

  /* Borders */
  --hora-inno-color-border: #3a3a3a;
  --hora-inno-color-border-dark: #3a3a3a;

  /* States */
  --hora-inno-color-inactive: #8a8a8a;
  --hora-inno-color-disabled-bg: #242424;
  --hora-inno-color-disabled-text: #8a8a8a;

  /* Accent tints */
  --hora-inno-tint-blue: rgba(0, 87, 183, 0.1);
  --hora-inno-tint-error: rgba(230, 57, 70, 0.1);
  --hora-inno-tint-success: rgba(42, 157, 143, 0.1);
  --hora-inno-tint-disabled: rgba(138, 138, 138, 0.1);

  /* Calendar-specific */
  --hora-inno-calendar-border: #3a3a3a;
  --hora-inno-calendar-prev-month: #8a8a8a;

  /* Typography */
  --hora-inno-font-primary: var(
    --font-family-primary,
    "Tabular",
    system-ui,
    sans-serif
  );
  --hora-inno-font-secondary: var(
    --font-family-secondary,
    "Tabular",
    system-ui,
    sans-serif
  );

  /* Input Mono is not supplied; JetBrains Mono is the DS substitute */
  --hora-inno-font-mono: "Input Mono", "JetBrains Mono", ui-monospace, Menlo, monospace;

  /* Landing */
  --hora-inno-color-inset: #000000;
  --hora-inno-color-line-strong: #8a8a8a;
  --hora-inno-color-text-subtle: #8a8a8a;
  --hora-inno-color-helix-white: #ffffff;
  --hora-inno-tone-blue: var(--hora-inno-color-primary);
  --hora-inno-tone-blue-bright: #1e70eb;
  --hora-inno-tone-red: #e63946;
  --hora-inno-tone-red-vivid: #d90429;
  --hora-inno-tone-green: #00875a;
  --hora-inno-tone-green-bright: #2a9d8f;

  /* ===== Tier C: Utility tokens ===== */

  --hora-inno-ease-merge: cubic-bezier(0.65, 0, 0.25, 1);
  --hora-inno-dur-fast: 140ms;
  --hora-inno-dur-base: 260ms;
  --hora-inno-dur-slow: 600ms;

  /* Sticky landing elements sit under the theme header; set this to its height */
  --hora-inno-landing-sticky-top: 0px;
  --hora-inno-landing-gutter: clamp(18px, 3vw, 36px);

  /* Transitions */
  --hora-inno-transition-fast: 140ms cubic-bezier(0.65, 0, 0.25, 1);
  --hora-inno-transition-normal: 260ms cubic-bezier(0.65, 0, 0.25, 1);

  /* Layout */
  --hora-inno-content-width: 1280px;
  --hora-inno-right-col-width: 420px;
  --hora-inno-ticket-types-width: 640px;
  --hora-inno-calendar-width: 400px;

  /* Third-party bridges */
  --wc-form-color-background: var(--hora-inno-color-bg);
  --wc-form-color-text: var(--hora-inno-color-text);
  --colorBackground: var(--hora-inno-glass);
  --iti-dropdown-bg: var(--hora-inno-color-bg);
}

.single-hora_event .container {
  max-width: var(--hora-inno-content-width);
  margin: 0 auto;
}

.hora-credit-logo .letter {
  fill: var(--hora-inno-color-text);
}

.hora-powered-by {
  text-align: center;
  margin: 40px 0;
}

@media screen and (max-width: 992px) {
  .single-hora_event .container {
    padding: 0 18px;
  }

  :root {
    --hora-inno-right-col-width: 100%;
  }
}

/* ===== Tones: one material, one colour ===== */

.hora-inno-tone-blue { --accent: var(--hora-inno-tone-blue); --on-accent: var(--hora-inno-color-on-primary); --icon-color: var(--hora-inno-tone-blue-bright); }
.hora-inno-tone-red { --accent: var(--hora-inno-tone-red); --on-accent: var(--hora-inno-color-text); --icon-color: var(--hora-inno-tone-red); }
.hora-inno-tone-green { --accent: var(--hora-inno-tone-green); --on-accent: var(--hora-inno-color-text); --icon-color: var(--hora-inno-tone-green-bright); }
.hora-inno-tone-mono { --accent: var(--hora-inno-color-helix-white); --on-accent: var(--hora-inno-color-inset); --icon-color: var(--hora-inno-color-helix-white); }

/* Day tones (16–20 Nov): --day-accent for text and borders, --day-liquid-* for the date tab; the grey days take the mono button */
.hora-inno-day--mon { --day-accent: var(--hora-inno-color-line-strong); --day-liquid-bg: var(--hora-inno-color-border); --day-liquid-fg: var(--hora-inno-color-text); --accent: var(--hora-inno-color-helix-white); --on-accent: var(--hora-inno-color-inset); }
.hora-inno-day--tue { --day-accent: var(--hora-inno-color-text-muted); --day-liquid-bg: var(--hora-inno-color-text); --day-liquid-fg: var(--hora-inno-color-inset); --accent: var(--hora-inno-color-helix-white); --on-accent: var(--hora-inno-color-inset); }
.hora-inno-day--wed { --day-accent: var(--hora-inno-tone-red); --day-liquid-bg: var(--hora-inno-tone-red); --day-liquid-fg: var(--hora-inno-color-text); --accent: var(--hora-inno-tone-red); --on-accent: var(--hora-inno-color-text); }
.hora-inno-day--thu { --day-accent: var(--hora-inno-tone-blue-bright); --day-liquid-bg: var(--hora-inno-tone-blue); --day-liquid-fg: var(--hora-inno-color-on-primary); --accent: var(--hora-inno-tone-blue); --on-accent: var(--hora-inno-color-on-primary); }
.hora-inno-day--fri { --day-accent: var(--hora-inno-tone-green-bright); --day-liquid-bg: var(--hora-inno-tone-green); --day-liquid-fg: var(--hora-inno-color-text); --accent: var(--hora-inno-tone-green); --on-accent: var(--hora-inno-color-text); }