/* ================================================================
   GeoStru NX — Design System Tokens
   Aesthetic: Tecnico-neutro, workstation moderna
   Audience: Geologi, ingegneri, architetti (50+, tecnici)
   ================================================================ */

:root {
  /* ───────── Type ───────── */
  --gs-font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --gs-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --gs-font-feature: "ss01", "cv11", "cv02";          /* alt 'a', alt '1' */
  --gs-font-feature-tnum: "tnum", "zero", "ss01";

  /* Type scale */
  --gs-fs-2xs: 11px;      /* status bar, captions */
  --gs-fs-xs:  12px;      /* labels secondary */
  --gs-fs-sm:  13px;      /* default UI */
  --gs-fs-md:  14px;      /* inputs, body */
  --gs-fs-lg:  15px;      /* section titles */
  --gs-fs-xl:  18px;      /* page titles */
  --gs-fs-2xl: 22px;
  --gs-fs-3xl: 28px;
  --gs-fs-4xl: 36px;

  --gs-lh-tight:  1.2;
  --gs-lh-snug:   1.35;
  --gs-lh-normal: 1.5;

  --gs-fw-regular: 400;
  --gs-fw-medium:  500;
  --gs-fw-semibold:600;
  --gs-fw-bold:    700;

  /* ───────── Warm Neutral Palette (light) ─────────
     Hue: ~60-70 (warm gray), saturation ~0.005-0.015 */
  --gs-bg:           #fafaf8;     /* app background */
  --gs-bg-elev:      #ffffff;     /* cards, panels */
  --gs-bg-sunken:    #f3f3f0;     /* sunken inputs, table headers */
  --gs-bg-hover:     #efefea;
  --gs-bg-active:    #e9e9e3;
  --gs-bg-canvas:    #f7f6f2;     /* drawing canvas */

  --gs-border:        #e6e5e0;
  --gs-border-strong: #d4d3cc;
  --gs-border-subtle: #efefea;
  --gs-border-focus:  var(--gs-accent);

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

  /* ───────── Brand Accent — GeoStru Gold/Amber ─────────
     Signature color; reserved for primary CTAs (Calculate). */
  --gs-accent:         #d49018;   /* primary gold */
  --gs-accent-hover:   #c08015;
  --gs-accent-active:  #a86d10;
  --gs-accent-soft:    #fbf1d9;
  --gs-accent-softer:  #fdf8ec;
  --gs-accent-fg:      #1a1100;
  --gs-accent-text:    #8c5c0a;
  --gs-accent-border:  #e4b860;

  /* ───────── Secondary — Navy (selection, links, info chrome) ───────── */
  --gs-navy:           #1e3a5f;
  --gs-navy-hover:     #264a78;
  --gs-navy-active:    #15294a;
  --gs-navy-soft:      #e3eaf3;
  --gs-navy-softer:    #f0f4f9;
  --gs-navy-fg:        #ffffff;
  --gs-navy-text:      #1e3a5f;

  /* ───────── AI — distinct violet, sparkle treatment ───────── */
  --gs-ai:        #6e56cf;
  --gs-ai-hover:  #5e48b8;
  --gs-ai-soft:   #ece9f9;
  --gs-ai-fg:     #ffffff;
  --gs-ai-text:   #4a3a96;

  /* ───────── Semantic ───────── */
  --gs-success:      #197a3e;
  --gs-success-soft: #d8efdf;
  --gs-success-fg:   #ffffff;

  --gs-warning:      #b8730a;
  --gs-warning-soft: #fcefd2;
  --gs-warning-fg:   #ffffff;

  --gs-danger:       #b42318;
  --gs-danger-soft:  #fbe1de;
  --gs-danger-fg:    #ffffff;

  --gs-info:         #0b5db8;
  --gs-info-soft:    #dde9f7;
  --gs-info-fg:      #ffffff;

  /* ───────── Domain Tags ───────── */
  --gs-tag-strat:  #b8730a;        /* Stratigrapher  — amber */
  --gs-tag-liqui:  #0b5db8;        /* LiquiTer       — blue */
  --gs-tag-rsl:    #6e56cf;        /* RSL III        — violet */
  --gs-tag-gdw:    #197a3e;        /* GDW            — green */
  --gs-tag-comp:   #8c4a1f;        /* Computo        — brown */
  --gs-tag-cad:    #1e3a5f;        /* CAD            — navy */

  /* ───────── Radii — minimal, technical ───────── */
  --gs-r-none: 0px;
  --gs-r-xs:   2px;
  --gs-r-sm:   4px;
  --gs-r-md:   6px;
  --gs-r-lg:   8px;
  --gs-r-xl:   12px;
  --gs-r-pill: 999px;

  /* ───────── Spacing (4px base) ───────── */
  --gs-sp-0:  0px;
  --gs-sp-1:  2px;
  --gs-sp-2:  4px;
  --gs-sp-3:  6px;
  --gs-sp-4:  8px;
  --gs-sp-5:  12px;
  --gs-sp-6:  16px;
  --gs-sp-7:  20px;
  --gs-sp-8:  24px;
  --gs-sp-9:  32px;
  --gs-sp-10: 40px;
  --gs-sp-11: 48px;
  --gs-sp-12: 64px;

  /* ───────── Density (controllable) ───────── */
  --gs-density-row-h: 32px;     /* table row, list item */
  --gs-density-input-h: 32px;   /* input height */
  --gs-density-btn-h: 32px;     /* button height */
  --gs-density-btn-h-sm: 26px;
  --gs-density-btn-h-lg: 38px;
  --gs-density-toolbar-h: 44px;
  --gs-density-statusbar-h: 28px;

  /* ───────── Shadows — subtle, technical ───────── */
  --gs-shadow-xs: 0 1px 1px rgba(20, 20, 18, 0.04);
  --gs-shadow-sm: 0 1px 2px rgba(20, 20, 18, 0.06), 0 1px 1px rgba(20, 20, 18, 0.04);
  --gs-shadow-md: 0 2px 8px rgba(20, 20, 18, 0.06), 0 1px 2px rgba(20, 20, 18, 0.04);
  --gs-shadow-lg: 0 8px 24px rgba(20, 20, 18, 0.10), 0 2px 4px rgba(20, 20, 18, 0.04);
  --gs-shadow-popover: 0 8px 28px -4px rgba(20, 20, 18, 0.18), 0 4px 12px -4px rgba(20, 20, 18, 0.10);
  --gs-shadow-modal: 0 24px 48px -12px rgba(20, 20, 18, 0.25);
  --gs-shadow-focus: 0 0 0 3px var(--gs-accent-soft), 0 0 0 1px var(--gs-accent);
  --gs-shadow-focus-navy: 0 0 0 3px var(--gs-navy-soft), 0 0 0 1px var(--gs-navy);

  /* ───────── Layout ───────── */
  --gs-toolbar-h: 44px;
  --gs-tabbar-h: 36px;
  --gs-statusbar-h: 28px;
  --gs-sidebar-w: 280px;
  --gs-sidebar-collapsed-w: 44px;
  --gs-properties-w: 300px;
  --gs-ai-panel-w: 360px;
  --gs-ai-panel-collapsed-h: 44px;

  /* ───────── Motion ───────── */
  --gs-ease: cubic-bezier(0.2, 0, 0, 1);
  --gs-dur-fast: 80ms;
  --gs-dur:      140ms;
  --gs-dur-slow: 220ms;

  /* ───────── Z-index ───────── */
  --gs-z-toolbar: 100;
  --gs-z-sidebar: 90;
  --gs-z-dropdown: 200;
  --gs-z-popover: 250;
  --gs-z-modal: 300;
  --gs-z-toast: 400;
}

