/*
 * Copied verbatim from @planetra/ui (PLANETRA V0.2/packages/ui/src/styles/tokens.css,
 * commit 7a40adc). Do not edit here: change the Planetra package and re-copy.
 * GeoKL Explorer consumes only the semantic --pl-* tier. MapLibre cannot read CSS
 * variables, so map styles take the same hexes from the PL palette in index.html.
 */
/*
 * Planetra design tokens — P0-WEB-02.
 *
 * This file owns every design value in the product. Nothing else declares a
 * colour, radius, duration or shell dimension. `theme.css` next door only
 * aliases these into Tailwind's namespaces; it holds no values of its own.
 *
 * Two tiers:
 *   --pl-c-*   primitives. Raw ramps. Never referenced by a component.
 *   --pl-*     semantic. What components and Tailwind utilities consume.
 *
 * The split is what makes the light map surfaces work (see `.pl-on-map` at the
 * bottom): a scoped rule re-points the semantic tier at a different slice of
 * the primitives, and every utility inside that subtree follows without a prop,
 * a context, or a line of JavaScript.
 *
 * The theme is dark, single, and deliberate. There is no light counterpart and
 * no prefers-color-scheme branch: the landing site (P0-LAND-01) prerenders to
 * static HTML, and a two-theme system needs a blocking inline script to avoid a
 * flash of the wrong one — which costs exactly the LCP budget NFR-1 allows.
 *
 * The palette is the Brand DNA's (§9, PLANETRA-Brand-DNA.md v1.0, P1-MVP-03):
 * charcoal and off-white carry the structure, mint is the recognition colour
 * and the one accent, teal and forest support it, and pink and peach are kept
 * for change — never for chrome. Its seven hexes are declared once below as
 * primitives, verbatim, and tokens.test.ts holds them to the Brand DNA.
 */

