/* Open Land Fabric — Technical Signal system v1.0.
   System default: Survey Paper daylight product shell with map-agnostic overlays. */
:root {
  /* Primary surfaces */
  --olf-paper: #F6F3EA;
  --olf-paper-raised: #FFFEFA;
  --olf-paper-muted: #ECE7DB;
  --olf-line: #C8C1B3;
  --olf-line-strong: #8795A8;
  --olf-ink: #102033;
  --olf-ink-secondary: #334B68;
  --olf-ink-muted: #647388;

  /* Technical Signal brand */
  --olf-cobalt: #155FC0;
  --olf-cobalt-hover: #104A99;
  --olf-cobalt-soft: #E8F0FC;
  --olf-signal-orange: #FF5A1F;
  --olf-signal-orange-dark: #C94516;
  --olf-signal-orange-soft: #FFF0E9;
  --olf-lime: #B8E94B;
  --olf-lime-ink: #2C4800;

  /* Evidence semantics: paired with text and icon, never colour alone */
  --olf-official: #155FC0;
  --olf-derived: #5C4BC8;
  --olf-modelled: #8A4FC7;
  --olf-verify: #996000;
  --olf-limited: #C94516;
  --olf-not-checked: #647388;
  --olf-success: #227A53;

  /* Map overlay layer only. Never use to style map-provider tiles/canvas. */
  --olf-map-overlay-bg: #FFFFFF;
  --olf-map-overlay-border: #C8C1B3;
  --olf-map-overlay-text: #102033;
  --olf-map-selected-stroke: #FF5A1F;
  --olf-map-selected-fill: rgb(255 90 31 / 0.08);
  --olf-map-portal-primary: #155FC0;
  --olf-map-portal-accent: #FF5A1F;

  /* Type */
  --olf-font-sans: "Instrument Sans", "Aptos", ui-sans-serif, system-ui, sans-serif;
  --olf-font-mono: "IBM Plex Mono", "SFMono-Regular", ui-monospace, monospace;
  --olf-text-xs: 0.75rem;
  --olf-text-sm: 0.875rem;
  --olf-text-base: 1rem;
  --olf-text-lg: 1.125rem;
  --olf-text-xl: 1.375rem;
  --olf-text-2xl: 1.875rem;
  --olf-text-3xl: clamp(2.5rem, 5vw, 4.75rem);
  --olf-leading-tight: 1.02;
  --olf-leading-body: 1.55;

  /* Layout and interaction */
  --olf-space-1: 0.25rem;
  --olf-space-2: 0.5rem;
  --olf-space-3: 0.75rem;
  --olf-space-4: 1rem;
  --olf-space-5: 1.25rem;
  --olf-space-6: 1.5rem;
  --olf-space-8: 2rem;
  --olf-space-10: 2.5rem;
  --olf-space-12: 3rem;
  --olf-space-16: 4rem;
  --olf-space-24: 6rem;
  --olf-radius-control: 0.25rem;
  --olf-radius-panel: 0.5rem;
  --olf-radius-sheet: 1.25rem 1.25rem 0 0;
  --olf-shadow-float: 0 8px 28px rgb(16 32 51 / 0.18), 0 1px 2px rgb(16 32 51 / 0.08);
  --olf-shadow-map-overlay: 0 6px 20px rgb(16 32 51 / 0.22);
  --olf-focus: #155FC0;
  --olf-duration-fast: 120ms;
  --olf-duration: 180ms;
  --olf-ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* Mobile touch and safe areas */
  --olf-touch-target: 44px;
  --olf-touch-target-lg: 48px;
  --olf-safe-top: env(safe-area-inset-top, 0px);
  --olf-safe-right: env(safe-area-inset-right, 0px);
  --olf-safe-bottom: env(safe-area-inset-bottom, 0px);
  --olf-safe-left: env(safe-area-inset-left, 0px);
}

.olf-focusable:focus-visible { outline: 3px solid var(--olf-focus); outline-offset: 3px; }
.olf-button-primary { min-height: var(--olf-touch-target); padding: .75rem 1rem; background: var(--olf-cobalt); border: 1px solid var(--olf-cobalt); border-radius: var(--olf-radius-control); color: #FFFFFF; font: 700 var(--olf-text-sm)/1 var(--olf-font-sans); }
.olf-button-primary:hover { background: var(--olf-cobalt-hover); }
.olf-button-secondary { min-height: var(--olf-touch-target); padding: .75rem 1rem; background: var(--olf-paper-raised); border: 1px solid var(--olf-cobalt); border-radius: var(--olf-radius-control); color: var(--olf-cobalt); font: 700 var(--olf-text-sm)/1 var(--olf-font-sans); }
.olf-panel { background: var(--olf-paper-raised); border: 1px solid var(--olf-line); border-radius: var(--olf-radius-panel); color: var(--olf-ink); }
.olf-map-overlay { background: var(--olf-map-overlay-bg); border: 1px solid var(--olf-map-overlay-border); box-shadow: var(--olf-shadow-map-overlay); color: var(--olf-map-overlay-text); }
.olf-metadata { color: var(--olf-ink-secondary); font: 500 var(--olf-text-xs)/1.4 var(--olf-font-mono); letter-spacing: .04em; text-transform: uppercase; }

/* Mobile Utilities */
.olf-scroll-fade-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  mask-image: linear-gradient(to right, black calc(100% - 24px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, black calc(100% - 24px), transparent 100%);
}
.olf-scroll-fade-x::-webkit-scrollbar { display: none; }
.olf-safe-pb { padding-bottom: max(16px, var(--olf-safe-bottom)); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}