/* Wrenchmate Premium UI System
   Tokens only. Scoped components consume these variables without touching data logic. */

:root{
  --wmp-bg:#080b10;
  --wmp-bg-2:#0d1219;
  --wmp-bg-3:#121923;
  --wmp-surface:rgba(16,23,34,.94);
  --wmp-surface-2:rgba(23,32,45,.92);
  --wmp-surface-3:rgba(31,43,59,.84);
  --wmp-surface-solid:#151d28;

  --wmp-text:#f4f7fb;
  --wmp-text-soft:#d7dee9;
  --wmp-muted:#9aa7b8;
  --wmp-dim:#657286;

  --wmp-border:rgba(148,163,184,.16);
  --wmp-border-strong:rgba(175,188,204,.28);
  --wmp-line:rgba(255,255,255,.08);

  --wmp-accent:#d66f68;
  --wmp-accent-rgb:214,111,104;
  --wmp-accent-2:#8b7cf6;
  --wmp-accent-soft:rgba(214,111,104,.14);
  --wmp-accent-line:rgba(214,111,104,.42);
  --wmp-success:#39c982;
  --wmp-warning:#e5a93f;
  --wmp-danger:#ef6666;

  --wmp-radius-xs:4px;
  --wmp-radius-sm:6px;
  --wmp-radius-md:9px;
  --wmp-radius-lg:12px;
  --wmp-radius-xl:14px;
  --wmp-cut-sm:10px;
  --wmp-cut-md:18px;
  --wmp-cut-lg:28px;

  --wmp-shadow-soft:0 18px 48px rgba(0,0,0,.28);
  --wmp-shadow-panel:0 28px 80px rgba(0,0,0,.36);
  --wmp-shadow-tight:0 10px 28px rgba(0,0,0,.24);

  --wmp-sidebar-w:268px;
  --wmp-content-max:1480px;
  --wmp-page-gap:22px;

  --wmp-header-bg:rgba(7,14,23,.94);
  --wmp-header-border:rgba(132,160,193,.24);
  --wmp-header-title:#f7f8fb;
  --wmp-header-copy:#9eabc0;
  --wmp-header-shadow:0 20px 52px rgba(0,0,0,.22);
  --wmp-header-radius:10px;
  --wmp-header-blur:blur(7px) saturate(92%);
  --wmp-header-height:150px;
  --wmp-header-padding-block:28px;
  --wmp-header-padding-inline:30px;
  --wmp-header-title-size:48px;
  --wmp-header-title-size-mobile:40px;
  --wmp-header-chrome-duration:16s;

  --wmp-control-height:42px;
  --wmp-control-height-mobile:46px;
  --wmp-control-radius:7px;
  --wmp-control-padding-inline:16px;
  --wmp-control-bg:rgba(18,26,38,.82);
  --wmp-control-bg-hover:rgba(28,39,55,.94);
  --wmp-control-border:rgba(151,169,191,.24);
  --wmp-control-border-hover:rgba(177,196,218,.42);
  --wmp-control-shadow:inset 0 1px 0 rgba(255,255,255,.055);
  --wmp-actionbar-bg:rgba(7,12,19,.76);
  --wmp-actionbar-border:rgba(132,160,193,.20);
  --wmp-actionbar-shadow:0 16px 38px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.045);

  --wmp-motion-fast:140ms;
  --wmp-motion-med:220ms;
  --wmp-motion-slow:360ms;
  --wmp-ease:cubic-bezier(.2,.8,.2,1);
}

html[data-accent="blue"]{
  --wmp-accent:#5f8fd8;
  --wmp-accent-rgb:95,143,216;
  --wmp-accent-soft:rgba(95,143,216,.14);
  --wmp-accent-line:rgba(95,143,216,.42);
}

html[data-theme="light"]{
  --wmp-bg:#e8e1d6;
  --wmp-bg-2:#f0e9de;
  --wmp-bg-3:#f5efe5;
  --wmp-surface:rgba(248,242,232,.94);
  --wmp-surface-2:rgba(239,230,217,.92);
  --wmp-surface-3:rgba(230,219,204,.86);
  --wmp-surface-solid:#f2eadf;

  --wmp-text:#161b24;
  --wmp-text-soft:#303949;
  --wmp-muted:#697386;
  --wmp-dim:#818a9b;

  --wmp-border:rgba(83,70,52,.16);
  --wmp-border-strong:rgba(83,70,52,.28);
  --wmp-line:rgba(83,70,52,.10);

  --wmp-shadow-soft:0 18px 46px rgba(69,55,36,.14);
  --wmp-shadow-panel:0 28px 74px rgba(69,55,36,.17);
  --wmp-shadow-tight:0 10px 26px rgba(69,55,36,.13);

  --wmp-header-bg:rgb(242,241,237);
  --wmp-header-border:rgba(40,52,68,.24);
  --wmp-header-title:#111a29;
  --wmp-header-copy:#526178;
  --wmp-header-shadow:0 16px 38px rgba(31,38,47,.14);
  --wmp-header-blur:blur(8px) saturate(92%);

  --wmp-control-bg:rgba(255,253,249,.88);
  --wmp-control-bg-hover:#fff;
  --wmp-control-border:rgba(64,54,43,.22);
  --wmp-control-border-hover:rgba(64,54,43,.36);
  --wmp-control-shadow:0 8px 20px rgba(41,34,24,.08),inset 0 1px 0 rgba(255,255,255,.82);
  --wmp-actionbar-bg:rgba(247,242,233,.88);
  --wmp-actionbar-border:rgba(64,54,43,.18);
  --wmp-actionbar-shadow:0 14px 34px rgba(41,34,24,.10),inset 0 1px 0 rgba(255,255,255,.78);
}