:root {
  /* ---------------------------------------------------------------- *
   * Primitives
   * ---------------------------------------------------------------- */

  /* Brand DNA §9, verbatim. The working digital specification; print values
     and accessible text pairs are production checks still to come. */
  --pl-c-charcoal: #111d26;
  --pl-c-forest: #173e35;
  --pl-c-teal: #247d70;
  --pl-c-mint: #adf0b1;
  --pl-c-pink: #f28db8;
  --pl-c-peach: #f3c18d;
  --pl-c-off-white: #f2f3eb;

  /* Charcoal, stepped for surfaces. The Brand DNA gives one charcoal; a UI
     needs layers, so these are that hue a step either side of it. Cards and
     panels are built on it; the canvas behind them is graphite (below). */
  --pl-c-charcoal-950: #0c151c;
  --pl-c-charcoal-900: var(--pl-c-charcoal);
  --pl-c-charcoal-850: #16252f;
  --pl-c-charcoal-800: #1c2d38;
  --pl-c-charcoal-700: #283b47;
  --pl-c-charcoal-600: #385060;
  --pl-c-charcoal-400: #7d8c93;
  --pl-c-charcoal-300: #aeb8b8;

  /* Graphite: a neutral dark grey for the app shell (top bar, nav rail, the
     canvas behind everything). The floating cards and panels keep the brand
     charcoal, so the two read as layers — a darker, neutral frame around
     blue-slate surfaces. Not a Brand DNA hex; a structural neutral beside it. */
  --pl-c-graphite: #1b1d20;

  /* Mint, stepped for interaction states. */
  --pl-c-mint-200: #c6f6c8;
  --pl-c-mint-400: #93e29a;

  /* Signal colours. Shared with dashboard.html so the delivery dashboard and
     the product never disagree about what "blocked" looks like. Not in the
     Brand DNA, which gives no status colours; kept distinct from mint so
     "succeeded" never reads as "selected". */
  --pl-c-blue-400: #5b9bff;
  --pl-c-green-400: #34d399;
  --pl-c-orange-400: #ff8a4c;
  --pl-c-red-400: #ff5a4c;

  /* Map chrome. Dark, as the Brand DNA's workspace concept draws it: charcoal
     panels over the imagery, so the map is the brightest thing on screen.
     Slightly translucent, for components that opt into a backdrop blur. */
  --pl-c-map-panel: rgb(17 29 38 / 0.94);
  --pl-c-map-panel-raised: rgb(28 45 56 / 0.96);
  /* Dark ink for text on a light swatch (the land-cover -contrast pairs). */
  --pl-c-ink-on-light: var(--pl-c-charcoal);
  --pl-c-white: #ffffff;

  /* ---------------------------------------------------------------- *
   * Semantic — surface
   * ---------------------------------------------------------------- */
  --pl-surface-canvas: var(--pl-c-graphite);
  --pl-surface: var(--pl-c-charcoal-850);
  --pl-surface-raised: var(--pl-c-charcoal-800);
  --pl-surface-sunken: var(--pl-c-charcoal-950);
  /* The glassy translucent card in Login.png. Needs a backdrop-filter to read
     correctly, which components opt into. */
  --pl-surface-overlay: rgb(17 29 38 / 0.78);
  --pl-surface-map: var(--pl-c-map-panel);
  --pl-surface-map-raised: var(--pl-c-map-panel-raised);

  /* ---------------------------------------------------------------- *
   * Semantic — text
   * ---------------------------------------------------------------- */
  --pl-text: var(--pl-c-off-white);
  --pl-text-muted: var(--pl-c-charcoal-300);
  --pl-text-subtle: var(--pl-c-charcoal-400);
  /* Charcoal on mint: the Brand DNA's own pairing, and 12:1. */
  --pl-text-on-accent: var(--pl-c-charcoal);
  --pl-text-on-map: var(--pl-c-off-white);
  --pl-text-on-map-muted: var(--pl-c-charcoal-300);

  /* ---------------------------------------------------------------- *
   * Semantic — border
   * ---------------------------------------------------------------- */
  --pl-border: var(--pl-c-charcoal-700);
  /* The 1px outline on the login card and project tiles. Alpha, not a solid,
     so it holds up over both the canvas and a photographic thumbnail. */
  --pl-border-hairline: rgb(242 243 235 / 0.08);
  --pl-border-strong: var(--pl-c-charcoal-600);
  --pl-border-on-map: rgb(242 243 235 / 0.12);

  /* ---------------------------------------------------------------- *
   * Semantic — accent
   * ---------------------------------------------------------------- */
  /* Mint: logo, selected controls and key highlights (Brand DNA §9). The only
     accent — teal supports, it does not compete. */
  --pl-accent: var(--pl-c-mint);
  --pl-accent-hover: var(--pl-c-mint-200);
  --pl-accent-active: var(--pl-c-mint-400);
  /* Forest: the selected row, the active nav item — mint's quiet ground. */
  --pl-accent-soft: var(--pl-c-forest);
  --pl-accent-fg: var(--pl-c-charcoal);
  --pl-support: var(--pl-c-teal);

  /* ---------------------------------------------------------------- *
   * Semantic — status
   * ---------------------------------------------------------------- */
  --pl-status-info: var(--pl-c-blue-400);
  --pl-status-info-soft: color-mix(in srgb, var(--pl-c-blue-400) 14%, transparent);
  --pl-status-success: var(--pl-c-green-400);
  --pl-status-success-soft: color-mix(in srgb, var(--pl-c-green-400) 14%, transparent);
  --pl-status-warning: var(--pl-c-orange-400);
  --pl-status-warning-soft: color-mix(in srgb, var(--pl-c-orange-400) 14%, transparent);
  --pl-status-danger: var(--pl-c-red-400);
  --pl-status-danger-soft: color-mix(in srgb, var(--pl-c-red-400) 14%, transparent);

  /* ---------------------------------------------------------------- *
   * Semantic — severity (PRD §12.3, the land-cover ⇄ land-use crosswalk)
   *
   * Deliberately distinct from status: a HIGH-severity compliance finding is
   * not an application error, and conflating the two ramps would make
   * "built structure on gazetted open space" look like a failed request.
   * ---------------------------------------------------------------- */
  --pl-severity-high: #ff5a4c;
  --pl-severity-high-soft: color-mix(in srgb, #ff5a4c 14%, transparent);
  --pl-severity-medium: #ff8a4c;
  --pl-severity-medium-soft: color-mix(in srgb, #ff8a4c 14%, transparent);
  --pl-severity-low: #e0c04c;
  --pl-severity-low-soft: color-mix(in srgb, #e0c04c 14%, transparent);

  /* ---------------------------------------------------------------- *
   * Semantic — change (Brand DNA §9)
   *
   * Existing, new and modified features between two surveys. The Brand DNA's
   * own assignment, and never used for anything else, so a peach patch on a
   * map always means "new". Removed is drawn as a hatch, not a colour — the
   * Brand DNA asks that no difference rely on colour alone.
   * ---------------------------------------------------------------- */
  --pl-change-existing: var(--pl-c-mint);
  --pl-change-new: var(--pl-c-peach);
  --pl-change-modified: var(--pl-c-pink);

  /* ---------------------------------------------------------------- *
   * Semantic — land cover (PRD §12.1)
   *
   * These eight hexes are not a palette choice. They are the exact colours in
   * the pilot classification raster, so a legend swatch and the pixel it
   * describes must match bit for bit. Do not adjust them for contrast or
   * harmony — adjust the foreground instead, which is what the -contrast pair
   * is for. Three of the eight (Jalan Raya #FFFFFF, Rumput #00FF24, Tanah
   * Kosong #800000) cannot carry the default text colour at WCAG AA.
   * ---------------------------------------------------------------- */
  --pl-lc-pokok: #226126;
  --pl-lc-pokok-contrast: var(--pl-c-white);
  --pl-lc-rumput: #00ff24;
  --pl-lc-rumput-contrast: var(--pl-c-ink-on-light);
  --pl-lc-turapan: #949494;
  --pl-lc-turapan-contrast: var(--pl-c-ink-on-light);
  --pl-lc-bangunan: #de1f07;
  --pl-lc-bangunan-contrast: var(--pl-c-white);
  --pl-lc-jalan: #ffffff;
  --pl-lc-jalan-contrast: var(--pl-c-ink-on-light);
  --pl-lc-pertanian: #4bb549;
  --pl-lc-pertanian-contrast: var(--pl-c-ink-on-light);
  --pl-lc-tanah-kosong: #800000;
  --pl-lc-tanah-kosong-contrast: var(--pl-c-white);
  --pl-lc-air: #0045ff;
  --pl-lc-air-contrast: var(--pl-c-white);

  /* ---------------------------------------------------------------- *
   * Radius
   * ---------------------------------------------------------------- */
  --pl-radius-xs: 4px;
  --pl-radius-sm: 6px;
  --pl-radius-md: 10px; /* buttons and inputs */
  --pl-radius-lg: 14px; /* cards and panels */
  --pl-radius-xl: 20px; /* the login card */
  --pl-radius-full: 999px;

  /* ---------------------------------------------------------------- *
   * Shell dimensions (PRD §9.3)
   *
   * Fixed rather than fluid because the map canvas is the flexible element;
   * a rail that resizes with the viewport reflows the map on every drag.
   * ---------------------------------------------------------------- */
  --pl-rail-width: 260px;
  --pl-panel-width: 360px;
  --pl-runs-dock-height: 44px;
  --pl-header-height: 56px;
  --pl-space-panel: 16px;
  --pl-space-gutter: 24px;

  /* ---------------------------------------------------------------- *
   * Type (P1-MVP-04)
   *
   * Geologica for everything read, DM Mono for coordinates, areas and ids —
   * the task's choice, and the Brand DNA's ask: a clean, highly readable sans
   * for headings, body, reports and labels (§8). The wordmark is not set in
   * either; it is the Brand DNA's own artwork, drawn as SVG by <Logo>.
   *
   * The system stack stays behind each face, and both faces load with
   * `font-display: swap` (theme.css), so first paint never waits on a font.
   * ---------------------------------------------------------------- */
  --pl-font-sans:
    'Geologica Variable', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', sans-serif;
  --pl-font-mono: 'DM Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  --pl-tracking-tight: -0.01em;
  --pl-tracking-wordmark: 0.18em;
  --pl-tracking-micro: 0.08em;

  /* ---------------------------------------------------------------- *
   * Focus
   * ---------------------------------------------------------------- */
  --pl-focus-ring: var(--pl-accent-hover);
  --pl-focus-ring-width: 2px;
  --pl-focus-ring-offset: 1px;
  --pl-focus-ring-on-map: var(--pl-c-mint);

  /* ---------------------------------------------------------------- *
   * Elevation
   * ---------------------------------------------------------------- */
  --pl-shadow-panel: 0 1px 2px rgb(0 0 0 / 0.4), 0 8px 24px rgb(0 0 0 / 0.35);
  --pl-shadow-overlay: 0 8px 40px rgb(0 0 0 / 0.55);

  /* ---------------------------------------------------------------- *
   * Motion
   * ---------------------------------------------------------------- */
  --pl-duration-fast: 120ms;
  --pl-duration: 200ms;
  --pl-ease: cubic-bezier(0.2, 0, 0, 1);

  /* ---------------------------------------------------------------- *
   * Stacking
   *
   * Named because the map canvas, floating panels and Radix portals all
   * compete, and a scattering of z-index: 9999 is how that argument is lost.
   * ---------------------------------------------------------------- */
  --pl-z-map: 0;
  --pl-z-panel: 10;
  --pl-z-overlay: 40;
  --pl-z-toast: 60;
}

/*
 * Chrome floating over the map (P1-MVP-03: dark, per the Brand DNA's workspace
 * concept).
 *
 * This re-points the semantic tier only. Every `bg-surface` / `text-fg` /
 * `border-line` utility inside the subtree follows, including inside Button,
 * Badge and anything else that consumes semantic tokens — one class, no props
 * threaded down, no context read. The chrome is dark like the rest of the
 * product now; what the scope still changes is translucency and shadow, which
 * a panel over photography needs and one on the canvas does not.
 *
 * Radix renders Dialog, Tooltip and Select content into a portal at
 * document.body, which is outside this subtree. Those components therefore
 * take a `portalClassName` so a map-context overlay can re-apply it.
 */
.pl-on-map {
  --pl-surface: var(--pl-surface-map);
  --pl-surface-raised: var(--pl-surface-map-raised);
  --pl-surface-sunken: var(--pl-c-charcoal-950);
  --pl-text: var(--pl-text-on-map);
  --pl-text-muted: var(--pl-text-on-map-muted);
  --pl-text-subtle: var(--pl-text-on-map-muted);
  --pl-border: var(--pl-border-on-map);
  --pl-border-hairline: rgb(242 243 235 / 0.08);
  --pl-border-strong: var(--pl-c-charcoal-600);
  --pl-focus-ring: var(--pl-focus-ring-on-map);
  --pl-shadow-panel: 0 1px 2px rgb(0 0 0 / 0.35), 0 10px 28px rgb(0 0 0 / 0.4);
  color-scheme: dark;
}