/* LiquiTer NX — Design Tokens (GeoStru NX Design System)
   Source of truth: Liquefaction/Liquiter-design/tokens.css
   Backwards-compatibility: every NX token is also exposed under the legacy
   `--lq-*` namespace so that redesign.css and site.css keep working unchanged. */

:root {
    /* ───────── Type ─────────
       Inter for UI, JetBrains Mono for numbers/symbols.
       Greek/math symbols are rendered via .gr (serif italic, ISO 80000). */
    --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    --font-greek: "STIX Two Math", "Cambria Math", "Latin Modern Math", "Times New Roman", "Liberation Serif", serif;

    /* ───────── Warm neutral palette (GeoStru) ───────── */
    --bg:          #fafaf8;
    --bg-elev:     #ffffff;
    --bg-sunken:   #f3f3f0;
    --bg-hover:    #efefea;

    --border:        #e6e5e0;
    --border-strong: #d4d3cc;
    --border-subtle: #efefea;

    --text:           #1a1a1a;
    --text-secondary: #545454;
    --text-tertiary:  #858380;
    --text-disabled:  #b5b3ae;

    /* ───────── Brand accent — LiquiTer violet ─────────
       LiquiTer family (math/lab) is violet per NX domain tags. */
    --accent:         #6e56cf;
    --accent-hover:   #5e48b8;
    --accent-active:  #4a3a96;
    --accent-soft:    #ece9f9;
    --accent-softer:  #f4f2fc;
    --accent-fg:      #ffffff;
    --accent-text:    #4a3a96;

    /* ───────── AI — distinct violet (sparkle treatment) ───────── */
    --ai:        #6e56cf;
    --ai-soft:   #ece9f9;
    --ai-text:   #4a3a96;

    /* ───────── Credits — warm amber, geological ───────── */
    --credits:      #b8730a;
    --credits-soft: #fcefd2;
    --credits-fg:   #6e4509;

    /* ───────── Semantic (sober, no neon) ───────── */
    --success:      #197a3e;
    --success-soft: #d8efdf;
    --warning:      #b8730a;
    --warning-soft: #fcefd2;
    --danger:       #b42318;
    --danger-soft:  #fbe1de;
    --info:         #0b5db8;
    --info-soft:    #dde9f7;

    /* ───────── Survey / domain tags ───────── */
    --tag-spt: #b8730a;
    --tag-cpt: #197a3e;
    --tag-lab: #6e56cf;
    --tag-geo: #0b5db8;
    --tag-rel: #1e3a5f;

    /* ───────── Map (kept warm-neutral) ───────── */
    --map-bg: #eeece5;
    --map-land: #f5f3eb;
    --map-water: #d8e3e8;
    --map-road: #ffffff;
    --map-road-major: #f0d99a;
    --map-contour: #d8d6cc;

    /* ───────── Radii (technical, sharper) ───────── */
    --r-xs: 2px;
    --r-sm: 4px;
    --r-md: 6px;
    --r-lg: 8px;
    --r-xl: 12px;

    /* ───────── Shadow (sober) ───────── */
    --shadow-xs: 0 1px 1px rgba(20, 20, 18, 0.04);
    --shadow-sm: 0 1px 2px rgba(20, 20, 18, 0.06), 0 1px 1px rgba(20, 20, 18, 0.04);
    --shadow-md: 0 2px 8px rgba(20, 20, 18, 0.06), 0 1px 2px rgba(20, 20, 18, 0.04);
    --shadow-lg: 0 8px 24px rgba(20, 20, 18, 0.10), 0 2px 4px rgba(20, 20, 18, 0.04);
    --shadow-popover: 0 8px 28px -4px rgba(20, 20, 18, 0.18), 0 4px 12px -4px rgba(20, 20, 18, 0.10);

    /* ───────── Layout ───────── */
    --header-h: 52px;
    --sidebar-w: 280px;
    --sidebar-collapsed-w: 44px;

    /* ═══════════════════════════════════════════════════════════════════
       Backwards-compatibility alias — LiquiTer legacy `--lq-*` namespace.
       All existing CSS using --lq-* keeps working unchanged.
       ═══════════════════════════════════════════════════════════════════ */
    --lq-font-sans: var(--font-sans);
    --lq-font-mono: var(--font-mono);

    --lq-bg:          var(--bg);
    --lq-bg-elev:     var(--bg-elev);
    --lq-bg-sunken:   var(--bg-sunken);
    --lq-bg-hover:    var(--bg-hover);

    --lq-border:        var(--border);
    --lq-border-strong: var(--border-strong);
    --lq-border-subtle: var(--border-subtle);

    --lq-text:           var(--text);
    --lq-text-secondary: var(--text-secondary);
    --lq-text-tertiary:  var(--text-tertiary);
    --lq-text-disabled:  var(--text-disabled);

    --lq-accent:        var(--accent);
    --lq-accent-hover:  var(--accent-hover);
    --lq-accent-active: var(--accent-active);
    --lq-accent-soft:   var(--accent-soft);
    --lq-accent-softer: var(--accent-softer);
    --lq-accent-fg:     var(--accent-fg);
    --lq-accent-text:   var(--accent-text);

    --lq-credits:      var(--credits);
    --lq-credits-soft: var(--credits-soft);
    --lq-credits-fg:   var(--credits-fg);

    --lq-success:      var(--success);
    --lq-success-soft: var(--success-soft);
    --lq-warning:      var(--warning);
    --lq-warning-soft: var(--warning-soft);
    --lq-danger:       var(--danger);
    --lq-danger-soft:  var(--danger-soft);
    --lq-info:         var(--info);
    --lq-info-soft:    var(--info-soft);

    --lq-r-xs: var(--r-xs);
    --lq-r-sm: var(--r-sm);
    --lq-r-md: var(--r-md);
    --lq-r-lg: var(--r-lg);
    --lq-r-xl: var(--r-xl);

    --lq-shadow-xs:      var(--shadow-xs);
    --lq-shadow-sm:      var(--shadow-sm);
    --lq-shadow-md:      var(--shadow-md);
    --lq-shadow-lg:      var(--shadow-lg);
    --lq-shadow-popover: var(--shadow-popover);

    --lq-header-h: var(--header-h);
}

