/* Kubinu bento-geospatial tokens, v1.0.0 (7 Oct 2026). Generated by hand from tokens.json; keep the two in step.
   Copy to platform/static/css/tokens.css. Fonts are self-hosted in platform/static/fonts/ (woff2).
   Theme switch: <html data-theme="kubinu"> (light, default) or <html data-theme="kubinu-dark">.
   No data-theme attribute = follow the system (no-JS case). daisyUI 5 variables are mapped at the end. */

@font-face { font-family: "Gabarito"; font-weight: 600; font-display: swap; src: url("../fonts/Gabarito-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Gabarito"; font-weight: 800; font-display: swap; src: url("../fonts/Gabarito-ExtraBold.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-display: swap; src: url("../fonts/IBMPlexSans-Regular.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-display: swap; src: url("../fonts/IBMPlexSans-Medium.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-display: swap; src: url("../fonts/IBMPlexSans-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-display: swap; src: url("../fonts/IBMPlexMono-Regular.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-display: swap; src: url("../fonts/IBMPlexMono-Medium.woff2") format("woff2"); }

/* ---------- theme-independent ---------- */
:root {
  --k-font-display: "Gabarito", Arial, sans-serif;
  --k-font-body: "IBM Plex Sans", Arial, sans-serif;
  --k-font-mono: "IBM Plex Mono", Consolas, ui-monospace, monospace;

  /* type scale: size / line-height, rem at 16px root */
  --k-display-l: 800 3.5625rem/4rem var(--k-font-display);
  --k-display-m: 800 2.8125rem/3.25rem var(--k-font-display);
  --k-display-s: 800 2.25rem/2.75rem var(--k-font-display);
  --k-headline-l: 800 2rem/2.5rem var(--k-font-display);
  --k-headline-m: 800 1.75rem/2.25rem var(--k-font-display);
  --k-headline-s: 600 1.5rem/2rem var(--k-font-display);
  --k-title-l: 600 1.375rem/1.75rem var(--k-font-display);
  --k-title-m: 600 1rem/1.5rem var(--k-font-body);
  --k-title-s: 600 0.875rem/1.25rem var(--k-font-body);
  --k-body-l: 400 1rem/1.5rem var(--k-font-body);
  --k-body-m: 400 0.875rem/1.25rem var(--k-font-body);
  --k-body-s: 400 0.75rem/1rem var(--k-font-body);
  --k-label-l: 500 0.875rem/1.25rem var(--k-font-body);
  --k-label-m: 500 0.75rem/1rem var(--k-font-mono);   /* uppercase, letter-spacing .08em */
  --k-label-s: 500 0.6875rem/1rem var(--k-font-mono); /* uppercase, letter-spacing .08em */
  --k-number-xl: 800 clamp(2.25rem, 1.5rem + 3vw, 3rem)/1.08 var(--k-font-display);
  --k-number-l: 800 2rem/2.25rem var(--k-font-display);
  --k-coord: 400 0.8125rem/1.125rem var(--k-font-mono);

  --k-space-1: 2px; --k-space-2: 4px; --k-space-3: 8px; --k-space-4: 12px; --k-space-5: 16px;
  --k-space-6: 20px; --k-space-7: 24px; --k-space-8: 32px; --k-space-9: 40px; --k-space-10: 48px; --k-space-11: 64px;

  --k-radius-xs: 4px; --k-radius-sm: 6px; --k-radius-md: 10px; --k-radius-lg: 14px; --k-radius-xl: 24px; --k-radius-full: 999px;
  --k-touch: 44px; --k-field-h: 48px; --k-top-bar: 64px; --k-rail: 80px;

  --k-ease-spatial: cubic-bezier(0.2, 0, 0, 1);
  --k-ease-effects: cubic-bezier(0.3, 0, 0, 1);
  --k-ease-exit: cubic-bezier(0.3, 0, 1, 1);
  --k-dur-spatial: 450ms; --k-dur-effects: 200ms; --k-dur-exit: 150ms;

  --k-glass-blur: 16px;
  --k-hero-bg: #1E1E24; --k-hero-fg: #EEEDE7;

  /* land cover and ramp: same hues in both themes */
  --k-lc-built-up: #E2553B; --k-lc-cropland: #D9B44A; --k-lc-grassland: #9DB86B; --k-lc-forest: #3E6B4F;
  --k-lc-water: #3F7FA6; --k-lc-bare: #B9B3A3; --k-lc-tree-crop: #6F8A3A;
  --k-ramp-1: #F3E3D6; --k-ramp-2: #EDB59E; --k-ramp-3: #E2553B; --k-ramp-4: #9E3A28; --k-ramp-5: #4A2620;
}
@supports (transition-timing-function: linear(0, 1)) {
  :root { --k-ease-spatial: linear(0, 0.2459 6.9%, 0.6521 15.8%, 0.8961 24.4%, 1.0189 33.4%, 1.0444 39.4%, 1.0389 48.2%, 1.0091 67.7%, 1); }
}
@media (prefers-reduced-motion: reduce) {
  :root { --k-ease-spatial: linear; --k-dur-spatial: 100ms; --k-dur-effects: 100ms; --k-dur-exit: 100ms; }
}

/* ---------- light (default) ---------- */
:root, [data-theme="kubinu"] {
  color-scheme: light;
  --k-bg: #EEEDE7; --k-surface: #F7F6F2; --k-surface-lowest: #FBFAF7; --k-surface-high: #E7E5DE; --k-surface-highest: #DFDCD3;
  --k-fg: #1E1E24; --k-fg-muted: #55545C; --k-fg-subtle: #62615B; --k-fg-disabled: #8F8C84;
  --k-outline: #7E7B73; --k-outline-variant: #D3D0C6;
  --k-primary: #1E1E24; --k-on-primary: #F7F6F2; --k-primary-container: #B9B3A3; --k-on-primary-container: #1E1E24;
  --k-secondary: #B33F27; --k-on-secondary: #FFFFFF; --k-secondary-container: #F3E3D6; --k-on-secondary-container: #4A2620;
  --k-accent: #E2553B; --k-on-accent: #121216;
  --k-tertiary: #3E6B4F; --k-on-tertiary: #FFFFFF; --k-tertiary-container: #D7E5D9; --k-on-tertiary-container: #173623;
  --k-link: #A83923; --k-focus: #E2553B;
  --k-error: #A1203A; --k-on-error: #FFFFFF; --k-error-container: #F9DCE0; --k-on-error-container: #5C0F1F;
  --k-success: #2E6B45; --k-on-success: #FFFFFF; --k-success-container: #D5EBDC; --k-on-success-container: #123A22;
  --k-warning: #80520A; --k-on-warning: #FFFFFF; --k-warning-container: #F3E2AE; --k-on-warning-container: #3F2A00;
  --k-info: #2F6690; --k-on-info: #FFFFFF; --k-info-container: #D6E6F2; --k-on-info-container: #0F3350;
  --k-inverse-surface: #1E1E24; --k-on-inverse-surface: #EEEDE7; --k-inverse-primary: #F08A73;
  --k-neutral-bg: #E7E5DE; --k-neutral-fg: #1E1E24;
  --k-scrim: rgb(30 30 36 / 0.5);
  --k-shadow-1: 0 1px 2px rgb(30 30 36 / 0.08);
  --k-shadow-2: 0 2px 6px rgb(30 30 36 / 0.10);
  --k-shadow-3: 0 6px 16px rgb(30 30 36 / 0.12);
  --k-shadow-4: 0 12px 28px rgb(30 30 36 / 0.16);
  --k-glass-tint: rgb(247 246 242 / 0.93); --k-glass-edge: rgb(255 255 255 / 0.55); --k-glass-hairline: #D3D0C6; --k-glass-saturate: 1.4;
  /* map */
  --k-map-bg: #EEEDE7; --k-map-boundary: #1E1E24; --k-map-boundary-halo: #EEEDE7; --k-map-aoi-assumed: #B33F27;
  --k-map-block-line: #B33F27; --k-map-block-fill: rgb(226 85 59 / 0.06); --k-map-block-selected: #E2553B;
  --k-map-road-casing: #1E1E24; --k-map-road-fill: #F7F6F2; --k-map-drain: #2F6690; --k-map-stream: #3F7FA6;
  --k-map-contour: rgb(122 92 62 / 0.45); --k-map-label: #1E1E24; --k-map-label-halo: #EEEDE7;
  --k-map-pillar-fill: #1E1E24; --k-map-pillar-stroke: #F7F6F2; --k-map-pillar-weak: #F7F6F2; --k-map-selection: #E2553B; --k-map-palm: #3E6B4F;
  --k-map-gnss: #E2553B; --k-lc-opacity: 0.55;
  /* charts */
  --k-chart-1: #1E1E24; --k-chart-2: #E2553B; --k-chart-3: #3E6B4F; --k-chart-4: #3F7FA6; --k-chart-5: #9E3A28; --k-chart-6: #7A6118;
  --k-chart-grid: #D3D0C6; --k-chart-axis: #55545C; --k-chart-axis-line: #7E7B73;
}

/* ---------- dark ---------- */
[data-theme="kubinu-dark"] {
  color-scheme: dark;
  --k-bg: #1E1E24; --k-surface: #27272E; --k-surface-lowest: #18181D; --k-surface-high: #303038; --k-surface-highest: #3A3A42;
  --k-fg: #EEEDE7; --k-fg-muted: #B4B2AA; --k-fg-subtle: #A8A69E; --k-fg-disabled: #6E6C66;
  --k-outline: #8C8A82; --k-outline-variant: #3A3A42;
  --k-primary: #EEEDE7; --k-on-primary: #1E1E24; --k-primary-container: #4A4840; --k-on-primary-container: #EEEDE7;
  --k-secondary: #F08A73; --k-on-secondary: #1E1E24; --k-secondary-container: #5A2A1E; --k-on-secondary-container: #F9D9CE;
  --k-accent: #E2553B; --k-on-accent: #121216;
  --k-tertiary: #8FC2A0; --k-on-tertiary: #10301D; --k-tertiary-container: #24402F; --k-on-tertiary-container: #CDE8D5;
  --k-link: #F08A73; --k-focus: #F08A73;
  --k-error: #FF8FA3; --k-on-error: #3A0713; --k-error-container: #5C1A28; --k-on-error-container: #FFD9DF;
  --k-success: #7FCB97; --k-on-success: #0E2F1A; --k-success-container: #1E4A2F; --k-on-success-container: #CDEFD7;
  --k-warning: #E8C15A; --k-on-warning: #2E2000; --k-warning-container: #4A3A10; --k-on-warning-container: #F6E7B8;
  --k-info: #8EC1E6; --k-on-info: #0B2A40; --k-info-container: #1C3F5A; --k-on-info-container: #D6E6F2;
  --k-inverse-surface: #EEEDE7; --k-on-inverse-surface: #1E1E24; --k-inverse-primary: #B33F27;
  --k-neutral-bg: #303038; --k-neutral-fg: #EEEDE7;
  --k-scrim: rgb(0 0 0 / 0.6);
  --k-shadow-1: 0 1px 2px rgb(0 0 0 / 0.40);
  --k-shadow-2: 0 2px 6px rgb(0 0 0 / 0.45);
  --k-shadow-3: 0 6px 16px rgb(0 0 0 / 0.50);
  --k-shadow-4: 0 12px 28px rgb(0 0 0 / 0.55);
  --k-glass-tint: rgb(39 39 46 / 0.93); --k-glass-edge: rgb(255 255 255 / 0.08); --k-glass-hairline: #3A3A42; --k-glass-saturate: 1.2;
  --k-map-bg: #1E1E24; --k-map-boundary: #EEEDE7; --k-map-boundary-halo: #1E1E24; --k-map-aoi-assumed: #F08A73;
  --k-map-block-line: #F08A73; --k-map-block-fill: rgb(226 85 59 / 0.10); --k-map-block-selected: #F08A73;
  --k-map-road-casing: #000000; --k-map-road-fill: #B9B3A3; --k-map-drain: #8EC1E6; --k-map-stream: #6FA8CC;
  --k-map-contour: rgb(237 181 158 / 0.40); --k-map-label: #EEEDE7; --k-map-label-halo: #1E1E24;
  --k-map-pillar-fill: #EEEDE7; --k-map-pillar-stroke: #1E1E24; --k-map-pillar-weak: #EEEDE7; --k-map-selection: #F08A73; --k-map-palm: #8FC2A0;
  --k-map-gnss: #F08A73; --k-lc-opacity: 0.6;
  --k-chart-1: #EEEDE7; --k-chart-2: #E2553B; --k-chart-3: #8FC2A0; --k-chart-4: #6FA8CC; --k-chart-5: #EDB59E; --k-chart-6: #D9B44A;
  --k-chart-grid: #3A3A42; --k-chart-axis: #B4B2AA; --k-chart-axis-line: #8C8A82;
}
/* no-JS: follow the system when no explicit theme is set. Keep in step with the block above. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --k-bg: #1E1E24; --k-surface: #27272E; --k-surface-lowest: #18181D; --k-surface-high: #303038; --k-surface-highest: #3A3A42;
    --k-fg: #EEEDE7; --k-fg-muted: #B4B2AA; --k-fg-subtle: #A8A69E; --k-fg-disabled: #6E6C66;
    --k-outline: #8C8A82; --k-outline-variant: #3A3A42;
    --k-primary: #EEEDE7; --k-on-primary: #1E1E24; --k-primary-container: #4A4840; --k-on-primary-container: #EEEDE7;
    --k-secondary: #F08A73; --k-on-secondary: #1E1E24; --k-secondary-container: #5A2A1E; --k-on-secondary-container: #F9D9CE;
    --k-accent: #E2553B; --k-on-accent: #121216;
    --k-tertiary: #8FC2A0; --k-on-tertiary: #10301D; --k-tertiary-container: #24402F; --k-on-tertiary-container: #CDE8D5;
    --k-link: #F08A73; --k-focus: #F08A73;
    --k-error: #FF8FA3; --k-on-error: #3A0713; --k-error-container: #5C1A28; --k-on-error-container: #FFD9DF;
    --k-success: #7FCB97; --k-on-success: #0E2F1A; --k-success-container: #1E4A2F; --k-on-success-container: #CDEFD7;
    --k-warning: #E8C15A; --k-on-warning: #2E2000; --k-warning-container: #4A3A10; --k-on-warning-container: #F6E7B8;
    --k-info: #8EC1E6; --k-on-info: #0B2A40; --k-info-container: #1C3F5A; --k-on-info-container: #D6E6F2;
    --k-inverse-surface: #EEEDE7; --k-on-inverse-surface: #1E1E24; --k-inverse-primary: #B33F27;
    --k-neutral-bg: #303038; --k-neutral-fg: #EEEDE7;
    --k-scrim: rgb(0 0 0 / 0.6);
    --k-shadow-1: 0 1px 2px rgb(0 0 0 / 0.40);
    --k-shadow-2: 0 2px 6px rgb(0 0 0 / 0.45);
    --k-shadow-3: 0 6px 16px rgb(0 0 0 / 0.50);
    --k-shadow-4: 0 12px 28px rgb(0 0 0 / 0.55);
    --k-glass-tint: rgb(39 39 46 / 0.93); --k-glass-edge: rgb(255 255 255 / 0.08); --k-glass-hairline: #3A3A42; --k-glass-saturate: 1.2;
    --k-map-bg: #1E1E24; --k-map-boundary: #EEEDE7; --k-map-boundary-halo: #1E1E24; --k-map-aoi-assumed: #F08A73;
    --k-map-block-line: #F08A73; --k-map-block-fill: rgb(226 85 59 / 0.10); --k-map-block-selected: #F08A73;
    --k-map-road-casing: #000000; --k-map-road-fill: #B9B3A3; --k-map-drain: #8EC1E6; --k-map-stream: #6FA8CC;
    --k-map-contour: rgb(237 181 158 / 0.40); --k-map-label: #EEEDE7; --k-map-label-halo: #1E1E24;
    --k-map-pillar-fill: #EEEDE7; --k-map-pillar-stroke: #1E1E24; --k-map-pillar-weak: #EEEDE7; --k-map-selection: #F08A73; --k-map-palm: #8FC2A0;
    --k-map-gnss: #F08A73; --k-lc-opacity: 0.6;
    --k-chart-1: #EEEDE7; --k-chart-2: #E2553B; --k-chart-3: #8FC2A0; --k-chart-4: #6FA8CC; --k-chart-5: #EDB59E; --k-chart-6: #D9B44A;
    --k-chart-grid: #3A3A42; --k-chart-axis: #B4B2AA; --k-chart-axis-line: #8C8A82;
  }
}

/* ---------- daisyUI 5 theme mapping (themes "kubinu" and "kubinu-dark") ---------- */
:root, [data-theme="kubinu"], [data-theme="kubinu-dark"] {
  --color-base-100: var(--k-surface);
  --color-base-200: var(--k-bg);          /* page background */
  --color-base-300: var(--k-surface-highest);
  --color-base-content: var(--k-fg);
  --color-primary: var(--k-primary);   --color-primary-content: var(--k-on-primary);
  --color-secondary: var(--k-secondary); --color-secondary-content: var(--k-on-secondary);
  --color-accent: var(--k-accent);     --color-accent-content: var(--k-on-accent); /* accent: never behind body-size text */
  --color-neutral: var(--k-inverse-surface); --color-neutral-content: var(--k-on-inverse-surface);
  --color-info: var(--k-info);         --color-info-content: var(--k-on-info);
  --color-success: var(--k-success);   --color-success-content: var(--k-on-success);
  --color-warning: var(--k-warning);   --color-warning-content: var(--k-on-warning);
  --color-error: var(--k-error);       --color-error-content: var(--k-on-error);
  --radius-selector: var(--k-radius-full); --radius-field: var(--k-radius-sm); --radius-box: var(--k-radius-lg);
  --size-selector: 0.25rem; --size-field: 0.25rem; --border: 1px; --depth: 0; --noise: 0;
}

/* ---------- recipes every surface uses ---------- */
html { background: var(--k-bg); color: var(--k-fg); font: var(--k-body-l); }
:focus-visible { outline: 2px solid var(--k-focus); outline-offset: 2px; }
.k-tile { background: var(--k-surface); color: var(--k-fg); border: 1px solid var(--k-outline-variant); border-radius: var(--k-radius-lg); }
.k-tile--lifted { background: var(--k-accent); color: var(--k-on-accent); border-color: transparent; } /* one per view, large text only */
.k-tile--inverse { background: var(--k-inverse-surface); color: var(--k-on-inverse-surface); border-color: transparent; }
.k-glass {
  background: var(--k-surface); color: var(--k-fg);              /* solid fallback first */
  border: 1px solid var(--k-glass-hairline); border-radius: var(--k-radius-xl);
  box-shadow: var(--k-shadow-3), inset 0 1px 0 var(--k-glass-edge);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .k-glass {
    background: var(--k-glass-tint);
    -webkit-backdrop-filter: blur(var(--k-glass-blur)) saturate(var(--k-glass-saturate));
    backdrop-filter: blur(var(--k-glass-blur)) saturate(var(--k-glass-saturate));
  }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more), (forced-colors: active) {
  .k-glass { background: var(--k-surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.k-label { font: var(--k-label-m); text-transform: uppercase; letter-spacing: 0.08em; color: var(--k-fg-muted); }
.k-num { font: var(--k-number-l); font-variant-numeric: tabular-nums; }
.k-coord { font: var(--k-coord); font-variant-numeric: tabular-nums; }
@media print {
  :root, [data-theme] { color-scheme: light; --k-bg: #FFFFFF; --k-surface: #FFFFFF; --k-fg: #1E1E24; }
  .k-glass { background: #FFFFFF; backdrop-filter: none; box-shadow: none; }
}