/* Der Bunker Hagen — Concrete Archive Design Tokens
   Import the two typefaces in the app shell, then import this file once. */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=Source+Sans+3:ital,wght@0,400;0,600;0,700;1,400&display=swap');

:root {
  /* Primitives: color */
  --bh-color-black: #111110;
  --bh-color-deep-concrete: #202124;
  --bh-color-steel: #686966;
  --bh-color-concrete: #b8b5ae;
  --bh-color-concrete-light: #dedad2;
  --bh-color-archive-white: #f2f0ea;
  --bh-color-hagen-orange: #c65332;
  --bh-color-rust: #843c29;
  --bh-color-error: #b42318;
  --bh-color-success: #43634e;

  /* Primitives: typography */
  --bh-font-display: "Oswald", "Arial Narrow", sans-serif;
  --bh-font-body: "Source Sans 3", Arial, sans-serif;
  --bh-text-2xs: 0.6875rem;
  --bh-text-xs: 0.75rem;
  --bh-text-sm: 0.875rem;
  --bh-text-base: 1rem;
  --bh-text-lg: 1.125rem;
  --bh-text-xl: clamp(1.5rem, 2.2vw, 2.25rem);
  --bh-text-2xl: clamp(2.25rem, 5vw, 4.5rem);
  --bh-text-3xl: clamp(3rem, 7vw, 6.5rem);

  /* Primitives: layout */
  --bh-space-1: 0.25rem;
  --bh-space-2: 0.5rem;
  --bh-space-3: 0.75rem;
  --bh-space-4: 1rem;
  --bh-space-5: 1.25rem;
  --bh-space-6: 1.5rem;
  --bh-space-8: 2rem;
  --bh-space-10: 2.5rem;
  --bh-space-12: 3rem;
  --bh-space-16: 4rem;
  --bh-space-20: 5rem;
  --bh-space-24: 6rem;
  --bh-border-1: 1px;
  --bh-border-2: 2px;
  --bh-radius-none: 0;
  --bh-container: 78rem;
  --bh-page-padding: clamp(1.25rem, 4vw, 3rem);
  --bh-duration-fast: 150ms;
  --bh-duration-base: 200ms;

  /* Semantic: surfaces and content */
  --bh-surface-page: var(--bh-color-black);
  --bh-surface-raised: var(--bh-color-deep-concrete);
  --bh-surface-paper: var(--bh-color-archive-white);
  --bh-surface-muted: var(--bh-color-concrete-light);
  --bh-surface-subtle: color-mix(in srgb, var(--bh-color-deep-concrete) 75%, var(--bh-color-black));
  --bh-text-on-dark: var(--bh-color-archive-white);
  --bh-text-muted-on-dark: var(--bh-color-concrete);
  --bh-text-on-light: var(--bh-color-black);
  --bh-text-muted-on-light: #4b4c4a;
  --bh-border-on-dark: color-mix(in srgb, var(--bh-color-archive-white) 30%, transparent);
  --bh-border-on-light: color-mix(in srgb, var(--bh-color-black) 58%, transparent);
  --bh-action: var(--bh-color-hagen-orange);
  --bh-action-hover: #dc6540;
  --bh-action-active: var(--bh-color-rust);
  --bh-action-text: var(--bh-color-black);
  --bh-focus: var(--bh-color-archive-white);

  /* Semantic: type roles */
  --bh-display-line-height: 0.96;
  --bh-body-line-height: 1.55;
  --bh-label-line-height: 1.15;
  --bh-label-tracking: 0.12em;

  /* Component: button */
  --bh-button-height: 3.25rem;
  --bh-button-padding-x: var(--bh-space-6);
  --bh-button-font: 600 var(--bh-text-sm) / var(--bh-label-line-height) var(--bh-font-display);
  --bh-button-tracking: 0.075em;
  --bh-button-primary-bg: var(--bh-action);
  --bh-button-primary-fg: var(--bh-action-text);
  --bh-button-secondary-bg: transparent;
  --bh-button-secondary-fg: var(--bh-text-on-dark);
  --bh-button-secondary-border: var(--bh-border-on-dark);

  /* Component: cards and fields */
  --bh-card-border: var(--bh-border-1) solid var(--bh-border-on-dark);
  --bh-card-padding: var(--bh-space-6);
  --bh-field-height: 3.25rem;
  --bh-field-bg: transparent;
  --bh-field-fg: var(--bh-text-on-dark);
  --bh-field-border: var(--bh-border-on-dark);
}