/* ================================================================
   Dark theme
   ================================================================ */
[data-gs-theme="dark"] {
  --gs-bg:        #15161a;
  --gs-bg-elev:   #1c1d22;
  --gs-bg-sunken: #101115;
  --gs-bg-hover:  #24262c;
  --gs-bg-active: #2c2e34;
  --gs-bg-canvas: #0f1014;

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

  --gs-text:           #ededee;
  --gs-text-secondary: #a8a8af;
  --gs-text-tertiary:  #74747c;
  --gs-text-disabled:  #4a4a52;
  --gs-text-inverse:   #15161a;

  --gs-accent:         #e8a843;
  --gs-accent-hover:   #f0b758;
  --gs-accent-active:  #f5c878;
  --gs-accent-soft:    #2e2410;
  --gs-accent-softer:  #1f190b;
  --gs-accent-fg:      #15100a;
  --gs-accent-text:    #f0c179;
  --gs-accent-border:  #6a4d18;

  --gs-navy:        #5b8dc9;
  --gs-navy-hover:  #6e9bd3;
  --gs-navy-active: #82abdc;
  --gs-navy-soft:   #1a2538;
  --gs-navy-softer: #14192a;
  --gs-navy-fg:     #ffffff;
  --gs-navy-text:   #8ab2dd;

  --gs-ai:        #9d85eb;
  --gs-ai-hover:  #a994ee;
  --gs-ai-soft:   #251f3a;
  --gs-ai-fg:     #15161a;
  --gs-ai-text:   #b6a4f0;

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

  --gs-shadow-xs: 0 1px 1px rgba(0, 0, 0, 0.4);
  --gs-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5), 0 1px 1px rgba(0, 0, 0, 0.3);
  --gs-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);
  --gs-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6), 0 2px 4px rgba(0, 0, 0, 0.4);
  --gs-shadow-popover: 0 8px 28px -4px rgba(0, 0, 0, 0.6), 0 4px 12px -4px rgba(0, 0, 0, 0.4);
  --gs-shadow-modal: 0 24px 48px -12px rgba(0, 0, 0, 0.7);
  --gs-shadow-focus: 0 0 0 3px rgba(232, 168, 67, 0.2), 0 0 0 1px var(--gs-accent);
}

