/* ============================================================================
   Mekari Pixel 2.4 — Design Tokens
   ----------------------------------------------------------------------------
   Source: Pixel 2.4 Figma (Color/, Color-palette/, Typography/, Spacing/,
   Elevation/) + xm-frontend-v2 Pixel3 implementation.
   ============================================================================ */

/* ---------- Webfont ------------------------------------------------------- */
/* Pixel 2.4 uses Inter. The original repo loads it from
   https://cdn.mekari.design/fonts/Inter/  — we mirror that from Google Fonts
   for environment portability. Substituted with the Google Fonts CDN. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* =========================================================================
     COLOR PALETTE (raw)  — from /Color-palette/Color
     ======================================================================= */

  /* Neutrals (whites + slate-cool greys) */
  --pxl-white:           #ffffff;
  --pxl-neutral-100:     #f7f8f9;
  --pxl-neutral-200:     #f1f5f9;
  --pxl-neutral-300:     #e7edf5;
  --pxl-neutral-400:     #dcdfe4;
  --pxl-neutral-500:     #c1c7d0;
  --pxl-neutral-600:     #a4abb8;
  --pxl-neutral-700:     #8690a2;
  --pxl-neutral-800:     #758195;
  --pxl-neutral-900:     #656f80;
  --pxl-neutral-1000:    #44546f;

  /* Neutral A (alphas — for overlays over color) */
  --pxl-neutral-100a:    rgba(29,31,36,0.04);
  --pxl-neutral-200a:    rgba(29,31,36,0.06);
  --pxl-neutral-300a:    rgba(29,31,36,0.10);
  --pxl-neutral-400a:    rgba(29,31,36,0.14);
  --pxl-neutral-500a:    rgba(29,31,36,0.22);

  /* Slate (warm grey neutrals) */
  --pxl-slate-100:       #f1f5f9;
  --pxl-slate-200:       #e3e7e9;
  --pxl-slate-300:       #dcdfe4;
  --pxl-slate-400:       #c1c7d0;
  --pxl-slate-500:       #758195;
  --pxl-slate-600:       #656f80;
  --pxl-slate-700:       #44546f;
  --pxl-slate-800:       #2c333a;
  --pxl-slate-900:       #1d2125;
  --pxl-slate-1000:      #080d0e;

  /* Dark surface scale (for dark theme) */
  --pxl-dark:            #1d2125;
  --pxl-dark-100:        #232933;
  --pxl-dark-200:        #2c333a;
  --pxl-dark-250:        #38414a;
  --pxl-dark-300:        #454f59;
  --pxl-dark-350:        #525b66;
  --pxl-dark-400:        #5e6878;
  --pxl-dark-500:        #758195;
  --pxl-dark-600:        #8690a2;
  --pxl-dark-700:        #a4abb8;
  --pxl-dark-800:        #c1c7d0;
  --pxl-dark-900:        #dcdfe4;
  --pxl-dark-1000:       #f1f5f9;

  /* Blue (information / link) */
  --pxl-blue-100:        #ecf3fe;
  --pxl-blue-200:        #d6e4fd;
  --pxl-blue-300:        #afc8fb;
  --pxl-blue-400:        #387ceb;
  --pxl-blue-500:        #2667c9;
  --pxl-blue-600:        #1f55a3;
  --pxl-blue-700:        #19447f;
  --pxl-blue-800:        #14365e;
  --pxl-blue-900:        #0f2740;
  --pxl-blue-1000:       #0a1825;

  /* Indigo (legacy primary / brand-bold dark theme) */
  --pxl-indigo-100:      #eef1fd;
  --pxl-indigo-200:      #d6dbf7;
  --pxl-indigo-300:      #adb6ef;
  --pxl-indigo-400:      #4b61dc;
  --pxl-indigo-500:      #4053bc;
  --pxl-indigo-600:      #34459e;
  --pxl-indigo-700:      #2a3880;
  --pxl-indigo-800:      #242f6a;
  --pxl-indigo-900:      #1a2150;
  --pxl-indigo-1000:     #111638;

  /* Violet (highlight / decorative) */
  --pxl-violet-100:      #f1edfd;
  --pxl-violet-200:      #d6caf6;
  --pxl-violet-300:      #b29ded;
  --pxl-violet-400:      #8270db;
  --pxl-violet-500:      #6b5cbe;
  --pxl-violet-600:      #574b9d;
  --pxl-violet-700:      #463c80;
  --pxl-violet-800:      #3a3268;
  --pxl-violet-900:      #2c2750;
  --pxl-violet-1000:     #1b1738;

  /* Fuchsia */
  --pxl-fuchsia-100:     #fbe9f5;
  --pxl-fuchsia-200:     #f4c7e6;
  --pxl-fuchsia-300:     #e890c8;
  --pxl-fuchsia-400:     #b73083;
  --pxl-fuchsia-500:     #9a2470;
  --pxl-fuchsia-600:     #7d1a5b;
  --pxl-fuchsia-700:     #631347;
  --pxl-fuchsia-800:     #4c0d37;
  --pxl-fuchsia-900:     #380a29;
  --pxl-fuchsia-1000:    #210619;

  /* Red (danger / critical) */
  --pxl-red-100:         #fbecea;
  --pxl-red-200:         #f5cfca;
  --pxl-red-300:         #eba39a;
  --pxl-red-400:         #e2483d;
  --pxl-red-500:         #c33e35;
  --pxl-red-600:         #a8352d;
  --pxl-red-700:         #872a24;
  --pxl-red-800:         #5e1e19;
  --pxl-red-900:         #441714;
  --pxl-red-1000:        #260c0a;

  /* Orange */
  --pxl-orange-100:      #fbe7d6;
  --pxl-orange-200:      #f6c69e;
  --pxl-orange-300:      #ec9c5a;
  --pxl-orange-400:      #e46910;
  --pxl-orange-500:      #c45a0e;
  --pxl-orange-600:      #a14a0b;
  --pxl-orange-700:      #7f3a09;
  --pxl-orange-800:      #5a2906;
  --pxl-orange-900:      #401d04;
  --pxl-orange-1000:     #251002;

  /* Yellow (warning) */
  --pxl-yellow-100:      #fcefcc;
  --pxl-yellow-200:      #f8da7e;
  --pxl-yellow-300:      #e8a92e;
  --pxl-yellow-400:      #c38d24;
  --pxl-yellow-500:      #a0731c;
  --pxl-yellow-600:      #7f5b15;
  --pxl-yellow-700:      #644710;
  --pxl-yellow-800:      #46320b;
  --pxl-yellow-900:      #2e2107;
  --pxl-yellow-1000:     #1a1304;

  /* Lime */
  --pxl-lime-100:        #ecf6d0;
  --pxl-lime-200:        #d2e89c;
  --pxl-lime-300:        #abd45a;
  --pxl-lime-400:        #6da026;
  --pxl-lime-500:        #5b881f;
  --pxl-lime-600:        #4a6f1a;
  --pxl-lime-700:        #395713;
  --pxl-lime-800:        #2a410d;
  --pxl-lime-900:        #1d2d09;
  --pxl-lime-1000:       #111a05;

  /* Green (success) */
  --pxl-green-100:       #d9f3e3;
  --pxl-green-200:       #aae3c0;
  --pxl-green-300:       #66c98c;
  --pxl-green-400:       #1f9d57;
  --pxl-green-500:       #1a854a;
  --pxl-green-600:       #156c3c;
  --pxl-green-700:       #105530;
  --pxl-green-800:       #0c4024;
  --pxl-green-900:       #082e1a;
  --pxl-green-1000:      #051a0e;

  /* Teal */
  --pxl-teal-100:        #cdeef0;
  --pxl-teal-200:        #99dde0;
  --pxl-teal-300:        #4cc6cc;
  --pxl-teal-400:        #0a9aa1;
  --pxl-teal-500:        #088388;
  --pxl-teal-600:        #066a6f;
  --pxl-teal-700:        #055457;
  --pxl-teal-800:        #033f42;
  --pxl-teal-900:        #022c2e;
  --pxl-teal-1000:       #011819;

  /* Emerald (Pixel 2.4 primary / brand-bold light) */
  --pxl-emerald-100:     #d2f0e4;
  --pxl-emerald-200:     #a3e0c8;
  --pxl-emerald-300:     #4dc395;
  --pxl-emerald-400:     #029861;
  --pxl-emerald-500:     #027f51;
  --pxl-emerald-600:     #0f6d4d;
  --pxl-emerald-700:     #0e4f3a;
  --pxl-emerald-800:     #0a3e2d;
  --pxl-emerald-900:     #062c20;
  --pxl-emerald-1000:    #021810;

  /* Pure dark accent used in greeting / hero cards */
  --pxl-brand-navy:      #2e4a9f;

  /* =========================================================================
     SEMANTIC TOKENS  — from /Color/Color (pxl-color-background-*, text, icon)
     Light theme defaults. Override `:root[data-theme="dark"]` for dark.
     ======================================================================= */

  /* Surfaces */
  --pxl-color-background-stage:                    var(--pxl-white);
  --pxl-color-background-surface:                  var(--pxl-neutral-200);   /* page bg */
  --pxl-color-background-overlay:                  rgba(35,41,51,0.8);
  --pxl-color-background-disabled:                 var(--pxl-neutral-100a);
  --pxl-color-background-inverse:                  var(--pxl-dark-100);

  /* Information (blue) */
  --pxl-color-background-information:              var(--pxl-blue-100);
  --pxl-color-background-information-bold:         var(--pxl-blue-700);

  /* Neutral */
  --pxl-color-background-neutral-hovered:          var(--pxl-slate-100);
  --pxl-color-background-neutral-pressed:          var(--pxl-slate-200);
  --pxl-color-background-neutral-selected:         var(--pxl-slate-100);
  --pxl-color-background-neutral-subtle:           var(--pxl-slate-100);
  --pxl-color-background-neutral-subtle-hovered:   var(--pxl-slate-200);
  --pxl-color-background-neutral-subtle-pressed:   var(--pxl-slate-300);
  --pxl-color-background-neutral-bold:             var(--pxl-slate-800);
  --pxl-color-background-neutral-bold-hovered:     var(--pxl-slate-900);
  --pxl-color-background-neutral-bold-pressed:     var(--pxl-slate-1000);

  /* Brand — Pixel 2.4 default = Emerald. Indigo for dark theme. */
  --pxl-color-background-brand:                    var(--pxl-emerald-100);
  --pxl-color-background-brand-hovered:            var(--pxl-emerald-200);
  --pxl-color-background-brand-pressed:            var(--pxl-emerald-300);
  --pxl-color-background-brand-selected:           var(--pxl-emerald-200);
  --pxl-color-background-brand-bold:               var(--pxl-emerald-700);
  --pxl-color-background-brand-bold-hovered:       var(--pxl-emerald-800);
  --pxl-color-background-brand-bold-pressed:       var(--pxl-emerald-900);
  --pxl-color-background-brand-bold-selected:      var(--pxl-emerald-800);

  /* Tertiary (dark on light) */
  --pxl-color-background-tertiary:                 var(--pxl-dark-200);
  --pxl-color-background-tertiary-hovered:         var(--pxl-dark-300);
  --pxl-color-background-tertiary-pressed:         var(--pxl-dark-400);

  /* Danger */
  --pxl-color-background-danger:                   var(--pxl-red-100);
  --pxl-color-background-danger-hovered:           var(--pxl-red-200);
  --pxl-color-background-danger-pressed:           var(--pxl-red-300);
  --pxl-color-background-danger-bold:              var(--pxl-red-700);
  --pxl-color-background-danger-bold-hovered:      var(--pxl-red-800);
  --pxl-color-background-danger-bold-pressed:      var(--pxl-red-900);

  /* Warning */
  --pxl-color-background-warning:                  var(--pxl-yellow-100);
  --pxl-color-background-warning-hovered:          var(--pxl-yellow-200);
  --pxl-color-background-warning-pressed:          var(--pxl-yellow-300);
  --pxl-color-background-warning-bold:             var(--pxl-yellow-300);
  --pxl-color-background-warning-bold-hovered:     var(--pxl-yellow-400);

  /* Success */
  --pxl-color-background-success:                  var(--pxl-green-100);
  --pxl-color-background-success-hovered:          var(--pxl-green-200);
  --pxl-color-background-success-pressed:          var(--pxl-green-300);
  --pxl-color-background-success-bold:             var(--pxl-green-700);
  --pxl-color-background-success-bold-hovered:     var(--pxl-green-800);

  /* Highlight (violet) */
  --pxl-color-background-highlight:                var(--pxl-violet-100);
  --pxl-color-background-highlight-hovered:        var(--pxl-violet-200);
  --pxl-color-background-highlight-bold:           var(--pxl-violet-700);
  --pxl-color-background-highlight-bold-hovered:   var(--pxl-violet-800);

  /* Navigation surfaces (left sidebar) */
  --pxl-color-background-nav-parent:               var(--pxl-emerald-1000);
  --pxl-color-background-nav-stack:                var(--pxl-dark);
  --pxl-color-background-nav-stack-hovered:        var(--pxl-dark-100);

  /* Borders */
  --pxl-color-border-default:                      #dcdfe4;
  --pxl-color-border-strong:                       #c1c7d0;
  --pxl-color-border-subtle:                       #e7edf5;
  --pxl-color-border-bold:                         var(--pxl-slate-700);
  --pxl-color-border-brand:                        var(--pxl-emerald-700);
  --pxl-color-border-danger:                       var(--pxl-red-500);
  --pxl-color-border-warning:                      var(--pxl-yellow-400);
  --pxl-color-border-success:                      var(--pxl-green-500);
  --pxl-color-border-information:                  var(--pxl-blue-400);

  /* Text */
  --pxl-color-text-default:                        #1d1f24; /* slate-near-black */
  --pxl-color-text-subtle:                         var(--pxl-slate-600);
  --pxl-color-text-muted:                          var(--pxl-slate-500);
  --pxl-color-text-disabled:                       var(--pxl-neutral-500);
  --pxl-color-text-on-bold:                        var(--pxl-white);
  --pxl-color-text-brand:                          var(--pxl-emerald-700);
  --pxl-color-text-information:                    var(--pxl-blue-700);
  --pxl-color-text-danger:                         var(--pxl-red-700);
  --pxl-color-text-warning:                        var(--pxl-yellow-600);
  --pxl-color-text-success:                        var(--pxl-green-700);
  --pxl-color-text-highlight:                      var(--pxl-violet-700);

  /* Icon */
  --pxl-color-icon-default:                        var(--pxl-slate-700);
  --pxl-color-icon-subtle:                         var(--pxl-slate-500);
  --pxl-color-icon-on-bold:                        var(--pxl-white);
  --pxl-color-icon-brand:                          var(--pxl-emerald-700);

  /* =========================================================================
     SPACING  — from /Spacing
     ======================================================================= */
  --pxl-space-3xs: 4px;
  --pxl-space-2xs: 6px;
  --pxl-space-xs:  8px;
  --pxl-space-sm:  12px;
  --pxl-space-md:  16px;
  --pxl-space-lg:  20px;
  --pxl-space-xl:  24px;
  --pxl-space-2xl: 32px;
  --pxl-space-3xl: 40px;
  --pxl-space-4xl: 80px;

  /* =========================================================================
     RADIUS
     ======================================================================= */
  --pxl-radius-xs:    2px;
  --pxl-radius-sm:    4px;
  --pxl-radius-md:    6px;
  --pxl-radius-lg:    8px;
  --pxl-radius-xl:    12px;
  --pxl-radius-2xl:   16px;
  --pxl-radius-pill:  999px;

  /* =========================================================================
     ELEVATION  — from /Elevation. XS card, S dropdown, M popover, L modal.
     ======================================================================= */
  --pxl-shadow-xs: 0 0 2px 0 rgba(29,31,36,0.16), 0 2px 4px 0 rgba(29,31,36,0.16);
  --pxl-shadow-s:  0 0 2px 0 rgba(29,31,36,0.10), 0 4px 8px 0 rgba(29,31,36,0.12);
  --pxl-shadow-m:  0 0 2px 0 rgba(29,31,36,0.08), 0 8px 16px 0 rgba(29,31,36,0.16);
  --pxl-shadow-l:  0 0 2px 0 rgba(29,31,36,0.06), 0 16px 32px 0 rgba(29,31,36,0.20);

  /* =========================================================================
     TYPE  — from /Typography. Pixel 2.4 uses Inter throughout.
     ======================================================================= */
  --pxl-font-sans:   'Inter', 'SF Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --pxl-font-mono:   'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --pxl-font-brand:  'IBM Plex Sans', 'Inter', sans-serif; /* used by Mekari brand titles */

  /* Type scale */
  --pxl-type-h1-size: 24px;  --pxl-type-h1-line: 32px;  --pxl-type-h1-weight: 600;
  --pxl-type-h2-size: 20px;  --pxl-type-h2-line: 28px;  --pxl-type-h2-weight: 600;
  --pxl-type-h3-size: 16px;  --pxl-type-h3-line: 24px;  --pxl-type-h3-weight: 600;

  --pxl-type-label-size:   14px; --pxl-type-label-line:   20px;
  --pxl-type-body-size:    14px; --pxl-type-body-line:    24px;
  --pxl-type-body-sm-size: 12px; --pxl-type-body-sm-line: 20px;
  --pxl-type-label-sm-size:12px; --pxl-type-label-sm-line:16px;
  --pxl-type-overline-size:10px; --pxl-type-overline-line:12px;

  --pxl-type-weight-regular:  400;
  --pxl-type-weight-medium:   500;
  --pxl-type-weight-semibold: 600;
  --pxl-type-weight-bold:     700;

  /* Display sizes used in hero cards / marketing */
  --pxl-type-display-xl:  64px;
  --pxl-type-display-lg:  48px;
  --pxl-type-display-md:  32px;

  /* Layout */
  --pxl-navbar-height: 56px;
  --pxl-sidebar-collapsed: 52px;
  --pxl-sidebar-expanded: 216px;
}

