/*
 * Visor Municipal landing token layer.
 *
 * The landing intentionally owns this small, prefixed system instead of
 * importing the viewer's runtime theme. New landing markup should use these
 * tokens and primitives so the marketing surface stays independent from the
 * viewer runtime.
 */

:root {
  /* Brand and neutral palette */
  --landing-color-brand-ink: #10263d;
  --landing-color-sage: #6f8f78;
  --landing-color-sage-light: #a9c9b0;
  --landing-color-water: #6f9aaf;
  --landing-color-canvas: #f7f7f2;
  --landing-color-ink-soft: #c3d0d0;
  --landing-color-paper: #ffffff;
  --landing-color-success: #2e7d64;
  --landing-color-information: #2e6dff;
  --landing-color-warning: #f2a300;
  --landing-color-error: #d64545;
  --landing-color-n200: #ecede9;
  --landing-color-n300: #dde2de;
  --landing-color-n400: #b5bdc3;
  --landing-color-n500: #8e98a2;
  --landing-color-n600: #61707c;
  --landing-color-n700: #35424c;
  --landing-color-n800: #1f2932;

  /* Semantic color roles */
  --landing-color-text-primary: var(--landing-color-brand-ink);
  --landing-color-text-secondary: var(--landing-color-n700);
  --landing-color-text-muted: var(--landing-color-n600);
  --landing-color-text-on-ink: var(--landing-color-paper);
  --landing-color-surface-paper: var(--landing-color-paper);
  --landing-color-surface-canvas: var(--landing-color-canvas);
  --landing-color-surface-ink: var(--landing-color-brand-ink);
  --landing-color-border-default: var(--landing-color-n300);
  --landing-color-border-subtle: var(--landing-color-n200);
  --landing-color-border-strong: var(--landing-color-n400);
  --landing-color-focus: var(--landing-color-information);
  --landing-color-action-primary: var(--landing-color-brand-ink);
  --landing-color-action-primary-hover: var(--landing-color-n800);
  --landing-color-action-primary-active: var(--landing-color-n700);
  --landing-color-action-secondary: var(--landing-color-paper);
  --landing-color-action-secondary-hover: var(--landing-color-canvas);
  --landing-color-action-secondary-active: var(--landing-color-n200);

  /* Typography: the font asset and @font-face stay owned by LAND-05. */
  --landing-font-family-base:
    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --landing-font-weight-regular: 400;
  --landing-font-weight-medium: 500;
  --landing-font-weight-semibold: 600;
  --landing-font-size-h1: 4rem;
  --landing-line-height-h1: 4.15rem;
  --landing-letter-spacing-h1: -0.045em;
  --landing-font-size-h2: 3.25rem;
  --landing-line-height-h2: 3.35rem;
  --landing-letter-spacing-h2: -0.04em;
  --landing-font-size-h3: 1.5rem;
  --landing-line-height-h3: 2rem;
  --landing-font-size-lead: 1.125rem;
  --landing-line-height-lead: 1.75rem;
  --landing-font-size-body: 1rem;
  --landing-line-height-body: 1.625rem;
  --landing-font-size-small: 0.875rem;
  --landing-line-height-small: 1.25rem;
  --landing-font-size-hero-descriptor: 0.8125rem;
  --landing-font-size-label: 0.75rem;
  --landing-line-height-label: 1rem;
  --landing-font-size-control: 0.875rem;
  --landing-line-height-control: 1.25rem;

  /* Spacing: 4px base with an 8px structural rhythm. */
  --landing-space-1: 4px;
  --landing-space-2: 8px;
  --landing-space-3: 16px;
  --landing-space-4: 24px;
  --landing-space-5: 32px;
  --landing-space-6: 48px;
  --landing-space-7: 64px;
  --landing-space-8: 96px;
  --landing-space-9: 128px;

  /* Layout */
  --landing-container-max: 1280px;
  --landing-container-gutter: clamp(48px, 5.5vw, 80px);
  --landing-grid-columns: 12;
  --landing-grid-gutter: 24px;
  --landing-hero-space-top: 88px;
  --landing-hero-space-bottom: 112px;
  --landing-product-space-top: 96px;
  --landing-product-space-bottom: 96px;
  --landing-header-height: 80px;
  --landing-header-height-mobile: 64px;
  --landing-header-logo-width: 180px;
  --landing-header-logo-width-mobile: 152px;
  --landing-z-index-header: 20;
  --landing-z-index-skip-link: 30;

  /* Geometry */
  --landing-radius-small: 4px;
  --landing-radius-control: 8px;
  --landing-radius-crop: 12px;
  --landing-radius-screenshot: 16px;
  --landing-radius-surface: 24px;
  --landing-border-width: 1px;

  /* Elevation: two restrained levels only. */
  --landing-shadow-1: 0 2px 8px rgb(16 38 61 / 6%);
  --landing-shadow-2: 0 24px 56px rgb(16 38 61 / 12%), 0 4px 12px rgb(16 38 61 / 5%);

  /* Motion */
  --landing-motion-duration-hover: 150ms;
  --landing-motion-duration-press: 110ms;
  --landing-motion-duration-editorial: 300ms;
  --landing-motion-ease-editorial: cubic-bezier(0.2, 0.8, 0.2, 1);
  --landing-motion-hover-translate-y: -2px;

  /* Interaction */
  --landing-focus-width: 2px;
  --landing-focus-offset: 2px;
  --landing-focus-inner-width: 1px;
  --landing-hit-target-min: 44px;
  --landing-control-height: 44px;
  --landing-control-padding-block: 10px;
  --landing-control-padding-inline: 16px;
  --landing-control-textarea-min-height: 120px;
  --landing-link-underline-thickness: 1px;
  --landing-link-underline-offset: 3px;
  --landing-motion-rest-translate-y: 0px;
  --landing-state-disabled-opacity: 0.56;
}