/* ================================================================
   Density modifiers
   ================================================================ */
[data-gs-density="compact"] {
  --gs-density-row-h: 26px;
  --gs-density-input-h: 26px;
  --gs-density-btn-h: 26px;
  --gs-density-btn-h-sm: 22px;
  --gs-density-btn-h-lg: 32px;
  --gs-density-toolbar-h: 38px;
  --gs-density-statusbar-h: 24px;
  --gs-toolbar-h: 38px;
  --gs-tabbar-h: 30px;
  --gs-statusbar-h: 24px;
}
[data-gs-density="comfortable"] {
  --gs-density-row-h: 36px;
  --gs-density-input-h: 36px;
  --gs-density-btn-h: 36px;
  --gs-density-btn-h-sm: 30px;
  --gs-density-btn-h-lg: 42px;
  --gs-density-toolbar-h: 48px;
  --gs-density-statusbar-h: 32px;
  --gs-toolbar-h: 48px;
  --gs-tabbar-h: 40px;
  --gs-statusbar-h: 32px;
}

/* ================================================================
   Base reset, scoped to .gs (so it doesn't blow up host pages)
   ================================================================ */
.gs, .gs-page {
  font-family: var(--gs-font-sans);
  color: var(--gs-text);
  background: var(--gs-bg);
  font-size: var(--gs-fs-sm);
  line-height: var(--gs-lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: var(--gs-font-feature);
}
.gs *, .gs *::before, .gs *::after,
.gs-page *, .gs-page *::before, .gs-page *::after { box-sizing: border-box; }
:where(.gs, .gs-page) :where(button, input, select, textarea) { font: inherit; color: inherit; }
/* RPD: kept only `cursor` here (and lowered color/font specificity above via :where()).
   The original reset also zeroed background/border/padding and fixed color/font at (0,1,1),
   but `.gs button` out-specifies every component class (.gs-btn, .rpd-pill, and the shared
   RCL buttons .ai-fab/.gd-hdr-btn/.gd-save-btn — all 0,1,0), stripping their box model and
   overriding their own text color. Each button now keeps the box model and color its own
   component CSS defines; this must stay in sync with colors_and_type.css (duplicated reset,
   same specificity, last one in load order wins). */
.gs button, .gs-page button { cursor: pointer; }
.gs a, .gs-page a { color: var(--gs-navy-text); text-decoration: none; }
.gs a:hover, .gs-page a:hover { text-decoration: underline; }

/* ================================================================
   Utility classes
   ================================================================ */
.gs-mono { font-family: var(--gs-font-mono); font-feature-settings: var(--gs-font-feature-tnum); }
.gs-tnum { font-variant-numeric: tabular-nums; }
.gs-unit { color: var(--gs-text-tertiary); font-size: 0.92em; }
.gs-symbol { font-style: italic; font-feature-settings: "ss01"; }   /* γ, σ, φ, τ */
.gs-sub { font-size: 0.78em; vertical-align: -0.15em; }
.gs-sup { font-size: 0.72em; vertical-align: 0.45em; }

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

/* Focus rings */
.gs-focus:focus-visible,
.gs-page :where(button, input, select, textarea, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--gs-shadow-focus);
  border-color: var(--gs-accent);
}