/* =============================================================================
   VERSIANI DESIGN SYSTEM v2 — Frappe Integration
   Built on top of Frappe UI's "Espresso" design language (light theme),
   recoloured with the Versiani dos Anjos Advogados brand palette.
   Source palette: Versiani Design System v2 (colors_and_type.css)
   ============================================================================= */

/* ---------- Fonts ----------------------------------------------------------- */
/* Inter Variable — Espresso's working font. Provided by Frappe core + CRM SPA bundles.
   JetBrains Mono — loaded here for process/OAB numbers used across the app. */
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap");

/* Avenir — the firm-licensed display family. 6 weights now in /fonts.
   Use freely for display + headings; UI body still defaults to Inter. */
@font-face { font-family: "Avenir"; src: url("/assets/versiani/fonts/Avenir-Light.ttf")   format("truetype"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Avenir"; src: url("/assets/versiani/fonts/Avenir-Book.ttf")    format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Avenir"; src: url("/assets/versiani/fonts/Avenir-Roman.ttf")   format("truetype"); font-weight: 450; font-style: normal; font-display: swap; }
@font-face { font-family: "Avenir"; src: url("/assets/versiani/fonts/Avenir-Regular.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Avenir"; src: url("/assets/versiani/fonts/Avenir-Heavy.ttf")   format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Avenir"; src: url("/assets/versiani/fonts/Avenir-Black.ttf")   format("truetype"); font-weight: 900; font-style: normal; font-display: swap; }

/* ---------- Design tokens — always available across all themes -------------- */
:root {
  /* -- Brand palette --------------------------------------------------------- */
  --v-navy:     #1D3557;   /* primary brand — logo dark, headings */
  --v-blue:     #457B9D;   /* steel — primary actions, logo midtone */
  --v-aqua:     #A8DADC;   /* light brand — logo light, accent washes */
  --v-cream:    #F1FAEE;   /* warm off-white — section washes */
  --v-red:      #BD323E;   /* danger / Criminal practice / critical urgency */
  --v-green:    #2E7D52;   /* success / paid / won */
  --v-gold:     #A0622A;   /* warning / Família / high urgency */

  --v-text-2:   #6B8FA8;   /* muted text on cards (kanban subtitles) */
  --v-text-3:   #9DB5C4;   /* placeholder, dot off-state */
  --v-border:   #D8E6EE;   /* default 1px borders on cards & inputs */

  /* -- Practice-area swatches ------------------------------------------------ */
  --v-area-labor-bg:     #E8EEF4;  --v-area-labor-fg:     #1D3557;  --v-area-labor-bd:     #C0D0DC;
  --v-area-civil-bg:     #EAF2F7;  --v-area-civil-fg:     #457B9D;  --v-area-civil-bd:     #C5DDE9;
  --v-area-tax-bg:       #EDF7F7;  --v-area-tax-fg:       #2E6B6D;  --v-area-tax-bd:       #A8DADC;
  --v-area-corporate-bg: #F5EDF7;  --v-area-corporate-fg: #6B3A7D;  --v-area-corporate-bd: #D5C0DC;
  --v-area-family-bg:    #FFF4E8;  --v-area-family-fg:    #A0622A;  --v-area-family-bd:    #EDD9C0;
  --v-area-criminal-bg:  #FAECEC;  --v-area-criminal-fg:  #BD323E;  --v-area-criminal-bd:  #F0C8C8;
  --v-area-other-bg:     #F1FAEE;  --v-area-other-fg:     #9DB5C4;  --v-area-other-bd:     #D8E6EE;

  /* -- Espresso semantic tokens, retuned for Versiani ------------------------ */
  /* ink = text colour. surface = fill. outline = border/stroke. */
  --ink-gray-1:   #E2E2E2;
  --ink-gray-2:   #C7C7C7;
  --ink-gray-3:   #9DB5C4;   /* override w/ brand t3 */
  --ink-gray-4:   #6B8FA8;   /* override w/ brand t2 */
  --ink-gray-5:   #4F6B7E;
  --ink-gray-6:   #3A5269;
  --ink-gray-7:   #2A3F54;
  --ink-gray-8:   #233649;   /* body */
  --ink-gray-9:   #1D3557;   /* override w/ brand navy — headings */

  --ink-blue-2:   #457B9D;   /* Versiani brand blue replaces stock 0289F7 */
  --ink-blue-3:   #1D3557;
  --ink-blue-link:#457B9D;

  --ink-red-3:    #BD323E;
  --ink-red-4:    #94232C;
  --ink-green-2:  #2E7D52;
  --ink-green-3:  #1F5C3A;
  --ink-amber-2:  #A0622A;
  --ink-amber-3:  #7A4A1F;

  --surface-white:    #FFFFFF;
  --surface-gray-1:   #F8F9FB;   /* page background — slight cool tint */
  --surface-gray-2:   #F1F4F7;   /* input background */
  --surface-gray-3:   #E8ECF1;
  --surface-gray-4:   #D8E6EE;
  --surface-cards:    #FFFFFF;
  --surface-menu-bar: #F8F9FB;
  --surface-modal:    #FFFFFF;

  --surface-blue-1:   #EAF2F7;
  --surface-blue-2:   #C8E0EC;
  --surface-blue-3:   #457B9D;
  --surface-red-1:    #FAECEC;
  --surface-red-2:    #F0C8C8;
  --surface-red-5:    #BD323E;
  --surface-green-1:  #E8F5EE;
  --surface-green-2:  #C5E6D2;
  --surface-green-3:  #2E7D52;
  --surface-amber-1:  #FFF4E8;
  --surface-amber-2:  #F4DDC0;
  --surface-amber-3:  #A0622A;

  --outline-white:        #FFFFFF;
  --outline-gray-1:       #EDF1F4;   /* default border */
  --outline-gray-2:       #D8E6EE;   /* card border */
  --outline-gray-3:       #B6C7D3;
  --outline-gray-4:       #6B8FA8;   /* focus ring base */
  --outline-gray-5:       #1D3557;
  --outline-gray-modals:  #D8E6EE;
  --outline-blue-1:       #A7C9DC;
  --outline-red-3:        #BD323E;
  --outline-green-2:      #86C5A8;
  --outline-amber-2:      #E0BF8B;

  /* -- Type ratios ----------------------------------------------------------- */
  --font-sans:     "Inter", "InterVar", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono:     "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  --font-display:  "Avenir", "Inter", sans-serif;   /* wordmark only */

  --fs-2xs:  11px;
  --fs-xs:   12px;
  --fs-sm:   13px;
  --fs-base: 14px;
  --fs-lg:   16px;
  --fs-xl:   18px;
  --fs-2xl:  20px;
  --fs-3xl:  24px;
  --fs-4xl:  32px;

  --lh-tight: 1.15;
  --lh-prose: 1.5;
  --lh-loose: 1.7;
  --tracking-ui: 0.02em;

  --fw-regular: 420;   /* Espresso default ("420" reads slightly heavier than 400) */
  --fw-medium:  500;
  --fw-semi:   600;
  --fw-bold:   700;

  /* -- Spacing (8px grid, from Espresso preset) ------------------------------ */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* -- Radii (verbatim from Espresso preset) --------------------------------- */
  --radius-none:  0px;
  --radius-sm:    4px;
  --radius:       8px;
  --radius-md:    10px;
  --radius-lg:    12px;
  --radius-xl:    16px;
  --radius-2xl:   20px;
  --radius-full:  9999px;

  /* Map brand radii to Frappe form-control tokens — ensures color fields, inputs,
     selects, and section breaks inherit the proper rounded corners. */
  --border-radius-tiny:  var(--radius-sm);    /* 4px — checkbox corners, small elements */
  --border-radius-sm:    var(--radius);       /* 8px — badges, small controls */
  --border-radius:       var(--radius);       /* 8px — inputs, buttons, cards */
  --border-radius-md:    var(--radius-md);    /* 10px — frappe-control, selects */
  --border-radius-lg:    var(--radius-lg);    /* 12px — dialogs, panels */
  --border-radius-xl:    var(--radius-xl);    /* 16px — larger containers */
  --border-radius-2xl:   var(--radius-2xl);   /* 20px — modals, popups */
  --border-radius-full:  var(--radius-full);  /* 9999px — pills, avatars */

  /* -- Shadows (verbatim from Espresso preset) ------------------------------- */
  --shadow-sm:   0 1px 2px rgba(0,0,0,.10);
  --shadow:      0 0 1px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.10);
  --shadow-md:   0 0 1px rgba(0,0,0,.12), 0 .5px 2px rgba(0,0,0,.15), 0 2px 3px rgba(0,0,0,.16);
  --shadow-lg:   0 0 1px rgba(0,0,0,.35), 0 6px 8px -4px rgba(0,0,0,.10);
  --shadow-xl:   0 0 1px rgba(0,0,0,.19), 0 1px 2px rgba(0,0,0,.07), 0 6px 15px -5px rgba(0,0,0,.11);
  --shadow-2xl:  0 0 1px rgba(0,0,0,.20), 0 1px 3px rgba(0,0,0,.05), 0 10px 24px -3px rgba(0,0,0,.10);

  /* Brand-tinted focus ring */
  --ring-focus:  0 0 0 2px var(--surface-blue-1), 0 0 0 4px var(--v-blue);
}

/* ---------- Frappe theme overrides — light / default theme only ------------- */
/* Scoped to [data-theme="light"] (Frappe's default theme) and :root as fallback.
   When [data-theme="dark"] is active, these overrides do NOT apply since Frappe's
   built-in [data-theme=dark] block handles the dark-mode variable values. */
[data-theme="light"], :root:not([data-theme]) {
  /* -- Gray scale (recolored to Versiani brand palette) ---------------------- */
  --gray-50:  #F8F9FB;
  --gray-100: #F1F4F7;
  --gray-200: #E8ECF1;
  --gray-300: #D8E6EE;
  --gray-400: #B6C7D3;
  --gray-500: #9DB5C4;
  --gray-600: #6B8FA8;
  --gray-700: #4F6B7E;
  --gray-800: #3A5269;
  --gray-900: #1D3557;

  /* -- Semantic text colors -------------------------------------------------- */
  --text-color:            var(--ink-gray-8);
  --heading-color:         var(--ink-gray-9);
  --text-muted:            var(--v-text-2);
  --text-light:            var(--v-text-3);
  --text-on-blue:          #FFFFFF;
  --text-on-light-blue:    #FFFFFF;

  /* -- Layout backgrounds ---------------------------------------------------- */
  --bg-color:              var(--surface-gray-1);
  --fg-color:              var(--surface-white);
  --fg-hover-color:        var(--surface-gray-1);
  --navbar-bg:             var(--surface-white);
  --card-bg:               var(--surface-cards);
  --modal-bg:              var(--surface-modal);
  --toast-bg:              var(--surface-modal);
  --popover-bg:            var(--surface-modal);
  --sidebar-select-color:  var(--surface-gray-2);

  /* -- Controls and inputs --------------------------------------------------- */
  --control-bg:            var(--surface-gray-2);
  --control-bg-on-gray:    var(--surface-white);
  --awesomebar-focus-bg:   var(--surface-white);
  --awesomplete-hover-bg:  var(--surface-gray-1);
  --input-disabled-bg:     var(--surface-gray-2);
  --disabled-control-bg:   var(--surface-gray-3);
  --disabled-text-color:   var(--v-text-3);

  /* -- Borders --------------------------------------------------------------- */
  --border-color:          var(--outline-gray-2);
  --dark-border-color:     var(--outline-gray-3);
  --table-border-color:    var(--outline-gray-1);

  /* -- Buttons --------------------------------------------------------------- */
  --btn-default-bg:        var(--surface-white);
  --btn-default-hover-bg:  var(--surface-gray-1);

  /* -- Shadows --------------------------------------------------------------- */
  --shadow-base:           0 1px 2px rgba(0,0,0,.08), 0 0 1px rgba(0,0,0,.12);
  --shadow-inset:          var(--fg-color);

  /* -- Highlight ------------------------------------------------------------- */
  --highlight-color:              var(--surface-gray-2);
  --yellow-highlight-color:       #FEF5E7;
  --highlight-shadow:             var(--shadow-sm);

  /* -- Icons ----------------------------------------------------------------- */
  --icon-fill:             transparent;
  --icon-stroke:           var(--ink-gray-7);
  --btn-group-border-color: var(--outline-gray-2);

  /* -- Alerts ---------------------------------------------------------------- */
  --alert-text-danger:     var(--v-red);
  --alert-text-warning:    var(--v-gold);
  --alert-text-info:       var(--v-blue);
  --alert-text-success:    var(--v-green);
  --alert-bg-danger:       var(--surface-red-1);
  --alert-bg-warning:      var(--surface-amber-1);
  --alert-bg-info:         var(--surface-blue-1);
  --alert-bg-success:      var(--surface-green-1);

  /* -- Scrollbar ------------------------------------------------------------- */
  --scrollbar-thumb-color: var(--outline-gray-3);
  --scrollbar-track-color: var(--surface-gray-1);

  /* -- Background color pairs (for indicators, badges) ----------------------- */
  --bg-blue:               var(--v-blue);
  --bg-light-blue:         var(--v-blue);
  --bg-dark-blue:          var(--v-navy);
  --bg-green:              var(--v-green);
  --bg-yellow:             var(--v-gold);
  --bg-orange:             #C97D2E;
  --bg-red:                var(--v-red);
  --bg-gray:               var(--gray-500);
  --bg-grey:               var(--gray-500);
  --bg-darkgrey:           var(--gray-700);
  --bg-dark-gray:          var(--gray-700);
  --bg-light-gray:         var(--gray-200);
  --bg-purple:             #6B3A7D;
  --bg-pink:               #B34A6E;
  --bg-cyan:               var(--v-aqua);

  /* -- Text on background colors --------------------------------------------- */
  --text-on-blue:          #FFFFFF;
  --text-on-light-blue:    #FFFFFF;
  --text-on-dark-blue:     var(--v-aqua);
  --text-on-green:         #FFFFFF;
  --text-on-yellow:        #FFFFFF;
  --text-on-orange:        #FFFFFF;
  --text-on-red:           #FFFFFF;
  --text-on-gray:          #FFFFFF;
  --text-on-grey:          #FFFFFF;
  --text-on-darkgrey:      var(--surface-gray-1);
  --text-on-dark-gray:     var(--surface-gray-1);
  --text-on-light-gray:    var(--gray-800);
  --text-on-purple:        #FFFFFF;
  --text-on-pink:          #FFFFFF;
  --text-on-cyan:          var(--v-navy);

  /* -- Error states ---------------------------------------------------------- */
  --error-bg:              var(--surface-red-1);
  --error-border:          var(--v-red);

  /* -- Frappe Charts --------------------------------------------------------- */
  --charts-label-color:            var(--v-text-2);
  --charts-axis-line-color:        var(--outline-gray-2);
  --charts-stroke-width:           5px;
  --charts-dataset-circle-stroke:  #ffffff;
  --charts-dataset-circle-stroke-width: var(--charts-stroke-width);
  --charts-tooltip-title:          var(--charts-label-color);
  --charts-tooltip-label:          var(--charts-label-color);
  --charts-tooltip-value:          var(--ink-gray-9);
  --charts-tooltip-bg:             var(--surface-modal);
  --charts-legend-label:           var(--charts-label-color);

  /* -- Checkbox -------------------------------------------------------------- */
  --checkbox-focus-shadow: 0 0 0 2px var(--v-blue);

  /* -- Diff (version compare) ------------------------------------------------ */
  --diff-added:            var(--surface-green-1);
  --diff-removed:          var(--surface-red-1);

  /* -- Skeleton loading ------------------------------------------------------ */
  --skeleton-bg:           var(--surface-gray-3);

  /* -- Color scheme ---------------------------------------------------------- */
  color-scheme: light;
}

/* ---------- Utility classes ------------------------------------------------- */
.v-card {
  background: var(--surface-cards);
  border: 1px solid var(--outline-gray-2);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.v-h1 { font-size: var(--fs-3xl); line-height: 1.25; font-weight: var(--fw-semi); letter-spacing: -0.005em; color: var(--ink-gray-9); }
.v-h2 { font-size: var(--fs-2xl); line-height: 1.3;   font-weight: var(--fw-semi); color: var(--ink-gray-9); }
.v-h3 { font-size: var(--fs-xl);  line-height: 1.35;  font-weight: var(--fw-semi); color: var(--ink-gray-9); }
.v-h4 { font-size: var(--fs-lg);  line-height: 1.4;   font-weight: var(--fw-semi); color: var(--ink-gray-9); }

.v-eyebrow { font-size: var(--fs-2xs); font-weight: var(--fw-semi); letter-spacing: 0.08em; text-transform: uppercase; color: var(--v-text-2); }
.v-body    { font-size: var(--fs-base); line-height: var(--lh-prose); letter-spacing: var(--tracking-ui); color: var(--ink-gray-8); font-weight: var(--fw-regular); }
.v-small   { font-size: var(--fs-sm);   line-height: var(--lh-prose); letter-spacing: var(--tracking-ui); color: var(--ink-gray-7); }
.v-meta    { font-size: var(--fs-xs);   line-height: var(--lh-tight);  letter-spacing: var(--tracking-ui); color: var(--v-text-2); }
.v-mono    { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0; }
.v-wordmark { font-family: var(--font-display); font-weight: 400; letter-spacing: 0.04em; color: var(--v-navy); }

.v-kbd { font-family: var(--font-mono); font-size: 11px; padding: 2px 6px; border: 1px solid var(--outline-gray-2); border-bottom-width: 2px; border-radius: var(--radius-sm); background: var(--surface-gray-1); color: var(--ink-gray-7); }

/* ---------- Practice area tag classes --------------------------------------- */
.v-tag-labor     { background: var(--v-area-labor-bg);     color: var(--v-area-labor-fg);     border-color: var(--v-area-labor-bd); }
.v-tag-civil     { background: var(--v-area-civil-bg);     color: var(--v-area-civil-fg);     border-color: var(--v-area-civil-bd); }
.v-tag-tax       { background: var(--v-area-tax-bg);       color: var(--v-area-tax-fg);       border-color: var(--v-area-tax-bd); }
.v-tag-corporate { background: var(--v-area-corporate-bg); color: var(--v-area-corporate-fg); border-color: var(--v-area-corporate-bd); }
.v-tag-family    { background: var(--v-area-family-bg);    color: var(--v-area-family-fg);    border-color: var(--v-area-family-bd); }
.v-tag-criminal  { background: var(--v-area-criminal-bg);  color: var(--v-area-criminal-fg);  border-color: var(--v-area-criminal-bd); }
.v-tag-other     { background: var(--v-area-other-bg);     color: var(--v-area-other-fg);     border-color: var(--v-area-other-bd); }

/* ---------- Left-border accent cards ---------------------------------------- */
.v-card-accent-navy     { border-left: 4px solid var(--v-navy); }
.v-card-accent-blue     { border-left: 4px solid var(--v-blue); }
.v-card-accent-aqua     { border-left: 4px solid var(--v-aqua); }
.v-card-accent-red      { border-left: 4px solid var(--v-red); }
.v-card-accent-green    { border-left: 4px solid var(--v-green); }
.v-card-accent-gold     { border-left: 4px solid var(--v-gold); }

/* ---------- SVG icon styling ------------------------------------------------- */
.v-icon { width: 18px; height: 18px; stroke-width: 1.5; stroke: currentColor; fill: none; }
.v-icon-sm { width: 16px; height: 16px; stroke-width: 1.5; stroke: currentColor; fill: none; }
.v-icon-lg { width: 20px; height: 20px; stroke-width: 1.5; stroke: currentColor; fill: none; }

/* ---------- Base typography refinements ------------------------------------- */
html, body {
  font-feature-settings: "cv11" 1;     /* Espresso's single-storey g */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- Custom scrollbars (thin, brand-toned) -------------------------- */
/* WebKit (Chrome, Edge, Safari) */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-thumb {
  background: var(--outline-gray-3);
  border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--outline-gray-4);
}
::-webkit-scrollbar-track {
  background: transparent;
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--outline-gray-3) transparent;
}

/* ============================================================================
   Versiani Dark Mode — Timeless Night
   ============================================================================
   Selector: Frappe sets data-theme="dark" on <html> when Timeless Night (or
   Automatic + system dark) is active. This block matches that so all custom
   properties resolve to dark-toned values.                         */
[data-theme="dark"] {
  /* --- Background (surface) ------------------------------------------------- */
  --surface-white:      #1B2530;      /* cards, modals, dropdowns */
  --surface-gray-1:     #0F1419;      /* page background */
  --surface-gray-2:     #11181C;      /* inputs, secondary surfaces */
  --surface-gray-3:     #17222B;      /* hover states on cards */
  --surface-gray-4:     #2A3F54;      /* dividers, subtle borders */
  --surface-cards:      var(--surface-white);
  --surface-menu-bar:   #0C1115;
  --surface-modal:      var(--surface-white);

  /* --- Ink (text) --------------------------------------------------------- */
  --ink-gray-1:   #1E2A36;            /* barely visible on dark – reserved */
  --ink-gray-2:   #2A3F54;            /* subtle border/separator */
  --ink-gray-3:   #4B6E8A;            /* placeholder, disabled text */
  --ink-gray-4:   #6B8FA8;            /* secondary text (same as light t2) */
  --ink-gray-5:   #8BA9C4;            /* meta, captions */
  --ink-gray-6:   #A9C3D9;            /* body text – medium emphasis */
  --ink-gray-7:   #CBD5E1;            /* default body text */
  --ink-gray-8:   #E2E8F0;            /* high emphasis body */
  --ink-gray-9:   #F0F6FC;            /* headings, primary text */

  /* --- Brand colours (contextual) ----------------------------------------- */
  --v-navy:     #3B6A9F;              /* lighter for primary buttons */
  --v-blue:     #5E9FCC;              /* brighter steel blue */
  --v-aqua:     #A8DADC;              /* unchanged, used in focus/highlight */
  --v-cream:    #F1FAEE;              /* unchanged, used in "Outro" badges */
  --v-red:      #E55A66;              /* slightly more saturated */
  --v-green:    #4A9E77;              /* more vibrant */
  --v-gold:     #D88C42;              /* more luminous */
  --v-text-2:   #8BA9C4;              /* same as ink-5 */
  --v-text-3:   #4B6E8A;              /* same as ink-3 */
  --v-border:   #2A3F54;              /* default borders */

  /* --- Practice areas – dark bg with light text ------------------------- */
  --v-area-labor-bg:     #1E2A3A;  --v-area-labor-fg:     #A9C3D9;  --v-area-labor-bd:     #3A5A7A;
  --v-area-civil-bg:     #1E2F3C;  --v-area-civil-fg:     #C2D9E8;  --v-area-civil-bd:     #3A6B8A;
  --v-area-tax-bg:       #1E3538;  --v-area-tax-fg:       #B8D9DC;  --v-area-tax-bd:       #3A7880;
  --v-area-corporate-bg: #2A1E36;  --v-area-corporate-fg: #D4C0E8;  --v-area-corporate-bd: #6A3A8A;
  --v-area-family-bg:    #2E251A;  --v-area-family-fg:    #F0D0A0;  --v-area-family-bd:    #A0622A;
  --v-area-criminal-bg:  #2E1A1E;  --v-area-criminal-fg:  #F0B0B8;  --v-area-criminal-bd:  #BD323E;
  --v-area-other-bg:     #1B2A2A;  --v-area-other-fg:     #9DB5C4;  --v-area-other-bd:     #3A5A5A;

  /* --- Surface specialties (component compatibility) -------------------- */
  --surface-blue-1:   #162530;  --surface-blue-2:   #234052;  --surface-blue-3:   #5E9FCC;
  --surface-red-1:    #2E1A1E;  --surface-red-2:    #5C2A30;  --surface-red-5:    #E55A66;
  --surface-green-1:  #1A2E26;  --surface-green-2:  #2A5A46;  --surface-green-3:  #4A9E77;
  --surface-amber-1:  #2E261A;  --surface-amber-2:  #5C4A2A;  --surface-amber-3:  #D88C42;

  /* --- Outline / border --------------------------------------------------- */
  --outline-white:        #2A3F54;   /* on dark, "white" becomes a dark border */
  --outline-gray-1:       #1E2A36;
  --outline-gray-2:       #2A3F54;
  --outline-gray-3:       #4B6E8A;
  --outline-gray-4:       #6B8FA8;
  --outline-gray-5:       #A9C3D9;
  --outline-gray-modals:  #2A3F54;
  --outline-blue-1:       #234052;
  --outline-red-3:        #E55A66;
  --outline-green-2:      #4A9E77;
  --outline-amber-2:      #D88C42;

  /* --- Frappe-standard semantic variables (maps Espresso → Frappe) -------- */

  /* Gray & color scale (Espresso → light values for dark bg readability) */
  --gray-700: #2A3F54;
  --gray-800: #1E2A36;
  --green-800: #e4f5e9;        /* Frappe's --green-100 — light green so
                                  .text-green-800 is readable on dark green
                                  backgrounds like --surface-green-2 (#2A5A46) */
  --yellow-800: #fef08a;       /* light yellow so .text-yellow-800 is
                                  readable on dark backgrounds */
  --red-700: #fca5a5;          /* light red so .text-red-700 is readable
                                  on dark backgrounds like --surface-red-2 */

  /* Text & headings */
  --text-color:            var(--ink-gray-7);
  --heading-color:         var(--ink-gray-9);
  --text-muted:            var(--ink-gray-4);
  --text-light:            var(--ink-gray-3);

  /* Layout backgrounds */
  --bg-color:              var(--surface-gray-1);
  --fg-color:              var(--surface-white);
  --fg-hover-color:        var(--surface-gray-3);
  --navbar-bg:             var(--surface-menu-bar);
  --card-bg:               var(--surface-cards);
  --modal-bg:              var(--surface-modal);
  --toast-bg:              var(--surface-modal);
  --popover-bg:            var(--bg-color);

  /* Sidebar */
  --sidebar-hover-color:   var(--surface-gray-3);
  --sidebar-active-color:  var(--surface-gray-4);
  --sidebar-border-color:  var(--outline-gray-2);
  --sidebar-select-color:  var(--surface-gray-2);
  --sidebar-width:         220px;
  --divider-color:         rgba(42, 63, 84, 1);

  /* Controls & inputs */
  --control-bg:            var(--surface-gray-2);
  --control-bg-on-gray:    var(--surface-white);
  --awesomebar-focus-bg:   var(--surface-gray-2);
  --awesomplete-hover-bg:  var(--surface-gray-3);
  --input-disabled-bg:     none;
  --disabled-control-bg:   var(--surface-gray-3);
  --disabled-text-color:   var(--ink-gray-3);

  /* Buttons */
  --btn-default-bg:        var(--surface-gray-3);
  --btn-default-hover-bg:  var(--surface-gray-4);
  --btn-ghost-hover-bg:    var(--surface-gray-3);
  --btn-primary:           var(--ink-gray-9);
  --btn-group-border-color: var(--outline-gray-3);

  /* Borders */
  --border-color:          var(--outline-gray-2);
  --dark-border-color:     var(--outline-gray-3);
  --table-border-color:    var(--border-color);

  /* Shadows — deeper, with a surface-toned cast */
  --shadow-sm:   0 1px 2px rgba(0,0,0,0.6);
  --shadow:      0 0 1px rgba(0,0,0,0.8), 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md:   0 0 1px rgba(0,0,0,0.9), 0 0.5px 2px rgba(0,0,0,0.5), 0 2px 3px rgba(0,0,0,0.4);
  --shadow-lg:   0 0 1px rgba(0,0,0,0.9), 0 6px 8px -4px rgba(0,0,0,0.4);
  --shadow-xl:   0 0 1px rgba(0,0,0,0.85), 0 1px 2px rgba(0,0,0,0.3), 0 6px 15px -5px rgba(0,0,0,0.5);
  --shadow-2xl:  0 0 1px rgba(0,0,0,0.9), 0 1px 3px rgba(0,0,0,0.4), 0 10px 24px -3px rgba(0,0,0,0.4);
  --shadow-base: 0px 4px 8px rgba(0,0,0,0.5), 0px 0px 4px rgba(0,0,0,0.6);
  --shadow-inset: var(--surface-gray-1);

  /* Highlights */
  --highlight-color:              var(--surface-gray-3);
  --yellow-highlight-color:       #3A2E0A;
  --highlight-shadow:             1px 1px 10px rgba(0,0,0,0.5), 0px 0px 4px rgba(0,0,0,0.6);

  /* Icons */
  --icon-fill:             transparent;
  --icon-stroke:           var(--ink-gray-6);

  /* Alerts */
  --alert-text-danger:     var(--ink-red-3);
  --alert-text-warning:    var(--ink-amber-3);
  --alert-text-info:       var(--ink-blue-2);
  --alert-text-success:    var(--ink-green-2);
  --alert-bg-danger:       var(--surface-red-1);
  --alert-bg-warning:      var(--surface-amber-1);
  --alert-bg-info:         var(--surface-blue-1);
  --alert-bg-success:      var(--surface-green-1);

  /* Indicators */
  --bg-blue:               var(--surface-blue-3);
  --bg-light-blue:         var(--surface-blue-3);
  --bg-dark-blue:          #1D3557;
  --bg-green:              var(--surface-green-3);
  --bg-yellow:             var(--surface-amber-3);
  --bg-orange:             var(--surface-amber-2);
  --bg-red:                var(--surface-red-5);
  --bg-gray:               var(--surface-gray-4);
  --bg-grey:               var(--surface-gray-4);
  --bg-darkgrey:           var(--surface-gray-4);
  --bg-dark-gray:          var(--surface-gray-3);
  --bg-light-gray:         var(--surface-gray-3);
  --bg-purple:             #5A2D6D;
  --bg-pink:               #6A2A5A;
  --bg-cyan:               #1A5A6D;
  --text-on-blue:          #FFFFFF;
  --text-on-light-blue:    #FFFFFF;
  --text-on-dark-blue:     var(--ink-gray-6);
  --text-on-green:         #FFFFFF;
  --text-on-yellow:        #FFFFFF;
  --text-on-orange:        #000000;
  --text-on-red:           #FFFFFF;
  --text-on-gray:          #FFFFFF;
  --text-on-grey:          #FFFFFF;
  --text-on-darkgrey:      var(--ink-gray-6);
  --text-on-dark-gray:     var(--ink-gray-6);
  --text-on-light-gray:    var(--ink-gray-6);
  --text-on-purple:        #FFFFFF;
  --text-on-pink:          #FFFFFF;
  --text-on-cyan:          #FFFFFF;

  /* Scrollbar */
  --scrollbar-thumb-color: #4B6E8A;
  --scrollbar-track-color: #1E2A36;

  /* Focus ring */
  --ring-focus:  0 0 0 2px var(--surface-blue-1), 0 0 0 4px #5E9FCC;

  /* Frappe semantic fg/bg colors — dark-theme values */
  --red-50:                var(--surface-red-1);      /* alert-card bg in dark mode */
  --yellow-50:             var(--surface-amber-1);    /* same — amber, no yellow-var */
  --blue-50:               var(--surface-blue-1);
  --red-400:               var(--ink-red-3);          /* border-color for red alerts */
  --yellow-400:            var(--ink-amber-2);        /* border-color for yellow alerts */
  --blue-300:              var(--outline-blue-1);     /* border-color for blue alerts */

  /* Misc */
  --error-bg:              var(--surface-red-1);
  --error-border:          var(--ink-red-3);
  --skeleton-bg:           var(--surface-gray-3);
  --placeholder-color:     var(--surface-gray-3);
  --switch-bg:             var(--surface-gray-4);
  --subtle-accent:         var(--surface-gray-3);

  /* Color scheme */
  color-scheme: dark;
}