/* ═══════════════════════════════════════════════════════════════════════
   Dark theme — opt in via <html data-theme="dark"> or <body data-theme="dark">
   ═══════════════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
    --bg:        #15161a;
    --bg-elev:   #1c1d22;
    --bg-sunken: #101115;
    --bg-hover:  #24262c;

    --border:        #2a2c33;
    --border-strong: #3a3d45;
    --border-subtle: #20222a;

    --text:           #ededee;
    --text-secondary: #a8a8af;
    --text-tertiary:  #74747c;
    --text-disabled:  #4a4a52;

    --accent:        #9d85eb;
    --accent-hover:  #b29bf0;
    --accent-active: #c5b3f5;
    --accent-soft:   #251f3a;
    --accent-softer: #1a162a;
    --accent-fg:     #15100a;
    --accent-text:   #b6a4f0;

    --ai:        #9d85eb;
    --ai-soft:   #251f3a;
    --ai-text:   #b6a4f0;

    --credits:      #e8a843;
    --credits-soft: #2e2410;
    --credits-fg:   #f0c179;

    --success:      #34c264;
    --success-soft: #0d2818;
    --warning:      #e8a843;
    --warning-soft: #2e2410;
    --danger:       #ea584b;
    --danger-soft:  #2c1614;
    --info:         #4a9fe7;
    --info-soft:    #0e2238;

    --tag-spt: #e8a843;
    --tag-cpt: #34c264;
    --tag-lab: #9d85eb;
    --tag-geo: #4a9fe7;
    --tag-rel: #5b8dc9;

    --map-bg: #0e1014;
    --map-land: #16191f;
    --map-water: #0a1820;
    --map-road: #2a2e36;
    --map-road-major: #3a3a2a;
    --map-contour: #1f2026;

    --shadow-xs: 0 1px 1px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5), 0 1px 1px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6), 0 2px 4px rgba(0, 0, 0, 0.4);
    --shadow-popover: 0 8px 28px -4px rgba(0, 0, 0, 0.6), 0 4px 12px -4px rgba(0, 0, 0, 0.4);
}

/* ═══════════════════════════════════════════════════════════════════════
   Greek / math symbols
   Inter has poor Greek glyphs (γ collapses to Latin y); render Greek and
   common math symbols via .gr in a serif-italic stack per ISO 80000.
   ═══════════════════════════════════════════════════════════════════════ */
.gr {
    font-family: var(--font-greek);
    font-style: italic;
    font-feature-settings: normal;
    /* Slightly larger so the serif italic visually balances Inter */
    font-size: 1.05em;
    letter-spacing: 0;
}
.gr-up {
    font-family: var(--font-greek);
    font-style: normal;
    font-feature-settings: normal;
    font-size: 1.05em;
}

/* ═══════════════════════════════════════════════════════════════════════
   Utility helpers
   ═══════════════════════════════════════════════════════════════════════ */
.lq-mono { font-family: var(--font-mono); font-feature-settings: "tnum", "zero"; }
.lq-tnum { font-variant-numeric: tabular-nums; }

.gdb-mono { font-family: var(--font-mono); font-feature-settings: "tnum", "zero", "ss01"; }
.gdb-tnum { font-variant-numeric: tabular-nums; }

/* Minimal technical scrollbar */
.gdb-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.gdb-scroll::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 5px; border: 2px solid transparent; background-clip: content-box; }
.gdb-scroll::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); background-clip: content-box; border: 2px solid transparent; }
.gdb-scroll::-webkit-scrollbar-track { background: transparent; }