@media (max-width: 1023px) {
  :root {
    --landing-container-gutter: 32px;
    --landing-grid-columns: 8;
    --landing-grid-gutter: 20px;
    --landing-hero-space-top: 72px;
    --landing-hero-space-bottom: 96px;
    --landing-product-space-top: 80px;
    --landing-product-space-bottom: 80px;
    --landing-font-size-h1: 3.75rem;
    --landing-line-height-h1: 3.85rem;
    --landing-font-size-h2: 2.75rem;
    --landing-line-height-h2: 2.95rem;
  }
}

@media (max-width: 599px) {
  :root {
    --landing-container-gutter: clamp(20px, 6.154vw, 24px);
    --landing-grid-columns: 4;
    --landing-grid-gutter: 16px;
    --landing-hero-space-top: 56px;
    --landing-hero-space-bottom: 72px;
    --landing-product-space-top: 64px;
    --landing-product-space-bottom: 64px;
    --landing-font-size-h1: 2.75rem;
    --landing-line-height-h1: 2.9rem;
    --landing-font-size-h2: 2.125rem;
    --landing-line-height-h2: 2.35rem;
    --landing-font-size-h3: 1.375rem;
    --landing-line-height-h3: 1.75rem;
    --landing-font-size-lead: 1.0625rem;
    --landing-line-height-lead: 1.625rem;
  }
}

/* Layout primitives */

.landing-container {
  width: min(
    calc(100% - var(--landing-container-gutter) - var(--landing-container-gutter)),
    var(--landing-container-max)
  );
  margin-inline: auto;
}

.landing-grid {
  display: grid;
  grid-template-columns: repeat(var(--landing-grid-columns), minmax(0, 1fr));
  column-gap: var(--landing-grid-gutter);
}

/* Shared focus treatment */

.landing-button:focus-visible,
.landing-link:focus-visible,
.landing-input:focus-visible,
.landing-select:focus-visible,
.landing-textarea:focus-visible {
  outline: var(--landing-focus-width) solid var(--landing-color-focus);
  outline-offset: var(--landing-focus-offset);
}

/* Link primitive */

.landing-link {
  color: var(--landing-color-text-primary);
  font-family: var(--landing-font-family-base);
  font-size: var(--landing-font-size-control);
  font-weight: var(--landing-font-weight-medium);
  line-height: var(--landing-line-height-control);
  text-decoration: underline;
  text-decoration-thickness: var(--landing-link-underline-thickness);
  text-underline-offset: var(--landing-link-underline-offset);
  transition: color var(--landing-motion-duration-hover) var(--landing-motion-ease-editorial);
}

.landing-link:hover {
  color: var(--landing-color-n800);
}

/* Button primitives */

.landing-button {
  display: inline-flex;
  min-block-size: var(--landing-hit-target-min);
  min-inline-size: var(--landing-hit-target-min);
  align-items: center;
  justify-content: center;
  gap: var(--landing-space-2);
  padding: var(--landing-control-padding-block) var(--landing-control-padding-inline);
  border: var(--landing-border-width) solid transparent;
  border-radius: var(--landing-radius-control);
  font-family: var(--landing-font-family-base);
  font-size: var(--landing-font-size-control);
  font-weight: var(--landing-font-weight-semibold);
  line-height: var(--landing-line-height-control);
  text-decoration: none;
  transition:
    background-color var(--landing-motion-duration-hover) var(--landing-motion-ease-editorial),
    border-color var(--landing-motion-duration-hover) var(--landing-motion-ease-editorial),
    color var(--landing-motion-duration-hover) var(--landing-motion-ease-editorial),
    transform var(--landing-motion-duration-hover) var(--landing-motion-ease-editorial);
}