/* Base contract */
.bh-site { background: var(--bh-surface-page); color: var(--bh-text-on-dark); font-family: var(--bh-font-body); font-size: var(--bh-text-base); line-height: var(--bh-body-line-height); }
.bh-container { width: min(100% - (var(--bh-page-padding) * 2), var(--bh-container)); margin-inline: auto; }
.bh-display { font-family: var(--bh-font-display); font-weight: 600; line-height: var(--bh-display-line-height); letter-spacing: -0.015em; text-transform: uppercase; }
.bh-overline { color: var(--bh-action); font: 600 var(--bh-text-xs) / var(--bh-label-line-height) var(--bh-font-display); letter-spacing: var(--bh-label-tracking); text-transform: uppercase; }
.bh-section { padding-block: clamp(var(--bh-space-12), 8vw, var(--bh-space-24)); border-top: var(--bh-border-1) solid var(--bh-border-on-dark); }
.bh-section--paper { background: var(--bh-surface-paper); color: var(--bh-text-on-light); border-color: var(--bh-border-on-light); }

/* Buttons: orange is reserved for the one primary action in a viewport. */
.bh-button { align-items: center; border-radius: var(--bh-radius-none); border: var(--bh-border-1) solid transparent; cursor: pointer; display: inline-flex; gap: var(--bh-space-3); height: var(--bh-button-height); justify-content: center; padding-inline: var(--bh-button-padding-x); text-decoration: none; text-transform: uppercase; transition: background-color var(--bh-duration-fast) ease, border-color var(--bh-duration-fast) ease, color var(--bh-duration-fast) ease; font: var(--bh-button-font); letter-spacing: var(--bh-button-tracking); }
.bh-button--primary { background: var(--bh-button-primary-bg); color: var(--bh-button-primary-fg); }
.bh-button--primary:hover { background: var(--bh-action-hover); }
.bh-button--primary:active { background: var(--bh-action-active); }
.bh-button--secondary { background: var(--bh-button-secondary-bg); border-color: var(--bh-button-secondary-border); color: var(--bh-button-secondary-fg); }
.bh-button--secondary:hover { background: var(--bh-surface-raised); }
.bh-button:focus-visible, .bh-link:focus-visible, .bh-field:focus-visible { outline: var(--bh-border-2) solid var(--bh-focus); outline-offset: 3px; }

/* Ticket / tour card */
.bh-tour-card { border: var(--bh-card-border); display: flex; flex-direction: column; min-height: 20rem; padding: var(--bh-card-padding); }
.bh-tour-card__meta { color: var(--bh-text-muted-on-dark); font: 600 var(--bh-text-xs) / var(--bh-label-line-height) var(--bh-font-display); letter-spacing: var(--bh-label-tracking); text-transform: uppercase; }
.bh-tour-card__title { font: 600 var(--bh-text-xl) / 1 var(--bh-font-display); letter-spacing: -0.01em; margin-block: var(--bh-space-4); text-transform: uppercase; }
.bh-tour-card__facts { border-top: var(--bh-border-1) solid var(--bh-border-on-dark); display: grid; gap: var(--bh-space-2); margin-top: auto; padding-top: var(--bh-space-4); }
.bh-tour-card__facts dt { color: var(--bh-text-muted-on-dark); font: 600 var(--bh-text-xs) / var(--bh-label-line-height) var(--bh-font-display); letter-spacing: var(--bh-label-tracking); text-transform: uppercase; }
.bh-tour-card__facts dd { margin: 0; }

/* Forms */
.bh-field-label { display: block; font: 600 var(--bh-text-sm) / var(--bh-label-line-height) var(--bh-font-body); margin-bottom: var(--bh-space-2); }
.bh-field { background: var(--bh-field-bg); border: var(--bh-border-1) solid var(--bh-field-border); border-radius: var(--bh-radius-none); color: var(--bh-field-fg); font: inherit; min-height: var(--bh-field-height); padding: var(--bh-space-3) var(--bh-space-4); width: 100%; }
.bh-field::placeholder { color: var(--bh-text-muted-on-dark); opacity: 1; }
.bh-field[aria-invalid="true"] { border-color: var(--bh-color-error); }

@media (prefers-reduced-motion: reduce) { .bh-button { transition: none; } }