/* ---------- Element defaults --------------------------------------------- */
html, body {
  font-family: var(--pxl-font-sans);
  font-size: var(--pxl-type-body-size);
  line-height: var(--pxl-type-body-line);
  color: var(--pxl-color-text-default);
  background: var(--pxl-color-background-surface);
  -webkit-font-smoothing: antialiased;
}

h1, .pxl-h1 {
  font-size: var(--pxl-type-h1-size);
  line-height: var(--pxl-type-h1-line);
  font-weight: var(--pxl-type-h1-weight);
  letter-spacing: -0.01em;
  margin: 0;
}
h2, .pxl-h2 {
  font-size: var(--pxl-type-h2-size);
  line-height: var(--pxl-type-h2-line);
  font-weight: var(--pxl-type-h2-weight);
  margin: 0;
}
h3, .pxl-h3 {
  font-size: var(--pxl-type-h3-size);
  line-height: var(--pxl-type-h3-line);
  font-weight: var(--pxl-type-h3-weight);
  margin: 0;
}
.pxl-label   { font-size: var(--pxl-type-label-size);    line-height: var(--pxl-type-label-line); }
.pxl-label-sm{ font-size: var(--pxl-type-label-sm-size); line-height: var(--pxl-type-label-sm-line); }
.pxl-body    { font-size: var(--pxl-type-body-size);     line-height: var(--pxl-type-body-line); }
.pxl-body-sm { font-size: var(--pxl-type-body-sm-size);  line-height: var(--pxl-type-body-sm-line); }
.pxl-overline{
  font-size: var(--pxl-type-overline-size);
  line-height: var(--pxl-type-overline-line);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

code, pre, .pxl-mono { font-family: var(--pxl-font-mono); }
.pxl-text-subtle  { color: var(--pxl-color-text-subtle); }
.pxl-text-muted   { color: var(--pxl-color-text-muted); }
.pxl-text-brand   { color: var(--pxl-color-text-brand); }
.pxl-text-danger  { color: var(--pxl-color-text-danger); }
.pxl-text-success { color: var(--pxl-color-text-success); }

/* Link */
a, .pxl-link {
  color: var(--pxl-color-text-information);
  text-decoration: none;
}
a:hover, .pxl-link:hover { text-decoration: underline; }