.landing-button:hover:not(:disabled):not([aria-disabled="true"]) {
  transform: translateY(var(--landing-motion-hover-translate-y));
}

.landing-button:active:not(:disabled):not([aria-disabled="true"]) {
  transform: translateY(var(--landing-motion-rest-translate-y));
  transition-duration: var(--landing-motion-duration-press);
}

.landing-button:disabled,
.landing-button[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: var(--landing-state-disabled-opacity);
}

.landing-button--primary {
  background: var(--landing-color-action-primary);
  color: var(--landing-color-text-on-ink);
}

.landing-button--primary:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--landing-color-action-primary-hover);
}

.landing-button--primary:active:not(:disabled):not([aria-disabled="true"]) {
  background: var(--landing-color-action-primary-active);
}

.landing-button--secondary {
  border-color: var(--landing-color-border-default);
  background: var(--landing-color-action-secondary);
  color: var(--landing-color-text-primary);
}

.landing-button--secondary:hover:not(:disabled):not([aria-disabled="true"]) {
  border-color: var(--landing-color-border-strong);
  background: var(--landing-color-action-secondary-hover);
}

.landing-button--secondary:active:not(:disabled):not([aria-disabled="true"]) {
  background: var(--landing-color-action-secondary-active);
}

/* Form primitives */

.landing-field {
  display: grid;
  gap: var(--landing-space-2);
}

.landing-field__label {
  color: var(--landing-color-text-primary);
  font-family: var(--landing-font-family-base);
  font-size: var(--landing-font-size-control);
  font-weight: var(--landing-font-weight-medium);
  line-height: var(--landing-line-height-control);
}

.landing-input,
.landing-select,
.landing-textarea {
  display: block;
  width: 100%;
  min-block-size: var(--landing-control-height);
  padding: var(--landing-control-padding-block) var(--landing-control-padding-inline);
  border: var(--landing-border-width) solid var(--landing-color-border-default);
  border-radius: var(--landing-radius-control);
  background: var(--landing-color-surface-paper);
  color: var(--landing-color-text-primary);
  font: inherit;
  font-size: var(--landing-font-size-control);
  line-height: var(--landing-line-height-control);
  transition:
    border-color var(--landing-motion-duration-hover) var(--landing-motion-ease-editorial),
    box-shadow var(--landing-motion-duration-hover) var(--landing-motion-ease-editorial);
}

.landing-textarea {
  min-block-size: var(--landing-control-textarea-min-height);
  resize: vertical;
}

.landing-input::placeholder,
.landing-textarea::placeholder {
  color: var(--landing-color-text-muted);
  opacity: 1;
}

.landing-input:hover:not(:disabled),
.landing-select:hover:not(:disabled),
.landing-textarea:hover:not(:disabled) {
  border-color: var(--landing-color-border-strong);
}

.landing-input:focus-visible,
.landing-select:focus-visible,
.landing-textarea:focus-visible {
  border-color: var(--landing-color-focus);
  box-shadow: 0 0 0 var(--landing-focus-inner-width) var(--landing-color-focus);
}

.landing-input:disabled,
.landing-select:disabled,
.landing-textarea:disabled {
  cursor: not-allowed;
  background: var(--landing-color-canvas);
  color: var(--landing-color-text-muted);
}

.landing-input[aria-invalid="true"],
.landing-select[aria-invalid="true"],
.landing-textarea[aria-invalid="true"] {
  border-color: var(--landing-color-error);
}

.landing-field__message {
  color: var(--landing-color-text-muted);
  font-size: var(--landing-font-size-small);
  line-height: var(--landing-line-height-small);
}

.landing-field__message--error {
  color: var(--landing-color-error);
}

/* Status primitive: text remains explicit in addition to color. */

.landing-status {
  padding: var(--landing-space-3);
  border: var(--landing-border-width) solid var(--landing-color-border-subtle);
  border-radius: var(--landing-radius-control);
  color: var(--landing-color-text-primary);
  font-size: var(--landing-font-size-small);
  line-height: var(--landing-line-height-small);
}

.landing-status--success {
  border-color: var(--landing-color-success);
  color: var(--landing-color-success);
}

.landing-status--info {
  border-color: var(--landing-color-information);
  color: var(--landing-color-information);
}

.landing-status--warning {
  border-color: var(--landing-color-warning);
  color: var(--landing-color-warning);
}

.landing-status--error {
  border-color: var(--landing-color-error);
  color: var(--landing-color-error);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --landing-motion-duration-hover: 0ms;
    --landing-motion-duration-press: 0ms;
    --landing-motion-duration-editorial: 0ms;
    --landing-motion-hover-translate-y: 0px;
  }

  .landing-button:hover:not(:disabled):not([aria-disabled="true"]),
  .landing-button:active:not(:disabled):not([aria-disabled="true"]) {
    transform: none;
  }
}